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, can be in either a Checked or Not Checked state, with its appearance reflecting this state. The button updates its state only after a click, toggling between down and up with each click.

  • 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

  1. Go to Displays / Draw.
  2. On the Components Panel, select Interaction, then PushButton.
  3. Click or drag-and-drop it on the Drawing area to use it.
  4. 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:

  • If value was not zero, it is set to zero.
  • If the value was zero, it is set to one. 

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.


Hover Color

The colors of the button hover effect can be redefined under Display > Themes by adjusting the HoverBackground and HoverBorder options for the active theme.

Runtime Execution

The visual of the element, will show Raised or Sunken according to the Linked Value configuration. 

if the Is ReadOnly option is not selected, when there is a mouse click in the object, the value of the tag in LinkedValue is toggled. 

If there is an Action Dynamic connected with the element, the actions will be executed according to the mouse event configured. 

In this section:

  • No labels