Skip to main content

Mobile app tutorial: Assemble the UI

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 the peopleListScreen and in the right panel, change the Title to Users. Then, right-click the myProfileScreen and delete it.

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

2. Display user data​

To display data from the resource you created earlier, select the collectionView1 component. In the right panel, make sure the Data source is set to getUsers. This updates the component so that it pulls data from your query instead of the demo data. Change the Body to {{ item.blocked ? 'Blocked' : 'Allowed' }} as well, to display the user's blocked status.

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.

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.

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 peopleListScreen is selected, and then in the right panel under the Actions section, click + New next to Right. 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.

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 peopleListScreen and click + next to Components in the left sidebar. Click the Fab component in the modal that's displayed to add the button.

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

Next, remove the keyValue1 component and add a Text Input component. Set the Default value to {{ collectionView1.selectedItem.name }} and the Label to Name.

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.

Finally, add a Button component and change the Text field to Save user details.

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.

Demo