Retool

Documentation

Welcome to Retool! We're a fast way to build custom internal software.

You'll find the 5 minute demo, quickstart guide, and documentation for each of our connectors and components here. If you've got any questions -- chat with us on the bottom right!

Get Started    Guides

Overview

We’ll learn the basic concepts of Retool and build a customer search tool for a sample database. This'll take around 5 minutes.

Welcome to Retool! We let you build custom internal software very quickly.

Retool makes building internal software faster by pre-building common components, and managing the dataflow for you. So we give you a library of components, which you compose to make what you want. These components can connect directly to queries you write.

Components and queries are the two basic building blocks in Retool. All tools in Retool are built with combinations of them.

5 minute tutorial

When you start using Retool, we give you your own onboarding database and API. We'll walk you how to build a tool to browse users, search them, approve them, all in 3 minutes.

Here's a short three minute video demo:

1. Create a new app

Start off at https://login.tryretool.com/, and make an account. If you're being forced to go through onboarding, feel free to skip it and instead create a new blank page instead.

The list of components we can use on the canvas are on the right hand side. Try dragging a Text component from the right, and then using markdown to format it as a Header

Dragging on a `Text` component and editing it.

Dragging on a Text component and editing it.

When you drop the component onto the canvas, it's is automatically selected.

Tip: Getting back to the component list

To deselect a component, just click anywhere else on the canvas. That opens up the list of components.

Let's change the text to something more informative. Change the text field from # Title to # Users. The text on the canvas will update to reflect the changed value.

Tip: Markdown in Text components

By default the text is parsed as Markdown: http://commonmark.org/

2. Write a query

The query editor is already at the bottom of the screen. We’ve provided a default database with some demo data already for you. If you’ve added your own database, you can switch to it with the dropdown on the top left corner.

In the code editor, type

select * from users;

To check if the query works, let's run it!

Writing a SQL query and previewing it.

Writing a SQL query and previewing it.

Looks good! Press “Save” and now let’s minimize the query editor.

Remember to save queries!

Make sure to always save after editing a query, since we don’t auto-save queries.

3. Display the data

Drag on a table component just below the header component from before. By default, the table’s data field is populated by the data from the query you just saved - so your page should look like this now: .

Dragging on a table, and changing the datasource to be `<span ng-non-bindable>{{query1.data}}</span>`

Dragging on a table, and changing the datasource to be {{query1.data}}

In case you forgot to save the query from the last step, the table will be filled with JSON placeholder data. You'll want to then change the Data property of the Table to be as follows:

And then your table should now update to contain the data from the query we named query1:

Now, whenever the value of query1 changes, this table will automatically change. Sort of like Excel!

By default, the table comes with client-side pagination, and sorting by columns. Give it a spin!

4. Search your users

Let’s make this page interactive! Let’s add a search box to the table. Start off by dragging a TextInput component onto the canvas.

Dragging on a `TextInput`

Dragging on a TextInput

In our query editor, let’s change our query to this:

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

Press “Save” and now you’ll be able to search through your customers by typing in the search box. Try typing “b”. The % signs give you fuzzy matching, so typing in "b" finds all the users with the letter "b" in their first name.

Changing the value of `query1` to pull in the value of `textinput1`, and using Javascript to add `%`s to do fuzzy matching in SQL.

Changing the value of query1 to pull in the value of textinput1, and using Javascript to add %s to do fuzzy matching in SQL.

5. Approving and Rejecting Users

Besides displaying data, Retool also let's you also create forms and buttons that change things in your database.

Let’s drag two "Button” components onto the canvas, and then change label one of them "Reject" and the other "Approve." You can also customize the color of the buttons too - so we've gone ahead and given them a nice green and red color.

Dragging on a `Text` and rendering the first name of the table's selected row.

Dragging on a Text and rendering the first name of the table's selected row.

Let's make these buttons actually approve and reject our users now! Let's choose the "Approve" button, and then in the dropdown right below "On-Click: Run a query" - let's choose "Make a new query."

By default this will create a new query that is a normal API query. Fortunately we've already built out an API that you can use to approve and reject your users. Just like how you can configure database connections, you can also connect APIs to Retool and specify authentication schemes. To get access to this - let's switch from "RESTQuery" to "onboarding_api" in the Resource dropdown.

This interface allows you to construct arbitrary HTTP requests - and just like the SQL Editor, you can use values from the main page to dynamically generate your requests.

Just like how the textinput had a .value property - tables also have a similar property called "selectedRow"

We'll construct the API request like in the screenshot below:

Saving the query to pull in all purchases.

Saving the query to pull in all purchases.

It's a big screenshot - but what we've done is

  1. Use the onboarding_api resource which pre-configures our API auth scheme
  2. Configure the URL to be dynamically built from the table's selected row so that we're always approving the user we've selected in the table
  3. Provided an argument in the JSON body to approve our user
  4. Configure Retool to refresh our SQL query (query1) if the API calls succeeds.

We can do the exact same process with the "Reject" button to get a functioning dashboard with Approve and Reject working.

Using the Tool

We can test out the tool by clicking on the buttons and seeing the table of data refresh. Once you're satisfied that it all works you can click on the blue "Play" button on the top right corner to see what your users of the tool would use.

And that's it! We've built a quick dashboard that let's us approve and reject users using both SQL and API requests. Retool also lets you manages ACLS (Access Control Levels) as well as keeps a detailed audit log of everything that happens in your tools. You can check them out by going back to the home page and exploring Retool!


Overview

We’ll learn the basic concepts of Retool and build a customer search tool for a sample database. This'll take around 5 minutes.