Skip to main content

Retool apps tutorial: Configure multiple pages

Learn how to add multiple pages to your app's interface.

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.

The second part of this tutorial makes use of multiple pages to interact with both customer and subscription data. Once complete, the app will also display subscription data for a selected customer.

1. Add a subscriptions page​

Retool apps group code, components, and frames into pages. Apps can contain a single page or you can build more complex apps using multiple pages.

The app currently has a single page to display and edit customer data. You can add another page to view a specific customer's subscription data.

Click and select Page to create a new page with the following details:

  • Name: subscriptionsPage
  • Page title: Subscriptions
  • Page URL: subscriptions

2. Add a header with navigation controls​

Now that the app contains multiple pages, users need a way to navigate between them.

Frames are distinct areas of the canvas in which you add components. The Header frame is a globally scoped frame that, when enabled, is visible across all pages.

The Header frame contains a Navigation component by default. This component is preconfigured with navigation controls for pages and displays options for both Customers and Subscriptions.

3. Convert the customer query to global scope​

Apps use global and per-page scopes for components, frames, and code.

  • Globally scoped objects can be referenced in all pages. Retool continually evaluates globally scoped objects regardless of the page currently in view.
  • Page-scoped objects can only be referenced within the same page. Retool only evaluates page-scoped objects when the page is currently being viewed.

At present, getCustomers is a page-scoped query in the customers page and isn't accessible from the subscriptions page. Before you can use this query, you must convert it to a globally scoped query so that it's available to all pages.

You can quickly access many parts of the IDE using the Command Palette in the toolbar.

  1. Click on the Command Palette or press K to open.
  2. Enter query1 to look up the query.
  3. Select Open in editor to jump directly to it.

Click-and-drag the query from the customersPage pane to the Global pane.

4. Add a select field and table the page​

The Select component is a dropdown input field that can dynamically map data to generate a list of options from which to select. This component is used to select a customer for whom to view subscriptions.

  1. Right-click on the canvas area to open the contextual menu.
  2. Select Add components. This method enables you to quickly add multiple components.
  3. Click the Select component to add it to the canvas.
  4. While the contextual menu is open, click the Table component.

Next steps​

You've now configured your app to use multiple pages. Move on to the next section and learn how map data to components and use table filters.