Pages

Pages

Button: State

Description

The State Button is a dynamic UI control that changes its label, image, and behavior based on defined conditions.

Unlike static buttons, it adapts in real time to variables in your system.
You can define multiple visual and functional states using JavaScript-based logic.

Key Features

State-Based Behavior

  • Define multiple conditions using JavaScript
  • Dynamically change:
    • Label
    • Image
    • Execution logic

Dynamic Execution

  • Each state can have its own custom action
  • Useful for logic like:
    [code_block_0]

Visual Customization

  • Show different icons, text, or colors for each state
  • Improves user feedback and usability

Seamless Integration

  • Can be bound to any connected variable via [code_block_1]
  • Works well in real-time HMI/SCADA applications

Example Use Cases

Scenario Example Behavior
Toggle Between States Start ↔ Stop depending on [code_block_2] value
Error Handling UI Show "Reset" button if [code_block_3]
Visual Indicator Button Change icon when a function is enabled/disabled

Minimal JavaScript Example

Let’s say the button is linked to a variable called [code_block_2].
This code defines two states:

if (systemActive === true) {
label = "Stop";
image = "stop_icon.svg";
execute = "stopProcess()";
} else {
label = "Start";
image = "start_icon.svg";
execute = "startProcess()";
}