Create multi-page apps

Every Retool app is on a unique webpage. You can configure this into multiple "pages" with components like tabbed containers, wizards, or modals, but there will be times where splitting functionality between separate apps improves performance.

When you are linking apps together, you have App A open and pass data to App B using URL parameters. To share larger amounts of data across apps, you can use localStorage.

Create a component that opens and passes data to another app

This section describes how to create a component that opens another app when clicked, and passes data to that other app. In steps 1 to 4 a Button component is used, but Table and Text components also work.

1. Create 2 apps

Throughout this tutorial the 2 apps will be referred to as App A and App B.

  1. Log in to your Retool dashboard.
  2. Click Create.
  3. Enter a name for your new app and then click Create!.
  4. Repeat the steps above to create a second app.

2. Add a button to App A

The Button component that you add to App A will eventually serve as the connection to App B. When users click this button, it'll open App B and pass data.

  1. Click the background of the Canvas to show the Component List on the right.

The Canvas

  1. From the Component List drag a Button component onto your canvas.

The Component List

3. Link the button in App A to App B

Configuring the button to open App B and pass data is all done from the Component Editor.

  1. Click the button that you just added to your canvas to select it. The Component Editor appears on the right.

The Component Editor

  1. Set Action > On-Click to Open another Retool page.
  2. Select the app that you want to open from the Retool Page to Open dropdown list.
  3. Under URL Parameters to add provide the data that you want to pass to App B. The key and value fields support Retool's JavaScript Syntax ({{}}).

For example, suppose that you've got a Text Input component on App A, and you want to pass the value of this component to App B. You could set the key field to something descriptive, like name, and then set the value field to {{textinput1.value}}.

Parameters example

Suppose now that a user has set the Text Input value to Elvis.

When the user clicks the Open App B button, App B gets opened with a URL like this: https://example.tryretool.com/apps/B?name=Elvis

4. Use the data from App A in App B

To access the data from App A in App B, use the urlparams variable. Continuing with the example from the last section, setting the value of a Text component to Hello, {{urlparams.name ? urlparams.name : 'World'}}! displays Hello, Elvis! if the name parameter is present in the URL (and is set to Elvis, i.e. name=Elvis). Otherwise it displays the fallback text Hello, World!.

Using urlparams to conditionally change the value of a Text component

Linking and passing data with Table components

Table components also support the Action > On-Click > Open Another Retool Page workflow described in Step 3 above. When a table cell is clicked, the {{ currentRow }} object gives you access to the data in the row that was clicked.

To access the data, use the urlparams object as described in Step 4.

Linking and passing data with Text components

An alternative to the Action > On-Click > Open Another Retool Page workflow described in Step 3 above is to turn a Text component into a link, and then use JavaScript to construct the URL to App B yourself.

<a href="https://example.tryretool.com/apps/B?name={{ textinput1.value }}">
  Open App B
</a>

Setting the value of a Text component so that it creates a link that opens another Retool app and passes data

To access the data, use the urlparams object as described in Step 4.

Share larger amounts of data in localStorage

Retool supports localStorage, a web platform API that is supported in all major browsers. If you need to store a lot of data, but that data can be structured as key-value pairs (KVPs), localStorage might be good enough for your needs.

To write a KVP, use localStorage.setValue(key, value) inside of a Run JS Code query. To read a KVP, access it via {{ localStorage.values.example }}, where example is the name of your key. See Local Storage for the canonical Retool API reference.

🚧

KVPs are stored as strings

Use parseInt() or parseFloat() to convert.

All web pages under the same origin share a single localStorage. For example, suppose you have 2 Retool apps, A is located at https://example.tryretool.com/apps/A and B is located at https://example.tryretool.com/apps/B. App A writes to localStorage using {{ localStorage.setValue('date', '20190303') }}. App B is able to read that same KVP using {{ localStorage.values.date }}.

🚧

Watch out for naming conflicts

If you use localStorage to pass data across many apps, make sure that you're not using the same key for different purposes. One solution could be to prefix each key with the app that it is used in. For example, if you set a key called date from an app located at https://example.tryretool.com/apps/B, you might name the key B-date rather than date.

Updated 3 months ago


Create multi-page apps


Suggested Edits are limited on API Reference Pages

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