App Variables — Data Binding

Declaring Variables

Variables are declared in the App root's Variables tab in the Properties Editor. Each variable has a name, type, and initial value:

// App config — variables section
"variables": {
  "searchTerm": {
    "type": "string",
    "initialValue": "",
    "description": "Current search filter for the leads grid"
  },
  "selectedStatus": {
    "type": "string",
    "initialValue": "all"
  },
  "currentPage": {
    "type": "number",
    "initialValue": 1
  },
  "showFilters": {
    "type": "boolean",
    "initialValue": false
  },
  "selectedLeadId": {
    "type": "string",
    "initialValue": null
  }
}

Variable Types

Type	Values	Use Case
`string`	Any string including empty	Search terms, filter values, messages
`number`	Integer or decimal	Pagination page, count thresholds
`boolean`	true / false	Toggle visibility, loading states
`object`	Any JSON object	Selected row data, form state
`array`	Any JSON array	Multi-select values, tag lists

Reading Variables

// In any widget config property:
"params": { "query": "{{ variables.searchTerm }}" }
"content": "Showing {{ variables.currentPage }} of {{ variables.totalPages }}"
"visibilityExpression": "{{ variables.showFilters }}"

Setting Variables

Variables are set using the Set Variable action on widget events. They cannot be set by editing config directly — that would be a design-time change, not a runtime change.

// TextInput onChange → set searchTerm
"actions": {
  "onChange": {
    "type": "set-variable",
    "variable": "searchTerm",
    "value": "{{ widget.search-input.value }}"
  }
}

Variable Scope

Variables are app-scoped — they are available on all AppPages within the same app session. A variable set on the "Leads List" page is still available when the user navigates to the "Lead Detail" page.

However, variables are session-scoped — they reset to their initial values on page refresh. Use URL-synced variables (route.*) if you need values to persist across page reloads.

Variables Are Not Persistent

App variables hold transient UI state. They are lost on page reload and are not stored in the database. If a user refreshes the page while a variable holds important data (e.g., an unsaved form draft), that data is lost. Persist important data through form submits or workflow triggers.

← Token Syntax Next: URL-Synced Variables →