The PushButton component allows users to create interactive buttons within their displays.
It is implemented deriving from the ToggleButton control, amiable in the Windows WPF graphical system, and also in the Web HTML5 pages.
On this page:
Requirements
This component is Portable. It runs both on Windows and on Web Pages hosted in any platform.
PushButton vs Button
The PushButton and Button controls have similar appearance, but there are distinctions on how typically they are used.
The Button is typically used in combination with the Action Dynamic. When there is an action connected with the Button, its appearance will automatically act to the Mouse Over events, and when is pressed, a visual feedback is provided. The pressed visual stays only while the button is pressed, but there is no state or dynamic property connected with the Button.
The PushButton (or ToggleButton), on the other hand, it can have the state Checked or Not Checked, and its visual reflecting that state. Here is the summary on the PushButton possible interactions with the Mouse.
- No actions: if there is no Dynamic action on the button, neither a tag on Linked Value, the element is just a static drawing.
- Is Pressed: if there a Dynamic action, but no tag on Linked Value, the visual will change with Mouse Over and Pressed states.
- Is Checked: If there is a tag on the Linked Value, the visual will change with the Mouse Over state, and with the value of the linked tag.
Configuration
- Go to Displays / Draw.
- On the Components Panel, select Interaction, then PushButton.
- Click or drag-and-drop it on the Drawing area to use it.
- Double-click the component to open the configuration window.
PushButton Settings | |
|---|---|
Field | Description |
Label Text | Specifies the text displayed in the PushButton. |
Localize | Enables the label text to be dynamically adjusted based on the user’s locale settings, ensuring the interface is accessible and understandable for users from different language backgrounds. |
Linked Value (IsChecked) | Associates the button with a tag value, or object. When tag is greater than zero, the visual of the PushButton will show as Sunken, when its zero it will show as raised. |
Linked Value Is ReadOnly | When checked (Read-Only), the visual of control will vary according the tag, but the value of the tag will not change when clicking in the control. When not checked (not read-only) when the PushButton is clicked the value of the tag in LinkedValue is toggled:
|
BorderThickness | Specifies the thickness of the PushButton border. The Apply button applies the specified border thickness. |
Shadow Effect | Adds a Shadow to emphasize the visual of Raised or Sunken. |
Boder Raised or Sunken
You can draw the PushButton to show its border raised on sunken, but typically you use only the Raised options, and the Sunken will be applied automatically when the application is running based on the value of the tag in the Linked Value (IsChecked) property.
Label Settings
Label Settings | |
|---|---|
Field | Description |
Position | Defines the label's position. There following options are available: Auto: The label position is determined automatically based on the available space and button size. Top: The label is positioned above the button. Left: The label is positioned to the left of the button. Inside: The label is positioned inside the button, usually centered. None: The button has no visible label. |
Width | Defines the label's width. |
Auto | When enabled, defines the label's width automatically. |
Preview | This option is available only when you link an object to the button. Preview options control the preview of the label content or data bindings. These options indicate the data linked to the button. Linked tag: Displays the object path of a linked tag, such as "Tag.Temperature.Value". Whitespace: Shows a white space as a placeholder. Placeholder: Displays the symbol ‘#’ as a placeholder. |
Format | This option is available only when an object is linked to the button. It allows you to define an expression to format the selected label. For example, ‘N1’ formats a number with one decimal place. |
Runtime Execution
The application instantly performs the linked action when users press the PushButton. This button provides immediate feedback, confirming the interaction. The event handler then executes the command, such as initiating a process, starting data logging, or resetting an alarm, ensuring prompt responses.
In this section: