Pages
Button Group Widget
The Button Group widget is a UI control that allows users to select exactly one option from a defined group of buttons. It is typically used to create custom switches such as theme selection, mode selection, layout toggles, or other mutually exclusive options.
The widget maintains and exposes the currently active state and can be configured either:
- Locally via a JSON configuration file
- Remotely via CODESYS
1. Overview
The Button Group:
- Displays multiple buttons in a single logical group
- Allows only one active (selected) button at a time
- Tracks the selected state internally
- Exposes the selected value for external logic
- Supports remote state updates via CODESYS
Typical Use Cases
- Theme switch (Light / Dark / System)
- Operating mode selection (Auto / Manual / Service)
- Layout selection
- Language selection
- Device control mode selection
2. Functional Behavior
2.1 Selection Logic
- Only one button can be active at any time.
- Selecting a button:
- Deactivates the currently active button
- Activates the selected button
- Updates the internal state
- Triggers configured output (JSON binding or CODESYS variable update)
3. Configuration via JSON
The Button Group can be defined using a JSON configuration file.
3.1 Basic Structure
id
Unique identifer to differentiate the individual buttons.
label
A string, which the users needs to assign to output a custom label for the button.
disabled
A boolean, that will, depending on the value set the button into the "disabled" state. The button will have a different style and won't be interactable, but will be rendered within the button group.
visible
A boolean, that determines whether or not a button is rendered in the UI.
[
{
"id": 0,
"label": "Option 1",
"disabled": false,
"visible": true
},
{
"id": 1,
"label": "Option 2",
"disabled": false,
"visible": true
}
]
CODESYS Structure
FOR i:=0 TO 20 BY 1 DO
buttonGroup.options[i].id := TO_BYTE( i);
buttonGroup.options[i].label := CONCAT('label_', INT_TO_STRING(i));
END_FOR