Toggling Visibility

Wappler General How To
#1

Hi, This is probably an old chestnut for you guys because I have looked thru the forums for answers and seen the entries explaining newer and older versions of wappler with their updated syntaxes for this. However the answers I saw there have not worked for me.

I have created a variable called varToggleFilter, initial value is 0. It is trying to toggle the visibility of a text box to the right of the button in the below screen dump.

I also added a notification to the button to try to see what effect the terniary is having.

image
image1261×467 68.4 KB

The text box is set as follows
image

I have added a ‘hide’ dynamic event as an experiment, when ‘show’ by itself did not work. I have also attempted to toggle the column that contains the text box, same result.

One thing that puzzles me is that when I click the button, I get 2 notifications, the first seeming to be null or blank, the 2nd being 1.

image

#2

Hi, an advance on the above, The syntax should also be checked on the element that is attempting to be toggled. It is initially incorrect as well.
If you type in the ‘show’ expression as recommended by the tutorial, then check the expression in code, you will see varToggleFilter.value+’==1’ . So I went into code and made it varToggleFilter.value==1.
It still does not toggle but at least the notification message only displays once per button click.
So, is there anything else needed to get the toggle to work?

#3

Hi @BruceX,

The dmx-show= setting for the text box to be toggled is not looking correct. You need to set only dmx-show or dmx-hide dynamic attribute for the box to show/hide when clicked on the filter button.

To set the dynamic attribute correctly, click on the dynamic picker, select the variable varToggleFilter -> value, click on code and type in == 1, select and save. Or you can type dmx-show="varToggleFilter.value == 1" in the html code directly.

#4

Hi, as it happened the code behind the text box to control visibility was exactly as you recommended.

image

I took the hide off, but there is no improvement.

#5

does it work before the button click?

#6

The button does start invisible, before the button is clicked, trouble is clicking the button does not bring it visible.

#7

What actions do you have on the button used to toggle the show?

#8

Hi Sorry
The code on the button is

image
image743×387 32.9 KB

Note: the notfications was just an attempt my me to see what was going on with the variable.

#9

How is it set in Wappler? don’t think its supposed to show like that in the elements

#10

Do you mean this

image

image

image

image

image

If I have missed anything, please let me know.

#11

The button toggle is working fine for me but what I notice is that yours is outputting the dmx-on event in the browser elements I believe that shouldn’t show up is this hosted atm?

#12

I do not know what you mean by that. What course of action should I take?

The page is https://marama-cloud.com/activity_summary.php

#13

It may not make a difference, but try adding a space around the == in your ternary expression

#14

The reason I asked you for the link was to check if it was your caches or something its working for me maybe try hard refresh your browser

#15

On a side note here I assume you’re working on this but just to make sure you’re aware that your margins are pushing your content past the header

Screenshot 2021-06-13 at 18.28.12
Screenshot 2021-06-13 at 18.28.12944×1360 114 KB

#16

The search box is toggling correctly when clicked on the filter icon. Try clearing the browser cache/hard refresh as suggested or try a different browser to see whether there’s a browser specific issue.

#17

Thank you guys for your attention and help, I really do value it and has kept me going in Wappler. At the moment I cannot ‘save all’, to get the web site up to the net because my Analyst is pitching the website to a client, incomplete as it is. I have not yet explored development v’s production environments, but it will come.

I did realise that the website has become a bit skewy, I discovered fluid state for containers and revised my margins etc, all seems well now in preview mode.

There is another issue that I posted at the beginning of the weekend, which no-one has replied to yet. About db views not returning rows like db tables can do in wappler. This is essential because one of my tabs displays summarised data from the database, so views are integral to our plans. Hope you can help, as you always do, thank you.

#18

Toggling visibility is now easier using the toggle component: