Bind Widgets’ Values to Variables

As an application designer or story developer, you can bind some simple widgets' values to variables like script variables, model variables, tile variables (widget-level variables) and analytic application or story properties so that the values can be updated automatically. The other way around, by binding you can enable writing the value set for a simple widget in view time back to a certain variable and applying the variable wherever needed.

The simple widgets and corresponding variable types available for binding are:

  • list box, dropdown, checkbox group and radio button group

    Their ID and display text can be bound to script variables, model variables or tile variables.

  • input field and text area

    Their display text can be bound to script variables, model variables, tile variables or analytic application or story properties.

    When the variable is an array, the values displayed will be separated by commas.

  • slider and range slider

    Slider’s current value and range slider’s start and end values can be bound to script variables, model variables or tile variables. The variables must be single values of the number type.

  • image

    It can be bound to a script variable. The variable must be single value of the string type.

    Image only supports such binding when dynamically setting image URL is enabled.

Tip

The analytic application or story properties include current user, time or date, last modified date or date/time, last modifier and creator.

Tip

In general, if not specified, the variables available for binding are primitive type variables (string, boolean, integer or number) and can be array or single value.

Note

Push, pop or index of array in scripting won’t be reflected in the bound widget.

Note

Align the type of widget’s value with the write-back script variable.

Example 1: Synchronize a Slider’s Current Value with a Chart’s Variable

Say you want to synchronize Slider_1’s current value with a script variable used in Chart_1, Variable_1.

  1. Go to the Builder panel of Slider_1.

  2. Under Data Source Type, select Script Variables from the dropdown list.

  3. Under Current Value, select Variable_1 from the dropdown list.

  4. Save the analytic application or story.

In view time, select (Edit Chart Prompts) in Chart_1 and adjust the value of Variable_1.

Slider_1's value will be changed accordingly.

Example 2: Use a Slider’s Current Value as the Threshold of a Chart’s Conditional Formatting

Say you want to use Slider_1’s current value that end users select in runtime as the threshold of Chart_1’s conditional formatting.

  1. Create a number type variable Variable_2.

  2. Go to the Builder panel of Slider_1.

  3. In Slider Properties, turn on Enable the write-back in runtime.

  4. Under Write current value back to the variable, select Variable_2 from the dropdown list.

  5. Go to the Builder panel of Chart_1.

  6. Select (Threshold Options) beside the measure you want to apply conditional formatting to and then Edit Ranges….

  7. Configure the threshold. Under Comparison Measure, select Variable_2.

Current value of the slider is automatically written back to the variable applied to the chart’s conditional formatting. The threshold of Chart_1 will always take the current value of Slider_1.

Caution

If end user changes such a widget’s value directly or via API at runtime while you’ve defined a variable bound to this widget’s value at design time, the variable binding will become invalid.

Related Information