Retool Mobile Quickstart

🎉

beta

Retool Mobile is currently in public beta. Sign up to get started →

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

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.

The product management app uses two screens:

1. Display a list of products.
2. Edit information about the selected product.

Remove preconfigured screens

Retool initially adds some screens and components to mobile apps with sample data. To remove these:

1. Click ••• next to Screen 2 in the Screens section of the mobile panel, then select Delete.
2. Click ••• next to Details in the Screens section of the mobile panel, then select Delete.
3. Click ••• next to collectionView1 in the Components section of the mobile panel, then select Delete.

Configure new screens

Each screen has a title to identify which screen a user is currently viewing. This is displayed at the top of the app and in the navigation bar.

Select Screen 1 in the mobile panel, then change the screen's Title using the Inspector in the right panel to Products.

Next, click + in the Screens section to add a second screen, then set its title to Edit product. Remove collectionView1 that is automatically added.

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
  id,
  name,
  quantity,
  unit_price_cents,
  image_url,
  updated_at
from
  products

Click Save & Run to save changes and run the query. Click the name of the query and update it to getProducts. Your app can now populate mobile components with getProducts.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 populates 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 getProducts to include the input value when retrieving products:

select
  id,
  name,
  quantity,
  unit_price_cents,
  image_url,
  updated_at
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 update the product name, 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.

Set the action sheet's Title to Update product name? and Description to Change "{{ collectionView1.selectedItem.name }}" to "{{ textInput2.value}}"?. This displays the current name and the updated name entered into the text field.

Click + New to add a menu item that confirms 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. 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.

If you don't have the app installed already, your device is automatically routed to the iOS App Store or Google Play.

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.