Skip to main content

Retool web apps development

Learn about Retool web app concepts and how they fit together.

Retool is a development platform for building internal tools and business software faster. You can build web apps, native mobile apps, workflows to automate tasks, and more. At a high level, these are the concepts involved in building web apps.

Retool web app overview​

Retool uses frontend and backend development principles for app development. You assemble UI components and configure their properties to create the app's interface. Then you write queries to interact with your data using SQL and API requests. And finally, you connect your UI and data together using JavaScript and event handlers.

Much of Retool’s value comes from building the frontend faster, while still providing flexibility to build apps the way you want.

The App IDE​

The App IDE is the interface you use to build Retool apps. It's also where you configure interactions (button clicks, form submissions, etc.) Within the App IDE is the canvas, which is where you arrange components to build your UI. See the App IDE documentation for more information.

Resource configuration​

You can connect almost any API or database to Retool and build apps on top of your data. Resources are saved configurations for connecting to your data sources.

When you configure a resource, information like the name, host, port, and authentication credentials are saved so you can query the data source from your apps. Retool also supports authentication methods such as OAuth that enables users to only interact with the data to which they have access.

You can build apps that query data across multiple resources, bringing related data from different sources together.

Settings for a MySQL resource

Retool supports a wide range of data sources, including most databases and APIs. For many of these data sources, there are built-in integrations, but you can also connect to almost any REST, GraphQL, or SOAP API. See the Resources page for more information.

Assemble the UI​

You use components to assemble the UI, and you can customize their styles and layout.

Components​

Components are the building blocks used to create your app's UI. They're modular, reusable, and have their own internal state. You add components from Add tab on the left, and configure components in the Inspector on the right.

Each component has its own set of properties. Some properties are common across components—e.g., value, label, hidden—and some are unique to the component. Many components include methods you can use to set properties programmatically. For example, Text Input components have setValue and clearValue methods that you can use to set or clear the component's value.

Below is an example of setting a component's property in the Inspect tab.

Setting a Text component's value

This is covered in more detail in subsequent sections, but know that components have events (e.g., a button click) and can read and set properties on other components. For example, you could use a Text component to read and display a value from a table, or you could use a Checkbox component to show or hide another component.

Style and layout​

Each component also has settings to configure its styling and appearance. You can change background colors, text, borders, accents, etc. Some components, such as Tables, provide additional styling options. After components are on the canvas, you can click and drag them to different locations, or resize them by clicking on their frames.

Interact with your data​

You primarily interact with your data through resource queries, but you can also use JavaScript transformers and JavaScript queries to further manipulate data.

In addition to resources, you can store data locally in the browser using variables and local storage store.

Resource queries​

Resource queries are how you read and write data from your resources. When you write a resource query, you select the resource in the dropdown menu and then configure the query.

Writing a resource for a query

JavaScript queries and transformers​

When you need to write more complex logic, you can use JavaScript queries and transformers. These allow you to write custom logic in a central place that's easier to work with.

JavaScript queries​

You can write more complex logic using JavaScript queries. These allow you to trigger other queries and configure components, which gives you more control over how your app works. JavaScript queries are often used to centralize logic that might otherwise be spread throughout an app. For example, you might a write JavaScript query that loops over a dataset and then execute API queries based on the results.

JavaScript transformers​

JavaScript transformers allow you to write reusable pieces of code. They're often used to manipulate data, and you can access the transformer throughout your app using {{ transformer_name.value }}.

Transformers execute their code automatically when the object they reference changes, and aren't explicitly triggered. For example, if you were working with an API that didn't support filtering using parameters, you could write a transformer like this to filter data.

// query1 returns unfiltered data
const data = {{query1.data}}

// Filter query1 data
return data.filter(f => f.fieldToFilterBy.toLowerCase().indexOf(textInput1.value.toLowerCase()) !== -1 )

You could then display the filtered data in a component by referencing {{ transformer_name.value }}.

Variables and local storage​

There are two options for storing data locally: variables and local storage.

Variables are for short term storage and they reset every time an app loads. They're often used to track data that changes as users interact with your app, or to track a value before committing it to a database. You can also use it to configure an app or component to load in a particular way. Variables have their own set of JavaScript methods.

Local storage is different in that it stores information in the browser. It also has its own JavaScript methods that you can use to set and clear values. All the apps in your organization have the same origin, which means you can use local storage to share data cross apps.

Connect the UI and data together​

You use JavaScript and event handlers to connect your UI and data. This can take many forms, but essentially you're adding interactions between your UI and data that allows users to interact with your app.

JavaScript​

JavaScript transformers and queries were covered previously, but you can write JavaScript anywhere in Retool. This means a few things in practice.

The example below has a Table component and a Text component. Notice that the first row of the table is selected, and that the value of the Text component is set to {{ table1.selectedRow.name }}. If you clicked a different row, selectedRow updates automatically and so does the value in the Text component.

Using curly brackets to reference table data

In Retool, anything between curly brackets {{ }} is JavaScript. In the previous example, JavaScript is used to access the name value in the currently selected row.

There's a full set of JavaScript APIs that provide additional utilities like parsing files, managing objects, etc. Retool also imports libraries like lodash and moment that you can use.

Event handlers​

You can think of events as actions within your app (button clicks, selecting a table cell, etc.) When an action occurs, you use event handlers to trigger other actions. Event handlers are integral to how you app functions, and how components and queries interact.

The app below provides an example. When you click the button (the action), confetti is displayed (the event handler).

Demo

Event handlers are often chained together to create robust interactions within your apps.

Like components, you can configure event handlers for queries. Unique to queries, you can run event handlers when queries run successfully or when they fail. This is commonly used to add an event handler to a query that writes data to a resource. After the query runs, it triggers a second query that refreshes the UI so it reflects the recent changes.

Share apps with users in your organization​

When you first create a Retool account, you also create an organization. Every Retool user account is bound to an organization. When you sign up and create an organization, you immediately become its administrator.

You can invite users to your organization and give them different permissions.mdx) depending on their needs. Some users might only need viewer access so they can use apps that you build, while others might need edit access so they can edit and build apps. You can optionally add single sign-on (SSO) to your Retool instance.

Wrap up​

Now that you're familiar with common Retool concepts, you might want to build an app with Retool Fundamentals or the Quickstart. You can also connect your own Resource and start working on your own app.