Build Scalable Internal Applications

Ben Johnson shows how to use Retool to create an expense submission app and an expense approval app.



Getting Started with Retool

Retool Solutions Engineer Ben Johnson joined us on the stream to show me how to build two apps: one for submitting expenses and a second one for approving them. It was also a chance for me to dust off my SQL building skills.

About Retool

Retool is a data agnostic nocode tool that helps you build internal tools. While Retool can be connected to a third party data source like Airtable, Johnson gave us an early look at Retool Database which enables storing data within Retool.

When working with Retool, there are three key concepts to understand:

  • Components: Visual building blocks (examples: form, table)
  • Queries: How you connect to your data store (examples: Postgres, Airtable)
  • Application State: Where your data is after you’ve pulled it out of the data store

For anyone interested in learning Retool, Johnson’s advice is to just start building.

Who this video is for and what you’ll learn

Retool’s graphical user interface with drag-and-drop components is beginner-friendly.

Depending on what one is building, a minimal amount of SQL knowledge can be useful, making Retool a powerful tool for intermediate and advanced nocode builders and software developers who do not want to code internal applications from scratch.

How to follow along

To follow the featured workflow, you will need accounts on the following services:

Let’s get into it

Step 1: Adding a Form to the Canvas (11:30)

We started by adding components to a form and updating the form name to match our use case.

Our form for submitting employee expenses included the following fields:

  • Employee Name (text)
  • Email (email)
  • Date (date)
  • Description (text area)
  • Amount (currency)

Screenshot showing how to start an app in Retool
Starting our first app in Retool

Step 2: Creating the Data Store (17:47)

After opening a new browser tab, we went to “Resources” and selected “Retool Database” for our data source. For speed of development on the livestream, we used an existing “expenses” table.

Screenshot showing initial data source
Reviewing our initial data source

Step 3: Mapping Form Fields and Table Column Names (19:34)

As the first step in connecting our expense form to our data store, we added our column names into the “form data key” field on our form.

Screenshot showing connecting data source and form with one another
Connecting form fields and data source columns

Step 4: Connecting the Form and the Data Store (22:15)

Entering column names as part of the meta information for each form field isn’t enough to fully connect the form with our database. We need to write a query to create a record in the data store and then associate that query with an interaction on the form. The internal Query Builder makes it possible.

While in the editor, we selected the “Retool Database” as the “data resource” and “GUI mode” to make writing queries easier than writing raw SQL statements.

We then selected the table, action, and mapped form fields to data sources using the “Object” option instead of mapping each individual form field to its respective field in the database.

Screenshot showing connecting of data
Continuing to map form fields with the data source

Step 5: Connecting the Form to the Query (26:07)

We then double-checked that the event handler was connected to the query. We also renamed the query to be meaningful and tested to make sure everything was working properly. Our first app — an app for submitting expenses — was now complete.

Screenshot showing how to connect the form to a query
Connecting the form to our query

Step 6: Building the Expense Approval App (30:46)

What good is an expense submitting app if there isn’t a way to approve expenses? It was now time to build our second app by returning to the main page when logged in and creating a new app.

With the new app started, we replaced the fake data created by default with the existing data in our Data Store. To do that, we returned to the Query Builder. Instead of using the “GUI Mode” we did before, we elected to use “SQL mode” to write a new query that would retrieve records from our database.

Since we want to be able to filter records, we added a text input to the Canvas and a radio group to filter based on approval status.

Screenshot showing a filter creation query
Creating a query to filter records

Step 7: Adding a Button to Approve Expenses (40:04)

If you are a regular watcher of Automate All the Things, you know I am a fan of buttons. With the approval app in place, it was time to add a button component to the canvas.

We then wrote a new query using GUI mode and connected the query to an event handler. We also made sure the data refreshed by adding a control query to pull our “expenses” data store.

Writing the query to approve expenses

Connecting the query to the event listener
Updating the query to update the table after an action is taken

Are you building internal tools? Let me know. Curious to hear how Retool or other nocode tools are helping you streamline business operations.

Key takeaways

Similar streams

Oh no! No videos within this category were found.