How to Use Global Variables in Retool

In the Retool editor, click the left sidebar and locate the Globals tab (it looks like a globe icon). This panel lists all global variables defined for the current app. If you are working in a single-page app, you will not see Globals — global variables only appear in multipage apps. If you do not have a multipage app, go to the app settings and enable multiple pages first.

In the Globals panel, click the + button to add a new global variable. Give it a descriptive name such as selectedCustomerId. Set the Default value — this can be an empty string, null, 0, or any JSON-serializable value. The default value is what the variable holds when the app first loads, before any JS Query has set it.

Create a new JS Query (click + in the Code panel → JavaScript). To update the global variable, call global.setValue() and await the result. The method signature is: await global.setValue('varName', newValue). Note that setValue is asynchronous — if you need to read the value immediately after setting it, you must await the call or read from a local variable instead of from global.varName right away.

1// In a JS Query named 'setSelectedCustomer'
2// Called from a Table row click event handler
3const selectedRow = table1.selectedRow;
4const customerId = selectedRow.data.id;
5
6// setValue is async — always await it
7await global.setValue('selectedCustomerId', customerId);
8
9// Now navigate to the detail page
10utils.openPage('CustomerDetail');

On any page in the app, you can reference a global variable using double curly braces: {{ global.selectedCustomerId }}. Use this in a query's WHERE clause, a Text component's value, or a conditional visibility expression. For example, in a SQL query on the CustomerDetail page, you would write WHERE id = {{ global.selectedCustomerId }} to fetch the selected customer's data.

1-- SQL Query on CustomerDetail page
2SELECT *
3FROM customers
4WHERE id = {{ global.selectedCustomerId }}
5LIMIT 1;

To reset a global variable to its default value, use global.resetValue('varName') from a JS Query. This is useful when a user logs out or navigates back to a list view and you want to clear the selection state. You can call this in an event handler on a Back button or in a page-load event.

1// JS Query: resetGlobalVars
2await global.resetValue('selectedCustomerId');
3// Variable is now back to its default value (e.g., null)

A powerful pattern for multi-page wizards is to accumulate form data into a global object variable. Create a global variable named wizardData with a default value of {}. On each page, merge new form fields into it using global.setValue(). On the final submission page, read the complete object and send it to your backend query.

1// Page 1 — save step 1 data
2const existing = global.wizardData;
3await global.setValue('wizardData', {
4  ...existing,
5  firstName: textInput1.value,
6  lastName: textInput2.value
7});
8utils.openPage('WizardStep2');
9
10// Final page — submit accumulated data
11const formData = global.wizardData;
12await submitNewUser.trigger({
13  additionalScope: { payload: formData }
14});