Updating label on switch toggle

Wappler General How To
#1

Hello !

I’m new to Wappler and a bit lost for now.
Searching through the forum and docs didn’t answer my questions but I might just search with the wrong terminology…

  1. I’m trying to understand the difference between dynamic events and dynamic attributes.
    I couldn’t find anything relevant for the latter in the documentation.
    Did I miss something ?

  2. I have a switch toggle element.
    And I would like to edit the label attached to it when enabled.
    https://www.screencast.com/t/h8pNtdZS9Fy

I managed to add a “rule” to update an input when the switch is toogled on : https://www.screencast.com/t/fevGqvPD
But I can’t figure out the syntax to make it work on a label, what kind of language is it ?

Plus that would be only half of the job done as I guess I would have to revert the original label value when the switch is toggled off again. And I have no clue on how to do that.
My guess is that I would need to use jquery somewhere…

All suggestions and ressources are welcomed.

Thank you very much for your help ! :slight_smile:

Geoffrey

#2

I’ll answer your first point first. It is easier for this tired old bod to take things one by one so as to not get confused.

An attribute is another word for modifier. An example of an attribute is ‘type’ and ‘name’ for an input field as in
<input type="text" name="fname"> or <input type="hidden" name="lname">

An event is a special type of attribute (confusing?). Events need a trigger caused by an action. Examples of events are

  • on load
  • on click
  • on change

An event can be used to change the value of an attribute.

#3

The second point.

Assuming that the toggle switch is based on a checkbox, off will mean that the box is not checked. In this case you can hide one label and show the other label when the checkbox is checked.

image

1 Like
#4

Thank you very much Ben ! :slight_smile:

In the meantime, I found a solution for my toggle issue :

With the following code :
if($(this).is(":checked")) {
$(’#input1label’).text(‘TTC’)
}else{
$(’#input1label’).text(‘HT’)
}

I’m wondering if it’s ok to put this kind of script on one line or if there are better practices for code readability !

I’m also still confused about what language is used.
It seems that it’s jquery for static events.
For validation rules and dynamic events/attributes, I just copy/paste what I see in the documentation without knowing what language it is. Can you point me in the right direction ?

Any help is appreciated. Thanks ! :slight_smile:

#5

Your approach seems more elegant (less code). Thanks !

#6

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).

#7

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

#8

Thank you very much Ben !

#9

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

1 Like
#10

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

1 Like
#11

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 !

#12

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
#13

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 ?

#14

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
#15

Makes sense. Thanks for the help ! :slight_smile:

#16

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

#17

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”

1164×511 35 KB

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:

#18

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

#19

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:

1651×522 63.1 KB

#20

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