Skip to main content

Web app tutorial: Assemble the UI

Learn how to use components to assemble your app's user interface.

Components are prebuilt UI elements that your users interact with (e.g., buttons, tables, forms). Only a few components are used in this example, but you can find information on more components in the Component Library.

The app you're going to build will allow you to edit user data. To enable this functionality, you'll add text, table, and button components to the Main frame of the Canvas. You can read more about frames and the Canvas in the App IDE documentation, but for now, just know that the Main frame is the core section of your app.

1. Display the app's name with a Text component​

Click + on the left to select and drag a Text component to the Main frame. The right panel updates automatically to show the component's properties. Components have numerous properties that you can set, and they're accessible from other components and queries. For this Text component, update its Value to ## {{ retoolContext.appName }}.

In Retool, anything between curly brackets is JavaScript. This means you can write custom JavaScript in addition to using prebuilt component functionality.

For this text component, dot notation is used to access the retoolContext object and the app's name. The retoolContext object is unique to each app, and stores information like the app name and UUID.

note

Retool supports Markdown, which you can read more about on the Retool Markdown and HTML reference page.

2. Display user data with a Table component​

Drag a Table component onto the Main frame. The table should automatically be populated with the data returned in getUsers. Verify this by making sure the Data source field for the table is set to getUsers.

There are a few more settings to enable to allow users to edit data in the table. First, make the Name column editable. Then, select the Email column and set the Format to string. You can then go back and make the Email column editable as well.

3. Add user management options with a Split Button component​

The final component to add is a Split Button component. This button will allow you to:

  • Block individual users
  • Unblock individual users
  • Block all users
  • Unblock all users

Drag a Split Button component to the Main frame, and update the label for each action. Split Button components come with three actions by default, but you can add the fourth by clicking +.

When you're done editing the actions, the list should look like this.

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 start editing and saving data.

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