Web app quickstart

Learn how to build your first Retool web app in minutes.

Retool lets you quickly build internal tools with rich GUIs around any sort of database or API. This guide explains how to build 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.

1. Create a resource

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

This guide uses Retool Database as the resource. Retool Database is a fast, secure solution for saving and editing data to use in Retool apps. It combines a PostgreSQL database with a spreadsheet-like interface to manage your data.

To add test data to Retool Database, download this CSV and then follow the steps below.

1. Log in to Retool. If you don't have an account, sign up for free.
2. Click the Resources tab, then select Retool Database.
3. Click Import CSV > Into a new table.
4. Select the CSV you downloaded.
5. Name the table users_sample_data, and set the id Field type to int4 and the enabled Field type to bool.
6. Click Create table.

2. Create an app

Click the Retool logo in the top left to go back to the Apps tab. Click Create new > App to create an app. Name the app and then click Create app.

3. Display data in a table

Queries allow your apps to read and write data.Click Code in the left sidebar and update query1 so that it uses the resource you created previously. If you don't see query1, click + to create a query. Then paste select * from users_sample_data; in the editor and click Save & Run.

Now that you have access to your data, you can assemble the app using components. More than 80 components are available in the App editor. To start, click Add in the top left and drag a Table component onto the canvas.

You can see in the right panel that Retool set the Data source to query1 so that your data is displayed automatically.

4. 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. Make sure to save and run the query again.

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

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.

5. Update user data

User management apps commonly have functionality to control user access. For this example, the app has buttons to enable or disable 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 create an event handler and a query to activate the user.

Make sure the new query as the following settings.

Setting	Value
Table	users_sample_data
Action type	Update an existing record
Filter by	id = {{ table1.selectedRow.id }}
Changeset	enabled = true

Repeat these steps for the Disable button but set enabled to false in the query. You can test the buttons by selecting a row in the table and clicking the button.

As an optional design improvement, set the Disabled property of the Enable user button to {{table1.selectedRow.enabled}} to disable the button when the selected user is already enabled. For the Disable user button, use {{!table1.selectedRow.enabled}}.

6. Automatically refresh table data

Currently, when you enable or a disable a user the table doesn't update. You can add event handlers to queries to perform actions when the queries succeed or fail.

Select the button1ClickHandler query, then scroll down to Success in the query editor. Click + to add a success event handler and then set the Query to query1. Make sure to save the query.

Create the same event handler for the button2ClickHandler query and then try enabling and disabling users. After each click, the table automatically updates to reflect the new status.

Wrap up

At this point, you've built an app that uses SQL, components, and some JavaScript to manage users. You can preview the app in a production setting by clicking the toggle in the top-right corner next to the Share button.

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.