Access
Navigate to: http://localhost:3000/auth/signup or [publically_accessible_ip]:3000/auth/signup
To STOP Retool run:
/Users/spiffy/retool/retool-onpremise/stop-local-trial
To RESTART Retool run:
/Users/spiffy/retool/retool-onpremise/local-trial
Retool was installed in ~/retool. It will run in the background until you manually stop it. If Retool stops you can restart it without losing your data.
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.
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
- 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.
- 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.
- 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.
- 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!
- Drag a TextInput component onto the canvas and place it above the Table.
- 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
. Sincetable1
is linked toquery1.data
, when the text changes intextinput1
,query1
will automatically re-run and updatetable1
.
SQL
select * from users where first_name ILIKE {{'%' + textinput1.value + '%'}};
The JavaScript
{{}}
notation retrieves the value oftextinput1
and adds%
to act as a wildcard for the SQL search. Typingm
in the text input finds all the users with the letterm
in their first name.
- 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.
- Create two Button components. Change one button label to
Approve
and the other button label toReject
. You can also customize the color of the buttons. In this example, we've set the colors to green and red.
- 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.
- 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).
- 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!