Skip to main content

Value Bindings

Overview​

Value bindings allow you to attach dynamic expressions to certain attributes of UI objects, enabling automatic updates based on changes in values or calculations. This feature enhances the flexibility and interactivity of your UI objects without requiring server-side code.

Key Features​

  • Dynamic Expressions: Use a subset of JavaScript syntax to create expressions.
  • Automatic Updates: Expressions are re-evaluated whenever dependent values change.
  • Local Variables: Define variables within the scope of each value binding.
  • Predefined Functions: Utilize a set of predefined functions for various operations.
  • Client-Side Data Manipulation: Enable UI behaviors and data manipulation without writing server-side code.

Syntax​

Value bindings are written using a subset of JavaScript syntax and can span multiple lines. Each line in the binding is separated by a semicolon ;. The result of the last line is used as the attribute value. Variables in value bindings are untyped, meaning they can hold any type of value. The syntax is simply <varname> = <value>.

Example:​

a = 5 * 2;
"hey" + a;  // Result: "hey10"

Using Value Bindings​

To add a value binding to a UI object attribute:

  1. Select the UI Object: Choose the UI object within the visual editor.
  2. Choose the Attribute: Select the attribute you want to bind.
  3. Add Value Binding: Click "Add Value Binding" and enter your expression.

Supported Attributes​

Value bindings can be used with most attributes of UI objects, except for "static" attributes that cannot be changed after the object is created.

Variables and Reserved Words​

Variables declared within a value binding are local to that binding. The following words are reserved and cannot be used as variable names:

  • and
  • or
  • null
  • Any predefined function names

Predefined Functions​

The framework supports a set of predefined functions to enhance the functionality of value bindings. For example:

  • ui(<id>, <attr>): Fetches the attribute value of a UI object.
  • value(<id>): Retrieves the current value of a field object.
  • consoleLog(<str>): Logs a message to the console for debugging purposes.

Error Handling​

If there is an error in the value binding expression (e.g., a syntax error or a reference to an uninitialized variable), an error message will be displayed in the console log. The function consoleLog(<str>) can be used within the expression to help with debugging.

Dynamic Updates​

Value bindings automatically update when the values they depend on change. This ensures that the UI remains consistent with the underlying data.

Example​

Here’s how a button object might use a value binding for its label attribute:

  1. Select Button Object: In the visual editor, select the button object.

  2. Choose Label Attribute: Select the "label" attribute.

  3. Add Value Binding:

    count = ui("my","count");
    "Count: " + count;

    This example retrieves a value from the server using UISet("my","count",<value>) and concatenates it to form the label of the button. Whenever a new UISet("my","count",<value>) is executed, the button label updates automatically.

Summary​

Value bindings provide a powerful way to create dynamic and responsive UI interfaces by allowing expressions to be attached to object attributes. With automatic updates and predefined functions, you can implement complex logic directly in the client, resulting in a responsive UI. This approach minimizes the need for server-side code and keeps it agnostic to the structure of the UI.