Hey there Retool Community!
I've seen a lot of questions come up from people wanting to change the value of a property in Retool that doesn't have a native JS method (i.e. text1.setValue()
) When it comes to setting properties for Retool components, you might be tempted to do something like this (see bottom panel).
This will not work!
In order to set properties dynamically, you will need to reference whatever is changing the property (a query, or some other component) within the right-hand panel. Here's an example using a checkbox component's .value
property! Checking and unchecking will yield true
or false
and allows the component to be disabled/enabled.
Now, let's expand that idea using a JS query and some simple logic in order to use a button to hide a container.
Our JS query will look like this (you can copy and paste):
if(container1.hidden === true){
return false
}
else if(container1.hidden === false){
return true
}
Here it is in the editor:
Now I'll attach this query to a button component's "Click" event handler.
And, reference this query.data
(in this case hideContainer.data
) in the container's "Hidden" property in the right-hand panel.
This may seem similar to the checkbox (it is!), with the only difference being that your JS query could handle more complicated logic. Let's say you want to show this container only if a form is completely filled out or after an API returns only certain values...or whatever you want!
These are just some simple examples. If you have any further questions please let us know! You can respond below or @me or whatever you like. And, if you have any examples along these lines that you think would be helpful for other users to see (or just some really cool apps or code you want to showcase), please share below!
Finally, here are some great additional resources from our docs!
https://docs.retool.com/docs/app-editor#hide-or-disable-components
https://docs.retool.com/docs/app-appearance#hiding-and-disabling-components--queries