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 Header 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 Header frameAdding a text component to the Header frame

2. Display user data with a Table component

From the right panel, drag a Table component onto the Main frame. Assuming you completed the previous lesson, the table is automatically populated with the data returned in getUsers. If you look in the right panel, you can see 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 editableMaking 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 users
  • Unblock users
  • Download user data as a JSON file

Drag a Split Button component to the Main frame, and update the label for each option.

Adding a Split Button component and editing labelsAdding 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 lession to create queries that read and write data.