Retool Mobile Quickstart

🎉

beta

Retool Mobile is currently in private beta. Sign up to join the waitlist →

Retool Mobile enables you to quickly build mobile apps using a drag-and-drop interface and mobile component library. You can connect your mobile apps to almost any database and API to Retool, allowing your workforce to interact with your data using native apps for iOS and Android.

This guide explains how to build a product management mobile app on Retool. You can browse through a list of products, presented in a card layout, and select one to update its details.

Demo

Watch the video below to see this mobile app in action.

1. Create a new mobile app

To get started, sign in to your Retool organization and click Create new > Mobile app.

When editing a Retool Mobile app, the App editor renders your mobile app on the canvas and includes an additional mobile panel on the left. This panel contains the Screens and Components sections, which you use to manage your app's overall layout.

The mobile panel is always present when editing apps and cannot be hidden. You can toggle the visibility of other panels in the App editor.

2. 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.

Retool adds two screens to mobile apps by default, along with a Custom Collection mobile component on the first screen. Select collectionView1 in the Components section of the mobile panel and press Del or Backspace to remove it.

Each screen has a title that appears at the top of the app and labels which screen a user is currently viewing. Select Screen 1 in the mobile panel, then change the screen's Title using the Inspector in the right panel to Products. Repeat these steps for Screen 2 and change its Title to Edit product.

Mobile apps initially display a tab bar at the bottom with a tab for each screen. The tab bar is only visible if multiple screens are included. This product management app won't need a tab bar. To hide it, select the Edit products screen and toggle Add to tab bar to off.

2. 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. This mobile app interacts with sample data from the onboarding_db PostgreSQL database resource that's included with your Retool organization. You can use this data to test Retool without connecting any production data.

Retool automatically creates a blank query, query1, for you to get started. Select the query and change the Resource for this query to onboarding_db. In the query editor, write a query to retrieve product data from the products table.

select * from products;

Click Save & Run to save changes and run the query. Your app can now populate mobile components with query1.data.

3. 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.

Select the Products screen and click the + button to open the mobile component browser, then select Card Collection.

Retool automatically maps your query's data to present as cards, and prefills values based on common usage (e.g., using item.name for the card's title). You can change these values as needed in the Mapped options section of the Inspector. Set the value for Body to Quantity: {{ item.quantity }} to include quantity information.

You can also adjust the style and layout of cards using the Data Layout section of the Inspector. For instance, set Size to Half to display more cards at once.

4. 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.

Retool Mobile organizes mobile components vertically in a column layout by default, with additions displayed at the bottom of the Component section. You can reorder mobile components in the mobile panel using drag-and-drop, which allows you to position the Text Input at the top of the screen.

You can reference values and write JavaScript almost anywhere in your Retool apps. Update query1 to include the input value when retrieving products:

select * from products where name ilike '%{{textInput1.value}}%';

5. 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.

First, configure the app to show Edit products on product selection. Retool uses event handlers to trigger queries or other actions in response to user events, such as selecting a product. Select collectionView1 within Screen 1 and add an event handler in the Interaction settings of the Inspector.

When you select a product in the collection, the app navigates to Edit products, which is currently empty.

Next, add a Text Input mobile component to Edit products and update the following settings using the Inspector.

The selectedItem property contains data about the currently selected product in collectionView1. Now when you select a product from the list, the text field displays the name of the selected product.

6. 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.

Queries can trigger event handlers on success or failure. Add a Success event handler to refresh the product list to reflect the changes:

Add a second Success event handler to take the user back to Products screen.

7. Confirm changes

To save changes, add a Button mobile component to the Edit Products screen and update its Text setting to Save.

Rather than update the name immediately when a user presses the button, your app can display an action sheet to present a set of options that trigger actions, such as triggering the query to update the product name. Add an event handler to the button and set the Action to Action sheet.

Add an action to the action sheet to confirm changes.

Add another action to revert the changes entered into the text field.

Test your mobile app

Now that your app is complete, it's time to test it on your mobile device. First, install the Retool Mobile app for iOS or Android. You use this app to browse and launch any of the mobile apps you build.

To open the app you just built, click Preview to display a QR code and scan it with your mobile device. Your app will automatically open in the Retool Mobile app.

Wrap up

You've now successfully built a mobile app that retrieves product data and presents it in a card layout, and enables you to select a product and update its name.