Making any component value dynamic in Retool

I often find myself wishing I could set certain component values programmatically, but Retool doesn't offer any native methods to do so (e.g. textinput.setValue() but for something else).

There's a way around this though: temporary state. Instead of hard coding a value for your component, you can just reference a temporary state variable and then dynamically change that variable – which will, of course, flow through to your component. I would call this something in between a best practice and a workaround.

For an illustrative example, let's imagine we have a container component, and I want to dynamically change the container's title based on some trigger. Retool doesn't offer any native methods like .setContainerTitle() yet, but we can use temp state instead. First, create a temporary state variable called containerName and give it some initial value.

Then drag a container onto the canvas. For the "Title" value, reference the containerName state's value.

Since the value of the temporary state variable is programmatically adjustable, by way of the transitive property so is the title of my container. You might create a JS query that sets the value based on some logic:

You could also use an event handler to another query or component (here, I used a button for simplicity):

If you've used this method before, jump into the thread and share your use case!

7 Likes

This is one of my favorite things about Retool! I find that the type of logic to change some of these component values rarely even needs a temporary state and can just be written in the refference itself.

For example - if you want your container's title to dynamically change based on a name in the selected row of a table, you can just write something like this in the container's title input: {{table1.selectedRow.data.name}}'s Sales

I use this in a million ways, but one of my favorites is with styling. Say you wanted to change the color of the container based on a person selected in the row's sales. You can change the styling of a component using the same method but with a ternary:
image
{{table1.selectedRow.data.sales > 100 ? 'green' : 'red'}}

Shared with Zight

7 Likes

@JoeyKarczewski , Yes exactly!

2 Likes