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:
  "If system is running → stop, else → start"

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 Connection String
• Works well in real-time HMI/SCADA applications

Example Use Cases

Scenario	Example Behavior
Toggle Between States	Start ↔ Stop depending on systemActive value
Error Handling UI	Show "Reset" button if errorDetected == true
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 systemActive.
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()";
}