I am trying to change the hidden property of a container based on JavaScript queries run.
One query, which is triggered on drop-down update value, sets, container1.hidden = true, when this query runs the container hidden value doesn't change, it is still viewable.
So I was thinking, I probably can't directly interact with the container object like that, so let's try a variable. I created an application variable window.showContainer1 = true and added to the Container's UI field, {{ !window.showContainer1 }}.
In the JavaScript query I update the value false. This doesn't seem to work either. The container's hidden state never changes. Though again, sandbox, perhaps I can't change those values either.
when this query runs the container hidden value doesn't change, it is still viewable. There is nothing in the container's ui hidden field either. Any suggestions?
Hi @brettski, thanks for writing in! I think you're on the right track here with the second idea of leveraging a variable. In Retool, you generally set variables that can be referenced by components instead of attempting to control the component directly. In this case, we can utilize Temporary State to achieve setting the hidden state on query runs.
The idea here is to create a Temporary State that has a boolean value. The query can utilize the setValue function of the Temporary State to set the value when it is run. The Container component can reference the temporary state in its hidden property.
Depending on how your app is set up, you may be able to utilize an existing state in lieu of a Temporary State, which may help simplify this flow.
I hope this helps!
1 Like
I never saw those magical values before. Very interesting, I think that will do what I need, and thank you for including the link to Temporary State so I didn't need to hunt for it.
So was I correct in my statement that the app variables (window scope) cannot be updated by JavaScript Queries (and probably components too)?
That's the difference between property and value in Html tag.
Well, mostly property is used for the initial value, once it is set it doesn't change.
So the hidden property was set as true and it didn't change whatever you set container1.hidden = true - this is for value change not property change .
