Web Page User Input Controls

The WebPage Controls are used to insert interactive HMI elements.

Note:

All of the Controls elements have these Event handler script points (a few Controls elements have additional Event handler script points, which are indicated in their description):

  • On Mouse Enter
  • On Mouse Leave
  • On Mouse Move

For more information about the Event handler script points, see the topic WebPage Elements Event Handler Scripts.

Element Description
Button

The Button element is used for such actions as jumping to another WebPage, causing a Task to run, interacting with region graphics, or a Button function.

The Button Properties include the Click Command property, which provides a pre-defined list of available actions to which to bind the press of the Button.

Note: For more information, see the topic Button Click Command Property.

The Button element has one additional Event handler script point:

  • On Clicked
Note: The On Clicked script point will execute every time a user presses the Button. If both the Click Command and On Clicked script point are set, the Click Command has precedence, and will execute before the On Clicked script.
Check Box

The CheckBox element contains an interactive checkbox and a label beside the checkbox. To configure the appearance and placement of the label, use the Properties in the Text section (the Text Padding property determines the amount of spacing between the checkbox and the text).

The CheckBox element also has three additional Event handler script points:

  • On Changed
  • On Checked
  • On Unchecked
Date Time Entry

The DateTime Entry element provides a means to show and/or enter a date and/or time via the HMI.

The DateTime Entry element has one additional Event handler script point:

  • On Changed
List Box

Inserts a control for displaying and interacting with a table of data.

The ListBox element also has three additional Event handler script points:

  • On Selection Changed
  • On Mouse Up
  • On Mouse Down
Multiline Text Box

Inserts a control for entering multiple lines of text. The Text property can be bound to a tag, which can then be updated based on another part of the project, such as a User Script.

The MultilineTextBox element has three additional Event handler script points:

  • On Text Change
  • On Mouse Up
  • On Mouse Down
Note: The Multiline TextBox element does not support the input of a password during deployed mode. You must use a TextBox for that capability.
Numeric Entry

Inserts a control for entering numeric values; the values can be entered directly, or use the up and/or down arrows.

The NumericEntry element also has an additional Event handler script point:

  • On Value Change
Page Control Inserts a control that allows you to access and interact with another WebPage of the project. Use the drop-down menu of the Page Name property to select the WebPage to be displayed by this control element. The Page Control element has no Event handler script points.
Panel

Inserts a panel that can be used to place other HMI elements on top of, which can be used to help visually organize elements and act as a container for multiple elements.

Note:
  • If the Enable property of the Panel is disabled (unchecked), all of the elements on the Panel will also be disabled.
  • When an element with a published property tag is placed on a Panel, the path name of the element changes to include the name of the Panel. For example, WebPages.WebPageName.PanelName.CheckboxName.Checked.
Radio Button

Inserts an interactive two-state button that can be either checked or unchecked, and a label beside the button. To configure the appearance and placement of the label, use the Properties in the Text section (the Text Padding property determines the amount of spacing between the button and the text).

The RadioButton element also has three additional Event handler script points:

  • On Changed
  • On Checked
  • On Unchecked
Selection Box

Inserts a drop-down list control.

The SelectionBox element also has three additional Event handler script points:

  • On Selection Changed
  • On Mouse Up
  • On Mouse Down
Slider

Inserts an interactive numerical value selector control, which allows users to graphically select a numerical value by sliding a control to the desired value.

The Slider element has one additional Event handler script point:

  • On Value Change
Text Box

Inserts a control for entering text. The Text property can be bound to a tag, which can then be updated based on another part of the project, such as a User Script.

The Password property can be enabled to transform the TextBox into a password entry TextBox, where the characters will be replaced with asterisks.

The TextBox element has three additional Event handler script points:

  • On Text Change
  • On Mouse Up
  • On Mouse Down