Temporary state

Temporary storage for your app.

Temporary states are like scratch-pads for your app. You can store data in them while your app is running. They are accessible anywhere on your app inside {{ }}, and they support reads ({{ temporaryState1.value }}), as well as writes ({{ temporaryState.setValue(3) }}).

To access them, open the left hand sidebar with the left panel icon, top center.

JavaScript Methods

These methods can be used inside of a Run JS Code type query:

state.setValue(value: any)

Sets the value of state.value to whatever is passed in as an argument

state.setIn(path, value: any)

Sets the value of state.value at a specified location. The path variable accepts an array of keys/indexes to select. I.E. state.setIn( [ 0, "trout" ], {length_inches: 16 } ). The value will be set without destroying and recreating the other values of the state.

🚧

Temporary states are cleared on app refresh

If you refresh your app (with a ⌘R), your temporary states will be lost. If you're looking to persist state between app refreshes, you should write back results to a database or save it to localStorage!

The easiest way to understand temporary state is to go through a tutorial. Let's build an app which tracks which users were selected.

1. Setup

We'll start off with three components: a Table to display all our users, a Button to select particular users, and another Table to display the users we've chosen.

We'll also have two queries: one to pull in all of our users from our database, as well as another one to save the selected user into our temporary state.

The basic components in our app.

2. Creating a state variable

Let's hook our "Add selected user" button up so it actually does something. Let's start by creating the temporary state. To do so, open up the left panel (button on the top right), scroll down to the "Temporary State" section, and hit "Create a variable to store state".

Creating a variable to store temporary state.

3. Configuring the state

Great! State created! Instead of initializing it as null, let's start it off as [] by setting it on the right hand side:

Setting the initial value to be [].

Now let's render this state in our second table:

Making the second table pull in data from the temporary state.

4. Connecting the Button

To make the button store data in the temporary state, let's select it, and create a new query for it to run. And in the new query, change the resource to "Run JS Code":

The "Run JS Code" query lets you write JS to manipulate Retool components and queries. In this case, we'll write some code to concat whatever we selected in the first table to the state variable:

state1.setValue(state1.value.concat([table1.selectedRow.data]))

Let's copy that in and press "Save":

Making our query concat the selected row onto our temporary state.

Great! Now test out the button by selecting different rows and adding them to your second table.

Updated about a month ago


Temporary state


Temporary storage for your app.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.