Data Binding Overview
Data binding connects widget properties to live runtime values — variables, user context, URL parameters, and service data — using the {{ }} token syntax.
The Token System
App Studio uses a token resolution system to bind widget configuration properties to dynamic values. Any property that appears in a widget's config can contain a token expression.
Tokens are evaluated at render time by the TokenResolver — replacing {{ expression }} with the actual value before passing config to the widget component.
Token Source Catalog
| Token Prefix | Source | Examples |
|---|---|---|
variables.* | App variables declared in the app config | {{ variables.searchTerm }}, {{ variables.selectedId }} |
route.* | URL route parameters from the current AppPage | {{ route.id }}, {{ route.year }} |
context.* | Current authenticated user context | {{ context.userId }}, {{ context.roles }} |
widget.* | Value or state of another widget in the same app | {{ widget.search-input.value }} |
row.* | Current row data (available in DataGrid cell renderers and row actions) | {{ row.name }}, {{ row.status }} |
modal.* | Context values passed when opening a modal pane | {{ modal.entityId }} |
workflowOutput.* | Output fields from a completed workflow trigger (wait mode) | {{ workflowOutput.isApproved }} |
Reactive Binding
Token binding is reactive. When a token's source value changes (e.g., a variable is updated by a Set Variable action), every widget that uses that token in its config automatically re-evaluates and re-renders — no manual refresh needed.
This reactive chain is what makes interactive filtering work:
- User types in a search TextInput →
onChangefires - Set Variable action sets
variables.searchTerm = "smith" - DataGrid's
params.query = "{{ variables.searchTerm }}"detects the variable changed - DataGrid re-fetches data with
query: "smith" - Grid updates with filtered results — all within milliseconds