Variable Binding

Variable Binding allows you to replace a static property value with a dynamic JavaScript expression. Instead of entering a fixed value for a component property, you can bind it to a state variable, a datasource, or the return value of a custom function. The bound expression is evaluated at runtime and the result is used as the property value.

Many component properties display the Variable Binding icon next to the input field. Click this icon to open the Variable Binding window.

The window is divided into two panels:

• Variable list (left) — Browse and select available variables and functions
• Bind variables (right) — Write or edit a JavaScript expression in a code editor

Variable list

The left panel organises available variables into three categories. Click a category name to display its contents below the search bar. Use the Search bar to filter items within the selected category.

State attribute

Lists all state variables defined on the current page, block, or widget component instance. State variables are displayed in a tree structure — if a variable is an object, you can expand it to view and select nested properties.

Selecting a state variable inserts a reference in the format this.state.<path> into the code editor. For example, selecting a variable called username inserts this.state.username.

Customised function

Lists all custom event handlers and methods defined on the current page. These are the functions you create in the event handlers panel (e.g., onClick, handleSubmit, isFormValid).

Selecting a function inserts it as a function call in the format functionName() into the code editor.

Datasource

Lists all datasources configured on the current page. Datasources represent API connections or other external data providers set up in the datasource panel.

Selecting a datasource inserts a reference in the format this.state.<datasourceId> into the code editor.

Bind variables

The right side panel contains a JavaScript code editor and a usage reference.

Code editor

The code editor uses JavaScript syntax. You can:

• Click a variable from the Variable List to insert it at the cursor position in the editor
• Type expressions directly using JavaScript syntax
• Combine variables and operators to build complex expressions (e.g., this.state.firstName + ' ' + this.state.lastName)

The expression you write is evaluated at runtime and the result is used as the property value.

note

Semicolons (;) are automatically removed from expressions. The expression should evaluate to a value, not execute a statement.

Usage reference

Below the code editor, the Usage section provides a quick reference for the available this.* objects you can use in expressions:

Object	Description
this	The instance object of the current block.
this.state	The data object containing the state of the current page, block, or widget component instance.
this.props	The properties passed to the current component instance. Includes this.props.context for sharing data across pages, and this.props.saveContext(key, value) for saving shared data.
this.context	Retrieves context variables that were previously saved using saveContext. Access values by key, e.g., this.context.<key>.
this.constants	Application-level constant values.
this.utils	Built-in utility functions provided by the platform (e.g., navigation, data storage, date formatting, encryption). For details, see Built-in JavaScript utilities.
this.dataSourceMap	A map of all datasource instances configured on the current page. Use this to access datasource methods and results programmatically.

Actions

The bottom of the Variable Binding window provides the following actions:

Action	Description
Remove Binding	Removes the current variable binding and reverts the property to its previous static value. This button only appears when a binding expression already exists.
Confirm	Saves the expression and closes the window. The button is disabled when the code editor is empty or when the expression exceeds the maximum allowed length.
Cancel	Discards any changes and closes the window.

Best practices

1. Keep Expressions Simple

   • Use straightforward references like this.state.count or this.state.visible for simple bindings
   • For complex logic, create a custom function in the event handlers panel and call it from the expression (e.g., getDisplayName()) rather than writing lengthy inline expressions

2. Use the Variable List

   • Click variables from the left panel instead of typing them manually to avoid typos
   • Expand state attribute trees to find nested properties quickly

3. Validate Your Expressions

   • Ensure the expression returns a value compatible with the property type (e.g., a boolean for toggle properties, a string for text properties)
   • Test expressions in preview mode to verify they produce the expected results

4. Expression Length

   • If your expression exceeds the maximum character limit, refactor the logic into a custom function and call it from the binding instead

Last updated on 20 May 2026