Skip to main content

Retool apps tutorial: Assemble the user interface

Learn how to assemble the user interface of a Retool app.

Retool apps group code, components, and frames into pages. Apps can contain a single page or you can build more complex apps using multiple pages.

Part one of this tutorial uses a single page to display and edit customer data. In part two, you will add another page to view customer subscription data.

Edit the default page​

All apps initially start with a single page, defaultPage. Update the details for this page to use it for customers.

  1. Click in the left panel to open the Pages tab.
  2. Right-click page1 in the Pages pane and select Rename.
  3. Rename the page to customersPage. The page name is the unique identifier for this object within a Retool app.
  4. In the Inspector on the right-side of the IDE, update the Page title to Customers. The title is what Retool displays in the browser and in navigation components.
  5. Change the Page URL to customers. The URL is the path at which the page resides.

Add a table and form to the page​

Components are interface elements with which users interact, such as input fields and buttons. You assemble the app's user interface by placing components anywhere on the canvas of a selected page, and can adjust their position and size.

Add the table​

The Table component enables you to display and interact with data using a feature-rich table.

  1. Click in the left panel to open the Add UI tab.
  2. Click-and-drag the Table component to the canvas area.

The Table component's Data source initially contains demo data. In the next part of this tutorial, you will write a query to retrieve customer data and display it in the table.

Add the form​

This app uses a Form component to edit customer details. When configured, the form's input fields will display details of the customer selected in the table. A form can generate the necessary input fields from a table so you don't have to build it from scratch. You will configure this later on.

Repeat the steps above to add a Form component then place it next to the table.

Next steps​

You've now assembled the user interface for your Retool app. Move on to the next section and learn how to connect and query data.