How to Toggle Properties That Don't Have Built-in Methods

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

:rotating_light:This will not work! :rotating_light:

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. :grinning_face_with_smiling_eyes: 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

5 Likes

A good technique that is essentially the same as using a transformer, but you get the advantage of not needing to wrap every Retool reference in a {{ }}, and I imagine you can probably use async pattern
to get synchrouous flow (ironic isn't it?) if needed.

This does beg the question, are there any other differences between using a js query vs a js transformer for this? Performance differences? Load time differences?

1 Like

Another technique is to use a temp state variable to hold the property's value.

The one advantage of this method is you can set your property from in many parts of your code. Like setting within an event:

Or from a JS query somewhere (or many somewheres):

Any others out there?

The disadvantage of this is there is no good way to find every place you modified the property which can lead to hidden effects. But that is a standard problem with all such platforms.

I will write another tip on how I do track this down.

4 Likes

HI,
How can I change the clickable property of an icon? It doesn't have a built in access in the right-hand panel.

You will find it here:

If you are using the new IDE you may have to popout the panel. Look in the upper right after you select your icon:

image

2 Likes

Hi Bradly,

I also like the temp state variable method you propose.

I'll often put a hidden debug container at the bottom of a page and drop a checkbox component (your "isHidden") into it. That way I don't need to look for variables in the code listing on the left hand side.

I have one example where I used a selector with values ['waiting','running','paused','done'] and these got set by various parts of the code, making it a simple state machine.

Thanks to @jSims for outlining the whole declarative/imperative issue so explicitly. It took me two weeks to get used to this. My main complaint now is that not all properties I want get exposed in the IDE panel.

1 Like