Updating label on switch toggle

Sure your method will work, but it is not necessary to code when using the Wappler way.

The framework that is used is App Connect which is a JavaScript framework similar to those mentioned here https://raygun.com/blog/popular-javascript-frameworks/. The advantage of App Connect within Wappler is that there is no need to code (with minor exceptions).

Please have a look at this tutorial which contains many of the workflows that you will be using with Wappler https://www.youtube.com/playlist?list=PLUjqTJN3byC9kK8YZkmGwjo9nrEipl2yb

Thank you very much Ben !

Don’t worry, you fall in love with Wappler soon enough.

1 Like

No need to have two labels
You could use this on the label text attribute
Checkbox.checked? “Checked” : “Not”

1 Like

Just tried it but couldn’t get it to work.
I must be missing something simple.
Is that supposed to be jQuery code ?

Where would that code go ?

My best bet so far was to update my code to something like that :
https://codepen.io/Jeoff75/pen/MLvYzm
(see second section)

Thank you very much for your help !

Don’t know Wappler at all but logic says something like the below should work:

We’ll if I knew how to post some html code it might help - where’s the option for doing that?

Found it:

<input id="myCheckBox" type="checkbox" dmx-bind:value="myCheckBox.checked? 'TTC' : 'HT'">
<label for="myCheckBox" dmx-text="myCheckBox.checked? 'TTC' : 'HT'"></label>
1 Like

Got it to work finally, thanks.
See https://codepen.io/Jeoff75/pen/MLvYzm

I understood that mrbdrm talked about the dmx-text attribute and not regular html attribute.
But this is not obvious to find as the GUI says “Inner Text” so I couldn’t immediatly make the connection :smile:

And this is “App connect” code I think.

I couldn’t locate a proper App Connect extensive documentation.
Do you know where I can find one ?

Just be aware there is no ‘value’ input in your checkbox field (its empty) unless you bind the value to it. This might just be for visual effect but if you’re returning something to a database or need the value HT/TTC for some other aspect of your overall concept you need to bind the value to the checkbox OR grab the current status from the label field.

Check it out by looking in your browers inspection tools.

1 Like

Makes sense. Thanks for the help ! :slight_smile:

3 posts were split to a new topic: App Connect in-depth documentation

Hello dear Wappler superstars !

I’m reviving this old topic.
Today I ran within a similar issue under different circumstances.

I’m using a bootstrap table.
I managed to generate a dynamic “independant” switch on each line thanks to {{$index}} in my repeat block.

But I’m now stuck again on my dynamic label.
If I use the DB value to evaluate : dmx-text=“probe_activated?true:false”

The label displays as expected but is not refreshed dynamically when I hit the switch and change it’s status. (Because it’s still bound to the DB value.)

If I try instead the following syntax : dmx-text=“ag_toggle_{{$index}}?true:false”
It displays the whole thing as a single string.

If I remove the {{}} : dmx-text=“ag_toggle_$index?true:false”
It displays false in every instance.

Anyone with a magic syntax to make this work ?
Or I’m just missing the boat and there is an other (simpler) way to do this ?

Thanks and have a great day ! :slight_smile:

remove dmx-text and use {{ag_toggle_+$index ? true : false}} in label

Thanks ! It works on the initial display but value isn’t adjusted when the switch status changes…
Unless I misunderstood where you’re placing this code ? :slight_smile:

{{ag_toggle_+$index+'.checked' ? true : false}}
yes your placement correct

Thanks again !
So with your syntax, I get “true” in every instance.

I tried then without the single quote around ‘.checked’…
It works on the initial display but value isn’t adjusted when the switch status changes (like in your first example)

I tried also in dmx-text without the {{}} = same result.

I can see the checked value gets updated in dmx.app.data, but can’t get to dinamically update the label though.
This drives me crazy haha !

Just add a static name to the toggle input, like name="ag_toggle"

Then in the label use: {{ag_toggle.checked}} -> it will return true/false.

1 Like

That’s magic to me. Thank you very much. :wink:

Code for those wondering :

Can you elaborate a bit about why this works like this if you have a moment ?
Or point me to a doc/link so that I can understand the mechanics for later use.

Have a great evening !

When you are using a repeat, it has its own local scope and when you are targeting the static name it will only target the element in this scope.

Awesome ! Thanks for the clarification :slight_smile:

1 Like