cancel
Showing results for 
Search instead for 
Did you mean: 
SOLVED

iq-select-box (How can I dynamically change it)

iq-select-box (How can I dynamically change it)

Juergen3
New Poster

Is there somewhere a description/tutorial how to use the iq-select-box widget? I want to send a string array from the plc program to the hmi and display it in the select-box. Many thanks for the help.

2 REPLIES 2

webiq-sk
Frequent Contributor

WebIQ does not currently support OPC-UA arrays. The normal way would be to configure the select box options in WebIQ Designer and attach an item that reflects the currently selected value:

webiqsk_0-1661753543512.png

https://docs.webiq.de/docs/webiq-designer-manual/#_overview

 

HmiGuide
Community Moderator
Community Moderator

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
*/

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist