Skip to main content

Dynamic UI expressions

Expressions in KAIZEN are short, JavaScript-based snippets used in the Variable Binding feature of the App Designer. They allow you to make the UI dynamic by linking a component's properties directly to the application's data and state.

To use a dynamic expression, perform the following:

  1. Select a UI Component: In the App Designer, click on a component like an Input or a Form section.

  2. Choose a property: In the Setter Plugin, find the property you want.

    For example, the Visible property in the Advanced tab.

  3. Open Variable Binding: Click the Variable Binding icon Variable Binding next to the property.

  4. Enter the expression: In the dialog, enter the JavaScript expression which will evaluate to the value you want.

  5. Click Confirm. The property will be dynamically controlled by the expression.

Common examples include:

  1. Data binding in a list: To display a product name in a repeating list, the expression for a Text component content will be this.item.heading.

  2. Conditional visibility: To show a form step only when the application state is correct, the expression for the Visible property will be this.state.currentStep == 1 || this.state.showAll.

Last updated on 20 May 2026