Retool Mobile Fundamentals: Lesson 2

Learn about screens and components and use them to assemble your mobile app's user interface.

Screens separate the interface into multi-page layouts required for mobile apps. Components are interface elements, such as input fields and buttons. You position components into screens to build the interface. Only a few components are used in this example, but you can find information on more components in the Mobile component reference.

1. Update screens

Select screen1 and then in the right panel, change the Title to Users.

Update the title for screen 1

Hover over Screen 2 and select β€’β€’β€’ -> Delete to remove the screen.

You now have two screens:

  • Users: the main screen that displays all users.
  • Details: the screen that displays the selected user's details.

You can navigate through the app with your mouse to see the screens and transitions in action.

2. Display user data

Retool initially includes some demo data when you create a new app. To display data from the resource you created earlier, select the collectionView1 component on the Users screen. In the right panel, change the Data source to getUsers. This updates the component so that it pulls data from your query instead of the demo data.

Changing the data source for the Collection View component

Blocked status is an important value to display, so change the Body to {{ item.blocked ? 'Blocked' : 'Allowed' }}. In Retool, anything between curly brackets is JavaScript. This means you can write custom JavaScript in addition to using prebuilt component functionality. For this List Collection component, a ternary is used to check the user's blocked status and then display the appropriate value in the Select component.

Using a ternary to show blocked status

Each user's name and their blocked status is now displayed, but they could also use an avatar. For the purposes of this tutorial, you can generate placeholder avatars with DiceBear. With collectionView1 still selected, paste https://api.dicebear.com/5.x/thumbs/svg?seed={{item.name}} into the Source field under the Media section.

Adding user avatars

3. Add an action to block and allow all users

You can optionally add Actions to the top of any screen. These can be icons or text, and they provide additional ways for users to interact with your app.

For this example app, you'll use an action sheet with options to allow or block all users at once. Make sure the Users screen is selected, and then in the right panel under the Actions section, click + New next to Right. This adds an action to the top right of the screen.

Adding an action to a screen

Select the Action in the right panel and set:

  • Type to Icon and the Icon to Interface User Lock.
  • Action to Action sheet.
  • Title to Update all users.

Adding an action sheet

4. Add a button to create new users

A floating action button (Fab) is a small, often circular button that floats above content. They're generally used for a primary action. For this mobile app, a Fab component is used to add new users.

To add a Fab component, select the Users screen and click + next to Components in the left sidebar. Click the Fab component in the modal that's displayed to add the button.

Adding a Fab component

Update the component's Text to Add.

5. Add components to edit user data

The app needs to provide a way for you to edit user data like names and email addresses. To do this, you'll add:

  • Text Input components that allow you to edit user data.
  • A Select component to block or allow a user.
  • A Button component to submit changes.

Start by clicking on a user to navigate to the Details screen. Select the image1 component and then in the right panel, paste https://api.dicebear.com/5.x/thumbs/svg?seed={{collectionView1.selectedItem.name}} in the Source field to add the same avatar image.

Setting the Image component's source

Next, remove the keyValue1 component by hovering over it and clicking β€’β€’β€’ -> Delete. Then, click + and add a Text Input component.

Set the Default value to {{ collectionView1.selectedItem.name }} and the Label to Name.

Adding a Text Input component

Add two more Text Input components to display the user's email and company. Make sure to update the Labels and Default values accordingly. You can copy the Default values below.

  • {{ collectionView1.selectedItem.email }}
  • {{ collectionView1.selectedItem.company }}

Next, add a Select component for blocking and allowing users. Make sure to set:

  • Default value to {{ collectionView1.selectedItem.blocked.toString() }} (blocked status is a boolean but Select components expect strings, so toString() is used to convert the value).
  • Values to ['true', 'false'].
  • Labels to ['Blocked', 'Unblocked'].
  • Label to Blocked status.

Configuring the Select component

Finally, add a Button component and change the Text field to Save user details. The Details screen should now look like this.

Details screen

Wrap up

You've now assembled the core UI elements but you'll notice that interactions like button clicks don't do anything. It's time to create some more queries so you can fully interact with your data.

You can test your knowledge below or move on to the next lesson.


What’s Next

Continue to the next lesson to create queries that read and write data.