Functional explanation
ButtonObject is a clickable operator control used to execute actions from a page. It is typically used for commands such as navigation, popup opening, script execution, or process-related actions that must be initiated by the operator.
The object can also reflect a digital state through different ON and OFF text and color settings. This makes it suitable when the operator must both issue a command and immediately recognize the current state from the same object.
Object name
Set the object name shown in the button decorator context.
| Setting | Description | Example | Units |
|---|---|---|---|
| Object Name | Name used to identify the Button object. | PumpStartButton | Text |
No rows match the filter.
Variable / Expression
Configure the expression that drives the Button state.
| Setting | Description | Example | Units |
|---|---|---|---|
| Variable / Expression | Expression used to drive the Button state. | PLC1.RunFeedback | Expression |
No rows match the filter.
Label
Configure the text shown for the ON and OFF states.
| Setting | Description | Example | Units |
|---|---|---|---|
| ON Text | Text shown when the Button state is ON. | Running | Text |
| OFF Text | Text shown when the Button state is OFF. | Stopped | Text |
No rows match the filter.
Text
Configure the text appearance used by the Button label.
| Setting | Description | Example | Units |
|---|---|---|---|
| Font Family | Font family used for the button text. | Arial | Font family name |
| Font Align | Horizontal alignment of the button text: Left, Center or Right. | Center | Selection |
| Font Size | Font size used for the button text. A number without a unit is applied in px. | 14 | px |
| Font Weight | Font weight used for the button text. | 700 | CSS font weight |
| Padding | Space between the border and the button text. Enter one to four values in the order top, right, bottom, left, for example 4 8 for 4 px at the top and bottom and 8 px at the left and right. A number without a unit is applied in px. Text with Font Align Center stays centered when the padding is equal on all sides; unequal padding, or Font Align Left or Right, offsets the text. Allow for the padding in the Width and Height of the object. A new Button starts with 0 12: 0 px at the top and bottom and 12 px at the left and right, so a 16 px font fits a Height of 26 px. Clearing the field applies the standard padding of 6 px at the top and bottom and 12 px at the left and right. | 4 8 | px |
No rows match the filter.
Position / Size
Configure the position and size of the Button object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Top | Top position of the object. | 100 | px |
| Left | Left position of the object. | 220 | px |
| Width | Width of the object. | 160 | px |
| Height | Height of the object. | 48 | px |
| Z-index | Layer order of the object. Higher values appear in front of lower values. | 10 | Number |
No rows match the filter.
Individual
Configure the ON and OFF appearance settings for the Button.
| Setting | Description | Example | Units |
|---|---|---|---|
| ON Color | Text color shown when the Button state is ON. | #FFFFFF | Color |
| ON Background Color | Background color shown when the Button state is ON. A gradient can be used here as well as a single color; see the Gradients section of the Color Library article. | #28A745 | Color |
| ON Border Color | Border color shown when the Button state is ON. | #1E7E34 | Color |
| OFF Color | Text color shown when the Button state is OFF. | #FFFFFF | Color |
| OFF Background Color | Background color shown when the Button state is OFF. A gradient can be used here as well as a single color; see the Gradients section of the Color Library article. | #6C757D | Color |
| OFF Border Color | Border color shown when the Button state is OFF. | #545B62 | Color |
| Border Radius | Corner radius of the Button. | 6 | px |
No rows match the filter.
Actions
Configure the action list executed when the button is clicked.
| Setting | Description | Example | Units |
|---|---|---|---|
| Actions | Action list executed when the button is clicked. | Navigate to Home, Open Settings | Action configuration |
No rows match the filter.
Animate Position / Size
Configure the runtime animation settings for height, width, top, and left.
22 rows
| Setting | Description | Example | Units |
|---|---|---|---|
| Animate Height Variable | Variable or expression that drives runtime height animation. | PLC1.Level | Variable or expression |
| Animate Height Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Height Maximum Raw | End of the raw value span. The animated height reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Height Minimum px | Start of the pixel span. The animated height runs from 0 px up to the difference between Maximum px and Minimum px. | 20 | px |
| Animate Height Maximum px | End of the pixel span. With Minimum px at 0, this is the height at full scale. | 60 | px |
| Animate Height Reverse | Sets the edge the height grows from. Cleared grows the object upwards from the bottom edge, which suits level and fill graphics. Selected grows it downwards from the top edge. | false | Boolean |
| Animate Width Variable | Variable or expression that drives runtime width animation. | PLC1.Position | Variable or expression |
| Animate Width Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Width Maximum Raw | End of the raw value span. The animated width reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Width Minimum px | Start of the pixel span. The animated width runs from 0 px up to the difference between Maximum px and Minimum px. | 40 | px |
| Animate Width Maximum px | End of the pixel span. With Minimum px at 0, this is the width at full scale. | 160 | px |
| Animate Width Reverse | Sets the edge the width grows from. Cleared grows the object to the right from the left edge. Selected grows it to the left from the right edge. | false | Boolean |
| Animate Top Variable | Variable or expression that drives runtime top-position animation. | PLC1.AxisPosition | Variable or expression |
| Animate Top Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Top Maximum Raw | End of the raw value span. The offset reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Top Minimum px | Start of the pixel span. A rising value moves the object upwards from its resting position by up to the difference between Maximum px and Minimum px. To move the object downwards, set Minimum px above Maximum px. | 120 | px |
| Animate Top Maximum px | End of the pixel span. A rising value moves the object upwards by up to the difference between Maximum px and Minimum px. | 240 | px |
| Animate Left Variable | Variable or expression that drives runtime left-position animation. | PLC1.LeftPosition | Variable or expression |
| Animate Left Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Left Maximum Raw | End of the raw value span. The offset reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Left Minimum px | Start of the pixel span. A rising value moves the object to the right from its resting position by up to the difference between Maximum px and Minimum px. To move the object to the left, set Minimum px above Maximum px. | 200 | px |
| Animate Left Maximum px | End of the pixel span. A rising value moves the object to the right by up to the difference between Maximum px and Minimum px. | 420 | px |
No rows match the filter.
Access Control
Configure access control for the Button object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Access Control Enable | Enables access control evaluation for the object. | true | Boolean |
| Access Control | Expression controlling who can use or see the object. | SYSTEM.UserGroups == "Operators" | Expression |
| Access Control Filter | CSS filter applied when access control is used to alter the object appearance. | blur(0px) contrast(30%) | CSS filter |
No rows match the filter.
Visibility
Configure the runtime visibility and blinking behavior for the Button object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Visibility | Expression controlling whether the object is visible. | PLC1.Available | Expression |
| Blink | Expression or boolean controlling button blinking. | PLC1.AlarmActive | Boolean or expression |
| Blink Speed | Blink speed used during runtime. | 500 | ms |
| Blink Offset | Blink offset used to stagger blinking between objects. | false | Boolean |
No rows match the filter.