Quickstart

Build your first Retool app in minutes.

Retool lets you quickly build internal tools with rich GUIs around any sort of database or API. This guide walks you through building a user management application like the one below. You can also create a copy of this app by downloading its JSON file and importing it using the From JSON option.

Demo

Try out the demo to see a Retool app in action (buttons are disabled).

1. Get user data

🚧

Remember to save changes to your queries by clicking Save.

Log in to Retool, then click Create new > App. If you don't have an account yet, sign up for free.

Retool can interact with almost any API or database, and includes native integrations for many different data sources. Once you configure a resource you can start building apps using your data.

Queries allow your apps to read and write data. Retool adds a sample query to your app, query1, for you to get started. Select the query and change the Resource for this query to onboarding_db. This is a sample PostgreSQL database that we provide for you to test with. In the query editor, type select * from users; and then save and run the query.

Query to retrieve user dataQuery to retrieve user data

2. Display data in a table

You assemble apps using components. More than 80 components are available in the Create tab of the right panel of the App editor. To start, drag a Table component onto the canvas.

Table componentTable component

3. Add search to the app

You can add a search box to quickly filter the results of a table, making it easier to find what you're looking for. Drag a Text Input component onto the canvas and change its Label to Search users. Then, update query1 with the code below, then save and run the query again.

select * from users where first_name ILIKE {{'%' + textInput1.value + '%'}};

Search boxSearch box

This uses the same base query but adds some filtering based on the text in the search bar and can support wildcards. When you type something in the search bar, the table updates automatically.

4. Update user data

User management apps commonly have functionality to control user access. For this example, the app will have buttons to activate or deactivate a selected user. Each button is configured with an event handler to trigger a query when clicked.

Add two Button components to the app. For each button, update its Text to Activate user and Deactivate user. You can optionally change their style and colors.

With the buttons added, you can now make them functional. Select the Activate user button and then:

  1. Click + Add next to Event handlers.
  2. Click the Query field and select Create new query.

Adding an event handlerAdding an event handler

This creates a query named button1ClickHandler. Follow these steps to update the query.

  1. Change the Resource to onboarding_api.
  2. Change the Action type to PUT and add this slug to the URL users/{{table1.selectedRow.data.id}}. This directs the API URL path to the selected user in the table.
  3. Add a key-value pair to the JSON body that sets active to true.
  4. Under Event handler in the query editor, click + Add next to Success and set the Query to query1. This updates the table after you activate a user.
  5. Save the query.

Query that activates the selected userQuery that activates the selected user

Repeat these steps for the Deactivate button but set true to false in the key-value pair. You can test these buttons out by selecting a row in the table and clicking the button. After the queries run, the table automatically updates.

5. View order data

The table contains a lot of information but it'd be nice to also display order information. You can configure the app so that as you click on rows in the table, order data for that user is displayed.

Create a new Resource query (named query4 in this example). Make sure the Resource is set to onboarding_db, add the following code to the query editor, and then save and run the query.

SELECT orders.id, orders.user_id, orders.created_at, orders.charge_total, orders.status
FROM orders
INNER JOIN users ON orders.user_id=users.id
where users.id = {{ table1.selectedRow.data.id }}

Order data is contained in a different table within onboarding_db. You can use a SQL JOIN clause to combine data from both tables.

Many components present a list of options, such as the dropdown in a Select component. Retool can automatically generate this options list by mapping data from a query. Add a Listbox component to the app. Select the Mapped option and then select query4 as the Data source.

Update the mapped options Label to Order #{{ item.id }}. This will show a readable order number for the item's label. Next, update the mapped options Caption to {{ moment(item.created_at).format('LL') }}. This will show a formatted date as the item's caption.

Listbox component with mapped optionsListbox component with mapped options

Now when you click a row in the table, the list of orders for that user is automatically displayed.

Wrap up

At this point, you've built an app that uses SQL, API requests, and some JavaScript to manage users. Click Preview in the top-right corner to see what your app looks like in a production setting.

A lot of Retool's value comes in the combination of low and no-code solutions with writing custom queries and JavaScript. Components can do a lot out of the box and they save you from writing frontend code, but you can also write custom logic to fit your needs.


Did this page help you?