Mix Dynamic Values With Text in a <p> Tag

Wappler General
1

Hey folks… so I have played with the innerText element to display the value of a variable, and I can see how it is set on a complete html tag. Can I mix the value of a dynamic variable with my own text in a single <p> tag?

So to say something of the form:

<p>Value of toggler_1: (toggler_1.value)</p>

I was thinking to do it with a <span>, but I can’t find a span tag in the Wappler interface…

In the end I did it with a table, but that was a tedious overkill!

Best wishes,
Antony.

2

Is it possible to explain what are you trying to achieve - maybe provide some example?

3

Hi @Teodor… sure. If I have a variable called “toggler”, I want to create a single paragraph tag with output:

Value of toggler: 1

4

You can just write:

<p>Value of toggler: {{toggler_1.value}}</p>

:slight_smile:

5

Just add a paragraph and then firstly add the static part then use the picker to select the dynamic value

1 Like
6

aaaahhhh… double wiggly brackets… so that is the answer… thank you! :slight_smile:

2 Likes
7

Yes and if you just select the text in design view - you can double click and edit it and there is a thunder icon to add dynamic data on it.

In code view the same is possible, just put the cursor inside the text and from the inspector choose insert binding.

8

Yes, no need to manually add it:

values
values.gif1213×745 75.4 KB

2 Likes
9

Thanks @George!
It seems to be [Insert Binding] the option to select from code view now…

2 Likes
10

Wow… thank you everyone… such immediate love and attention! :pray:

1 Like
11

@Teodor, what software do you use to create those little video gifs like you just posted?

(I’m running Windows 10).

12

It’s this one: https://www.screentogif.com/

Really handy little tool :slight_smile:

1 Like
13

Do you know of any Mac equivalents?

14

No, sorry - I’m not aware of any.

15

Gifox on mac app store.

1 Like
16

Tried Gifox … couldn’t figure out how to stop recording. Moved on to Giphy. Very easy but huge file sizes.

17

I am trying to do the same above, without success.

  1. converted app to page
    for h1 it works, while for <p> no,
    image
    image928×565 44.4 KB

here how i see it on front end:

image
image948×87 4.25 KB

please advice

18

Please explain what exactly are you trying to achieve and what is not working?

19

@Teodor,
it`s title and description are stored in the database.
I am trying to load the paragraph dynamically from database
as you can see above

<h1>{{serverconnect1.data.repeat1[0].form_name}}</h1>

this one works
while

<p dmx-bind:title="">Here would be instruction text and intro before the form fill.{{serverconnect1.data.repeat1[0].form_description}}</p>

is not working, and no data is loaded on front end.

20

This means that the {{serverconnect1.data.repeat1[0].form_description}} binding returns nothing.