Skip to main content

Retool app tutorial: Pass data between pages

Learn how to use a variable to automatically sync the selected customer between pages.

This guide is part of a multi-page tutorial. If you're starting here, consider reviewing the previous steps and following the Retool apps tutorial in sequence.

Both the customer and subscription pages enable you to select a customer and either edit their details or look up a subscription. Since pages function independently, the customer you select in one is not reflected in the other.

When you build apps, you'll likely want to use values from one page in another. You can use a globally scoped variable to temporarily store values and make them available across all pages. In this case, the variable stores the selected customer ID. You then update both pages to reference this value so that both pages always use the same selected customer.

1. Create a variable​

A variable temporarily stores data for the current app session and resets whenever the user returns. Add a globally scoped variable to the app.

  1. Navigate to the tab.
  2. Click within the Global pane and select Variable.

Variables can be set or updated at any time using event handlers or JavaScript methods. You can also specify an initial value, if required.

2. Configure the Select component​

You can set a default value for most input components, such as Select. You can reference the variable's value, variable1.value, so that the Select component uses the saved customer ID.

The Select component supports event handlers that run whenever its value changes. You can configure the event handler to update the variable with the selected customer ID.

  1. Click on the Select component and set Default value to {{ variable1.value }}.
  2. Add an event handler and select the Change event.
  3. Select the Set variable action and then set State to variable1.
  4. Select the Set value method and set the value to {{ self.value }}.

3. Configure the customers table​

You can configure a Table component with a Default key to automatically select a specific row. This key corresponds to the table's Primary key. As with the Select component, you can also configure an event handler to update the variable when changing the selected customer.

  1. Switch to the Customers page.
  2. Click on the Table component and set its Default row to Key.
  3. Set the default key to {{ variable1.value }}.
  4. Add an event handler and select the Select row event.
  5. Select the Set variable action and then set State to variable1.
  6. Select the Set value method and set the value to {{ currentRow.id }}.

You can use currentRow as shorthand when referencing table data.

After configuring both components, the currently selected customer is stored in the variable. You can select a customer in one page and the change is automatically reflected in the other.

Next steps​

You've now extended the functionality of your app. Move on and learn how to make use of other features in Retool apps.