Targets and Actions

Wappler General How To
#1

Sometimes, or quite often I want to control one item with an element.

I think it would be great to have a component called Target that wraps a special tag around the element you want to target for some action. Then a second component called Action that can control any Targets on the page.

So let’s say i have a button or an a tag in the bottom right of my page, i want to make a div or a span on my page in the top left toggle visibility to show/hide when the button is clicked.
I could wrap the Target component around the div / span i want to show/hide and wrap an Action tag around my button / a tag.

Hope this makes sense, as it is already similar to how a modal works for instance, i just want that same sort of functionality for any chosen element regardless of if it is a modal or whatever.

#2

Hi Paul, there’s already such a functionality. It’s called dynamic attributes. There you can change any CSS property or class, using some dynamic value like - variable value.
On click you can change the variable value, which controls your dynamic attribute/class/CSS style.

#3

If i have this how would i hide that text in the “div” with the “Controller” link

<a href="javascript:void(0);">Controller<a>
<div>Here is some text I want to hide</div>

Maybe I am just confused and need a little nudge back on track here.

#4

Create a variable. Assign a value of 0 to it. Bind the variable value as a dmx-show="var.value == 1" to your div.
Bind dynamic even on click on the button, select the variable, select set value. Set a value of 1.

You are done.

#5

Ok well I am glad I had not gone nuts, I did exactly that, it gets a little messy with many variables created if you have many show hide things, but i think mine is quite a specific use case.

Take Wappler as an application for a great example. Lets say i was recreating the file manager button itself where onclick it needs to collapse a panel and add a blue line to the left hand side of the button. It’s fine to do it with variables with one button but once you start having many of them it gets a little confusing.

I cheeted mine by adding a collapse area and a button then i set all the collapse properties such as click toggles.

#6

You can change multiple properties, classes or styles with one variable value.
So that blue line can be a dynamic class, which gets changed depending on the var.value …

#7

Not to mention you can use one variable, for all your divs that need to be shown/hidden. Just change values with different buttons :slight_smile:

#8

Ok, let me have a coffee and rethink this a little, haha, thanks Teodor.

#9

Just to clear up:
You need one variable, which you can call ‘toggler’ which has a default value of 0.
Each of your buttons changes this variable value to whatever is needed 1, 2, 3 … 99
Each div that needs to be shown/hidden reads this variable value inside the dmx-show= attribute assigned to it.

1 Like
#10

As Teodor said - you can easily accomplish this with the dynamic visibility toggle attributes - all dependent from data.

Just curious what is your real life case you want to achieve?

#11

I have managed to get it working much easier than initially with Teodors example, so thanks very much for that, sometimes it takes time to get my head around things. LOL

I am trying to achieve the exact same functionality as Wappler

The File Manager is open with a blue line by the button with all other panels closed, if you click the file manager again it closes all left hand panels.
If you click the Server Connect button it adds the blue line and shows the panel, if the file manager was open at the time it will close that too.

I think because I would normally use collapse with data targets for this i got myself a little confused because i think i found a small bug in the collapse element where if you have this then it is selectable through the data bindings
<div class="collapse"
but if you add any other class into there like
<div class="collapse col-auto"
Then suddenly it is not available as a data binding.

The second thing that then got me on the data bindings for a collapse was when trying to choose the class toggle, as the only binding i could find available was
collapse1.collapsed
I was also looking for a collapse1.shown but could not find that.

I can not really show this publicly as yet because it is part of the next weeks entry. :smiley:

1 Like
#12

You just have to think in terms of data state.

So make some global variables that contain the visibility status of various components.

You can define those in the state manager.

Then make all your components visibility dependent on them.

And lastly when you have toggle buttons - just change the visibility variable values and then all the visibility dependencies will execute.

The good thing when using state manager is that those state variables retain their values after page reload so your page automatically gets into the last visibility state.

1 Like
#13

I would love to see a video . or tutorial on this. I quite often have to do the same thing.

1 Like
#14

Do you guys prefer to see a tutorial about saving the open/closed states even on page reload or just toggling them on the page with buttons, without saving what’s been open when you reload the page?

#15

Just toggling them on a page with a button is all I need.

2 Likes
#16

Set a variable, say varToggle =1
Set visibility of element under dynamic attributes so element will show on value of varToggle==1
Use a a button to toggle the value of varToggle with something like varToggle == 1?0:1
Sorry,can’t do much more, no computer access only on smartphone for next week

1 Like
#17

There you go @psweb and @brad:

1 Like