Writing Javascript

Write Javascript in Retool.

When building apps in Retool, anything inside {{ }} is Javascript. You can use it to access variables available on the page, as well as globals, given to you by Retool. And because it's Javascript, you can write custom JS to manipulate the data how you want.

Common Use Cases

Manipulating Data

Because anything inside of {{ }} is just JavaScript, you can manipulate the variables in Retool. Let's say you want to make a string lowercase, just write {{ textinput1.value.toLowerCase() }}. Adding 100 to a value would just be: {{ textinput1.value + 100 }}. Making a date show up in the format you want using moment would just be: {{ moment(table1.selectedRow.data.date_column).format('YYYY-MM-DD') }} .You can even do more complex things, like map over an array of objects, and pick out one of the fields: {{ query1.data.map(i => i.name) }}.

Because it's all JavaScript, Retool can handle any JSON shape returned by databases and API's. Just write a quick 1-liner to transform data.

Complex JavaScript

If you want to write multiple lines of code we suggest using Transformers rather than writing them in-line in {{ }}. This is useful if you want to do things like filter, transform, and even join different data sets. Here's an example transformer that takes the results of a database query, filters out for approved users, and returns an array with their credit_amount multiplied by 10:

var users = {{ query1.data }};
var approvedOnly = users.filter(i => i.approved === true);
var amountsTimesTen = approvedOnly.map(i => i.credit_amount * 10);
return amountsTimesTen;

Run JS Code (Perform custom behavior using Javascript)

You can also manipulate the components in your Retool app programmatically, by Scripting Retool. Rather than doing this in Transformers, you should create queries of type Run JS Code.

For example if you want to iterate over a CSV file and call an API for every row in the CSV, you could do something like this:

// map through every row of a csv file and call an API
return Promise.all(
  filepicker1.parsedValue.map((row) => {
     return apiQuery.trigger({
       additionalScope: {
         id: row.id
       }
     })
  })
).then(results => {
  return results
})

See more about how to write JavaScript queries here.

Import NPM Modules

Retool also supports importing your own Custom code + NPM modules!

Variables

All of the components and queries have names: for example, textinput1, or query1. And all of them are globally available on the page you're in, so you can refer to them elsewhere on the page: for example, {{ textinput1.value }} or {{ query1.data }}. See our API docs for components or databases for more details.

For example, set the value of a Text component to be {{ table.selectedRow.data.first_name }}, and the Text component will change based on the selected row of the table.

But we give you other variables too, including libraries like like Lodash (_), and Moment (moment), as well as variables that represent the email of the currently logged in user (current_user), the current URL and its params (urlparams), and the browser's localstorage (localstorage).

Manipulating Data

Because anything inside of {{ }} is just JavaScript, you can manipulate the variables in Retool. Let's say you want to make a string lowercase, just write {{ textinput1.value.toLowerCase() }}. Adding 100 to a value would just be: {{ textinput1.value + 100 }}. You can even do more complex things, like map over an array of objects, and pick out one of the fields: {{ query1.data.map(i => i.name) }}.

Because it's all JavaScript, Retool can handle almost any JSON shape returned by databases and API's. Just write a quick 1-liner to transform data, and make it work in your app.

Exploring objects using the Model Browser

If you want to see a list of all available variables on a page, open up the Model Browser at the top of the page. That'll open up the left pane, which shows you a list of all the components, queries, and other global variables available. Anything you can see there can be accessed in Retool.

SectionDescription
Temporary StateThis section lists the temporary state variables used in your app and the associated details. Temporary state variables enable you to temporarily store your app's state.
ComponentsThis section lists the components used in your app layout, and the associated component details.
QueriesThis section lists the queries used in your app and the associated query details.
GlobalsThis section lists the global variables used in your app and the associated variable details.

You can open the left model browser from the top nav bar

Expand one of the variables on the left to see its values. For example here we can see textinput1 and query1.

Use the model browser to inspect the Retool variables (components, queries, and globals)

As you type in textinput1, you can actually see the textinput1.value field updating on the left hand panel!

👍

Debugging Using the Model Browser

Something in {{ }} not working? Use the model browser to see what the values actually are!

(We've hidden some specific keys for components and queries, since they generally aren't used.)

Complex JavaScript

If you want to write multiple lines of code we suggest using Transformers rather than writing them in-line in {{ }}.

You can also manipulate the components in your Retool app programmatically, by Scripting Retool.

Retool even supports importing your own Custom code + NPM modules!

Updated 4 months ago


Writing Javascript


Write Javascript in Retool.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.