Retool Fundamentals: Lesson 2

Learn about components and then 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 editor 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

From the right panel, 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.

Edit the Text component's value by selecting the Value field and entering ## {{ 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.

Adding a text component to the Main frame

πŸ“˜

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

2. Display user data with a Table component

From the right panel, 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 field for the table is set to {{ getUsers.data }}.

There are a few more settings to enable to allow users to edit data in the table. With the table selected, toggle the Editable boxes on for the name and email columns.

Making name and email columns editable

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

Adding a Split Button component and editing labels

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.


What’s Next

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