Binding Examples

This section offers some real-life examples of widget bindings.

This example shows how to execute a server-side action upon a button click. The most typical case of using this binging type is opening a new widget when a button is clicked on any other widget.

First of all, put a Button component on your widget. Second, add a binding to the button, and configure this binding as follows:

• Set button's Mouse Pressed event as binding Activator, i.e. set Activator to form/button1:mousePressed@
• Specify its Launch Widget action as binding Target, i.e. set Target to users.admin.widgets.bindingsDemo:launch!, where users.admin.widgets.bindingsDemo is a context path of widget to launch.
• Leave binding Expression empty.

Binding configuration:

It's also possible to close current widget (one with the Button) before the action execution. To configure this: Open Operations property of the Button Add a record with Close operation

This binding will make a status panel red if a voltage alert is reported by the controller. In other cases the panel will be green.

Note that the expression and the target reference use relative context paths (".") to make the widget compatible with multiple similar controllers. The widget should be relative and valid for all "voltage controller" devices.

It's possible to modify the above binding to make the panel red if temperature reading is over 50 degrees: ({.:voltage$voltage} > 50) ? color(255, 0, 0) : color(0, 255, 0)

This pair of bindings will change setpoint of a controller (e.g. temperature controller) once a slider is moved.

First binding is used to read current setpoint value from the controller and initialize the slider:

Second binding writes new setpoint to the controller once the slider is moved:

This binding executes a server query whose text is contained in the text field queryText and puts query results into the Data Table Editor component named results.

The query is executed by calling executeQuery of the root server context. The operation is performed upon execute button click.

Note that first parameter of executeQuery function is single-quoted to make the system processing it as expression.

It's possible to use alternative syntax for the above binding's expression: callFunction("", "executeQuery", {form/query:text}) This expression works exactly as the above one. However, it uses callFunction() expression language function to call the server context function by explicitly specifying context path, function name and its parameters.

This example explains how to perform device or server function call from a widget. Assuming we have a device supporting multiply operation with two numeric arguments. We'd like to call this operation upon calculate button click by supplying numbers entered in two text fields (argument1 and argument2).

In this case our binding's target will point to the function and its expression will return a pre-build parameters data table:

Note that we're using relative context path (".") in the target to make calculation widget compatible with many calculation agents. To use it with just one agent, specify absolute path, e.g. users.my_user.devices.my_agent.

In this example calculation result returned by multiply operation will be discarded. But what if we want to put it into another widget component (such as a label)? Here is the solution:

In this case our binding expression will call the function and return its output (a Data Table). The actual calculation result (numeric result field) is extracted from this table using cell() function. This result is written into result label:

Note that relative device context path (returned by dc() function) is used. To use absolute context path change dc() to full device path, e.g. users.my_user.devices.my_agent.

There is another (more compact) style of writing the above binding expression to obtain exactly the same result. This style uses a function reference instead of callFunction() expression language function: {.:multiply('{form/argument1:text}', '{form/argument2:text}')$result}

Was this page helpful?

Tell us more

Send

Thank you!