Retool (+ how to stop)
quickstart + video

A little Data

Host: localhost
Socket: /Users/spiffy/Library/Application Support/Local/run/MG5aUDXds/mysql/mysqld.sock
Database: local
User: root
Password: root

---

https://docs.retool.com/docs/quickstart?

Quickstart

Get a quick walkthrough of Retool and how it works.

SUGGEST EDITS

5 minute tutorial

Retool comes with an example database and API that you can use to test Retool. This five minute tutorial will walk you through how to use the sample datasources to build an app which can browse, search, and approve users.

 

https://d3399nw8s4ngfo.cloudfront.net/videos/intro-to-retool.mp4

 

 

 

 

 

 

Getting started

1. Create a new account at https://login.retool.com/. If you're prompted to go through the onboarding process, feel free to skip it and create a new blank app instead.
2. The list of components available for use on the canvas is located on the right hand side of the screen. Drag a Text component onto the canvas.

Note

When a component is dropped into the canvas, it is automatically selected. Selecting a component replaces the component list on the right hand side, with an interface to edit the selected component.

To deselect a component, click on an empty area within the canvas or press the Esc key. The list of components will reappear on the right hand side of your screen.

1. Let's customize the text to something more informative. Use markdown in the value input box, to format the text as a Header and change the Text field value to # Users. The text on the canvas will automatically update to reflect the changed value.

Writing queries

You can write queries or create API requests in the query editor located at the bottom of the screen. An example database is provided with some pre-populated demo data. If you have added your own database, you can switch to it using the dropdown at the top left corner of the query editor window.

1. In the code editor, type select * from users;.

To test the query, click the Preview button.

Great job! To start using the data from this query in the rest of our app, you need to save the query. Click Save to save the query.

🚧Remember to save queries!

Remember to always save after editing a query, since Retool does not auto-save queries.

Displaying data

Create a table component and place it below the Users text component. By default, the table will display data from the most recently saved query. Your app should now look like this:

If you forgot to save the query from the previous step, the table will be pre-filled with JSON placeholder data. To display the data from the query in the table, first save the query. Then change the Data property of the table to {{query1.data}}.

Your table will update and show the data from the query named query1. This links the table’s data to query1.data. Now whenever query1.data changes, the table will automatically update to display the new value of query1.data.

Adding search

Let’s make this page interactive, and add a search box to the table!

1. Drag a TextInput component onto the canvas and place it above the Table.

1. In the query editor, change the query to the text below and press Save. This updates your query based on the value entered in textinput1. Since table1 is linked to query1.data, when the text changes in textinput1, query1 will automatically re-run and update table1.

SQL

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

The JavaScript {{}} notation retrieves the value of textinput1 and adds % to act as a wildcard for the SQL search. Typing m in the text input finds all the users with the letter m in their first name.

1. Now you can search through your users by typing in the search box. Try typing m.

Approving and rejecting users

Besides displaying data, Retool enables you to create forms and buttons to trigger actions like updating your database.

1. Create two Button components. Change one button label to Approve and the other button label to Reject. You can also customize the color of the buttons. In this example, we've set the colors to green and red.

1. Let's make these buttons functional! Select the Approve button, then in the dropdown below Run a query select Create a new query. This automatically creates a new empty API query.

1. You can connect APIs to Retool and specify authentication schemes, similar to how you configure database connections. For this tutorial, you’ll use the example API that was provided to you by default. To use the example API, change the Resource dropdown to onboarding_api (restapi).

1. The query editor enables you to construct any kind of API request. Similar to the SQL Editor, you can use {{}} expressions to dynamically generate requests using components from your app.

For the Approve button, let's construct the API request similar to the screenshot below:

• Link the API URL to the table's selected row. This connects the API request to the selected user in the table.
• Add an API payload to approve the selected user.
• Configure Retool to refresh the SQL query query1 if the API call succeeds.

Repeat the API process for the Reject button.

Testing the tool

Test the tool by clicking on the buttons, and watch the data in the table refresh. Once you're satisfied with how it works, click the blue Play button at the top right corner of the screen to use the app in a production setting.

That's it! You've built a quick dashboard that enables you approve and reject users using both SQL and API requests.

You can also control who can use the app through access controls and track how people use your app with audit logs. You can find these features by returning to the home page and exploring Retool!