Build multipage mobile apps
Build peformant multipage mobile apps.
Standard Retool Mobile apps operate as single-page applications where all code and components is continually evaluated. You typically build separate mobile apps for different use cases, such as an inventory management app or refund tool. Mobile apps use screens to group components together into multiple views.
With multipage mobile apps, you can create a mobile app where each screen is a separate page with its own code and components. Retool only evaluates the code and components of the screen currently in view, making them much more performant for complex needs.
Get started
Navigate to the tab in your organization and click Create > Multipage mobile app.
Create a new multipage mobile app.
Multipage mobile app model
Multiplayer mobile apps work in much the same way as a standard mobile app. Rather than a operate as a single-page application, each screen is a separate page with code and components. Retool only evaluates a page when the screen is currently in view. This allows for highly complex mobile apps to serve multiple functions without impacting performance.
Multipage mobile apps are particularly useful for consolidating apps by use case. For example, a support team may use a collection of different different mobile apps within an organization. You can consolidate the functionality they provide into a multipage mobile app without affecting performance, providing support team members with a single tool to use.
In addition, multipage mobile apps help reduce the overall number of mobile apps within an organization. This can help with how you organize mobile apps or grant permissions.
Global and page scopes
Multipage mobile apps use global and per-page scopes for code and components. Globally-scoped code and components can be referenced anywhere in the multipage mobile app. Page-scoped code and components can only be referenced within the same screen.
Globally scoped code and components
You can create Global code (e.g., resource queries or variables) for which all screens can reference. Each screen can interact with globally-scoped code to trigger queries, set variable values, etc.
The Tab bar is also globally scoped and persist across all screens.
Page-scoped code and components
All code and components within a screen are page-scoped. Unlike standard mobile apps, screens cannot directly reference each other's values. If a page contains code or event handlers that would run on page load, these run whenever you switch to the page.
Globally scoped and page-scoped code and components.
Manage screens
The Screens tab contains a list of screens within the multipage mobile app. You explore and manage all screens within the multipage app from the Screens tab, the same way as standard mobile apps.
Pass data between screens
Multipage mobile app screens cannot directly interact with each other. You can use globally scoped variables or localStorage to pass data between pages.
- Global variables
- localStorage
Variables temporarily store data for the duration of the user's app session. They can also include an optional initial value.
To create a global variable, navigate to the Code tab and click + > Variable. As the variable is globally scoped, you can update its value from any page using event handlers, or with the setIn() and setValue() JavaScript methods.
For example, you can use the List Collection component's Click event handler to store the selected item in a global variable. You can then reference the global variable in another screen.
Store page data in a global variable.
You can then reference the global variable anywhere else within the multipage mobile app.
Reference a global variable for use in another screen.
Once the user leaves the mobile app, the variable reverts to its initial value.
localStorage does not encrypt data. Only use localStorage to store nonsensitive information.
localStorage temporarily stores data in the device's localStorage. Unlike variables, localStorage is a persistent data store. Provided the user continues to use the same browser and has not cleared their browsing history or cache, data remains available.
Use event handlers or the setValue() JavaScript method to store data in localStorage. You can also clear app-specific data using clear().
Known issues
- Switching pages from the IDE toolbar does not function correctly.
- Styles and themes only apply to the default page.
- Debug Tools does not display an accurate performance score.
View the dependency graph
Hover the cursor over the connecting points to display a tooltip with a list of dependencies and dependents.
The Component tree and Code panels contain the Graph pane. This visualizes the dependency graph for a selected component or query. You can use the graph to view the relationship between the selected component or query and its immediate dependents.
Hover the cursor over the connecting points to display a tooltip with a list of dependencies and dependents.