Documentation

Welcome to Retool! We're a fast way to build custom internal software.

You'll find the 5 minute demo, quickstart guide, and documentation for each of our connectors and components here. If you've got any questions -- chat with us on the bottom right!

Get Started    Guides

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 right hand sidebar from the top right corner.

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!

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.

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.

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 `[]`.

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.

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.

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.