Set Variable Action

How Reactive Variables Work

App variables are the reactive state of an App Studio application. When a Set Variable action fires:

1. The variable's value is updated in the app state
2. The Token Resolver marks all token expressions that reference this variable as stale
3. All widgets with stale bindings re-evaluate their config and re-render
4. DataGrids with variable-based params re-fetch their data

This is how filtering works — a TextInput's onChange sets a searchTerm variable, and a DataGrid bound to {{ variables.searchTerm }} in its params automatically re-fetches filtered data.

Set Variable Action Config

// SetVariableActionConfig
{
  "type": "set-variable",
  "variable": "selectedStatus",         // variable name (declared in app config)
  "value": "active"                     // literal value or token expression
}

// With token expression
{
  "type": "set-variable",
  "variable": "selectedLeadId",
  "value": "{{ row.id }}"              // set variable from the clicked row
}

// Set multiple variables (use chain action)
{
  "type": "chain",
  "actions": [
    { "type": "set-variable", "variable": "filterStatus", "value": "active" },
    { "type": "set-variable", "variable": "filterPage", "value": 1 }
  ]
}

Declaring App Variables

Variables must be declared in the app configuration before they can be set. In the Properties Editor (with the App root selected), go to the Variables tab:

// App config — variables section
"variables": {
  "searchTerm": { "type": "string", "initialValue": "" },
  "selectedStatus": { "type": "string", "initialValue": "all" },
  "currentPage": { "type": "number", "initialValue": 1 },
  "showAdvancedFilters": { "type": "boolean", "initialValue": false }
}

Common Use Cases