What we cover: - What is Retool Mobile and why did we build it? - Demo: Build a production-grade native app and ship it to the iOS and Android stores in less than 15 min - Common use cases for Retool Mobile and how you can get started today
A common use case for Retool Mobile is inventory management, enabling workers to look up product information in any warehouse, wherever they are. This tutorial explains how to build an inventory management mobile app for users to: Browse, filter, and view details of products across all warehouses; browse and view details of warehouses, and look up available products at the location and quickly look up product information by scanning a barcode.
A common use case for Retool Mobile is to manage site inspections for different properties. For example, property management workers for apartment buildings can complete inspections about the state of each apartment in different buildings, log maintenance work, take pictures, and look up previous inspections. This tutorial explains how to build a site inspection mobile app for users to: Browse, filter, and view building and unit information; view inspection history for all buildings and units and create new inspections, enter required information, and save the results to a database.
A common use case for Retool Mobile is sales account management, enabling sales representatives in the field to manage accounts and opportunities wherever they are. This tutorial explains how to build a field sales mobile app for users to: browse, filter, and edit opportunities.
Beginner
Create a new mobile app
To get started, sign in to your Retool organization and click Create new > Mobile app. Every new mobile app is initially configured with a demo that uses a preconfigured interface and sample data for you to try out. For the purposes of this guide, the demo content will be removed.
Beginner
Prepare screens
You create multi-page mobile apps by organizing mobile components into separate screens. You can navigate between each screen using the tab bar or by interactions that trigger event handlers, such as pressing a button or selecting an item from a list.
Beginner
Get product data
Retool can interact with almost any API or database, and includes native integrations for many different data sources. Once you configure a resource, you can write queries for your app to read and write data.
Beginner
Display products for selection
The Card Collection mobile component presents data using a prebuilt card layout. You can use Card Collection to display product data without needing to build any type of layout.
Beginner
Add a product search field
You can add a search box to quickly filter the list of products, making it easier to find what you're looking for. Add a Text Input mobile component to the Products screen, then change its Label to Search.
Beginner
Select a product
This mobile app enables users to edit a product's name. When a user selects a product, the app opens the Edit products screen as a modal so the user can update the product's information.
Beginner
Edit the selected product
Updating a product's name requires a second query to write those changes back to the database. Click + New in the bottom panel to create a new query, then select GUI mode to construct a query that can write data.
Beginner
Confirm changes
To update the product name, add a Button mobile component to the Edit Products screen and update its Text setting to Save.
Beginner
Test your mobile app
Now that your app is complete, it's time to test it on your mobile device. Click Preview to open the mobile app as a progressive web app (PWA). Scan the QR code with your iOS or Android device to launch it in the Retool Mobile app. You use this app to browse and launch any of the mobile apps you build.
Beginner
Allow Retool's IP addresses
If your database uses an inbound firewall, follow instructions to add Retool's IP addresses to your database's allowlist so Retool can connect to your database.
Intermediate
Create a database resource
Resources represent connections to data sources and are what you query within your Retool apps. Log in to Retool and navigate to the Resources tab. Click Create new > Create a new resource and select the database you want to connect to. This opens the Connect a resource page where you add your connection information.
Intermediate
Query your database
In the App editor, update query1 to retrieve some information from a table in your database.
Intermediate
Create an API resource
Resources represent connections to data sources and are what you query within your Retool apps. Log in to Retool and navigate to the Resources tab. Click Create new > Create a new resource and select REST API. This opens the Connect a resource page where you add your connection information.
Intermediate
Query your API
When the App editor opens, query1 is created automatically with the resource you added. You can see this in the Resource dropdown in the query editor. To query your API, click Save & Run. If needed, you can update query1 with additional URL parameters, headers, etc.
Beginner
Manage mobile components
When editing a Retool Mobile app, the App editor includes an additional mobile panel on the left. Use the Components section of the mobile panel to select, add, or delete mobile components from your mobile app.
Intermediate
Arrange mobile components
Retool Mobile organizes mobile components in a vertical (column) layout. Additional mobile components first appear at the bottom of the Component section. You can drag mobile components to change the order in which they appear.
Beginner
Configure mobile components
You configure mobile components in the same way as Retool's web components. You can write JavaScript almost anywhere, edit option lists, and more.
Beginner
Trigger actions with event handlers
Retool uses event handlers to trigger queries or other actions in response to user events, such as pressing a button, navigating to another screen, or running a query. Use the Interaction settings in the Inspector to configure event handlers for the selected mobile component.
Beginner
Retool Mobile on the web
You can launch Retool Mobile apps as progressive web apps (PWA). This enables the use of Retool Mobile apps on a wide range of devices that cannot run them natively using Retool Mobile for iOS and Android (e.g., Amazon Fire tablets).
Beginner
Share apps and invite users
You can invite new users or send a link to existing users via email. Click the Share button in the upper-right of the App editor to display sharing options. You can enter individual email addresses or click Add many at once to use a comma-separated list. You can also copy the link to an app to use elsewhere.
Beginner
Passwordless login
Retool Mobile includes a passwordless login flow for existing users. Any existing user who opens a mobile app link is automatically logged into the Retool Mobile app. This enables you to distribute apps to your workforce without existing users needing to log in first, resulting in fewer steps.
Beginner
Customize the layout with containers
Retool Mobile apps arrange mobile components in column (vertical) and row (horizontal) layouts. Container components include additional layout settings to control the layout of nested components.
Beginner
Use collections to present data
You can present data using Card Collection and List Collection components that dynamically map data and display it using prebuilt layouts. These components use Mapped options settings in the Inspector to configure item properties and how they appear.
Beginner
Additional UI elements
Retool Mobile event handlers include actions to display supplemental UI elements with additional actions or information.
Beginner
Apply custom theme styles
You can create and manage custom styling for your mobile apps with themes. To customize your app's theme, click the ••• App actions menu and select App theme.
View all updates here.