The above statement that WebIQ does not support arrays is somewhat misleading.
You can exchange arrays between the ctrlX and WebIQ. However, these are transferred as single elements.
The real question: "How to change the iq-select-box dynamically" is not answered yet.
In the attached example this is realized.
Instead of an array, however, a string is used, because this solution is more flexible than an array.
Alternatively, you could transfer the data in an array and adjust the implementation.
Example:
This example shows how to change the label & options of an iq-select-box at runtime.
- The options are passed in a string with a field separator.
- Format: ${Label_0}:${Value_0},${Label_1}:${Value_1},...,${Label_N}:${Value_N}
- Implentation in the local script "iq-select-box-update".
Background information:
WebIQ widgets are based on 3 components:
1. combination of several HTML5 elements (group of HTML5) to provide:
- Extended functionality compared to the basic HTML5 elements
- Different variants (e.g. ip-input: label in front of the input field, label above the input field,...)
- Same look in different browsers
2. CSS (Cascading Style Sheet. Here colors, fonts, transparency, ... are defined)
- Defines the appearance of the widgets
3. JavaScript module
- The functionality for the WebIQ widgets is implemented here
To find out how to change the iq-select-box point 3 is important.
- Open the file $workspace/workspace/js/controls-bundle.js
- You find your workspace path on the info screen of the Designer
- Search for "class-name" (you must enter " around class-name) to find the below section
- Read the source code and comment to find out which functions you need
/**
* iq-select-box
*
* Configuration options (default):
*
* {
* "class-name": "iq-select-box",
* "name": null,
* "template": "default/iq-select-box.iq-variant-01"
* }
*
* Explanation of configuration options:
*
* class-name {string}: Sets default css class applied on control root element
* name {string}: Name of control set to data-name attribute
* template {string}: Path to template file
:
*
* @version 1.1
*/
