The TextBox component allows users to enter and edit text within their applications. It is commonly used for forms, data entry, and any scenario where text input is required. There are two variations: Numeric TextBox and PasswordTextBox.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Requirements
This component is Portable. It runs both on Windows and on Web Pages hosted in any platform.
Configuration
- Go to Displays / Draw.
- On the Components Panel, select Interaction, then TextBox, PasswordBox, or NumericTextBox.
- Click or drag-and-drop it on the Drawing area to use it.
- Double-click the component to open the configuration window.
TextBox
TextBox configuration | |
|---|---|
Field | Description |
Label Text | Specifies the text displayed next to the TextBox. It helps users understand the context or purpose of the displayed value. |
Linked Value | Binds the TextBox to a specific tag or variable (e.g.: Tag.Temperature). This binding ensures the TextBox displays the current value of the specified tag. |
Binding | Sets the binding mode for the component. Options are: TwoWay: Updates the data source and UI interchangeably. Output Only: Updates the UI based on the data source without allowing user input to affect the data source. Input Only: Accepts user input and updates the data source, but changes in the data source do not update the UI. |
MinValue | Specifies the minimum value displayed by the TextBox. |
MaxValue | Specifies the maximum value displayed by the TextBox. |
Preview | Controls the preview of the label content or data bindings. Options are: LinkedTags: 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 | Allows users to define a formatting expression for the displayed text. |
Border | Sets the border style for the TextBox. Options are: OutlineAndFill: Combines both an outline and a fill effect for the border. OutlineOnly: Displays only the outline of the control. HorizontalLine: Shows a horizontal line as the border. |
ShowClearButton | When checked, displays a button to clear the text content within the TextBox. |
MultiLine | When checked, allows the TextBox to display multiple lines of text. |
Label Settings: Position | Defines the label's position relative to the TextBox. Options are: Auto: The label position is determined automatically based on the available space and button size. Top: The label is positioned above the TextBox. Left: The label is positioned to the left of the TextBox. Inside: The label is positioned inside the TextBox, usually centered. None: The TextBox has no visible label. |
Width | Specifies the width of the label. In this example, it is set to 80. |
Auto | When enabled, the label's width is defined automatically. |
Preview (Label Settings) | 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 (Label Settings) | 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. |
PasswordBox
A PasswordBox is a subset of TextBox control that captures user passwords securely by masking the input characters. It binds to a specific variable to reflect and control the value entered. Users can configure label text, linked value, preview options, border style, and label settings.
PasswordBox Settings | |
|---|---|
Label Text | Specifies the text displayed next to the PasswordBox. It helps users understand the context or purpose of the input field. In this example, it displays "Password." |
Linked Value | Binds the PasswordBox to a specific tag. This binding ensures the PasswordBox reflects and controls the value of the specified tag. |
Preview | Controls the preview of the label content or data bindings. Options are: LinkedTags: 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. |
Border | Sets the border style for the PasswordBox. Options are: OutlineAndFill: Combines both an outline and a fill effect for the border. OutlineOnly: Displays only the outline of the control. HorizontalLine: Shows a horizontal line as the border. |
Position | Defines the label's position relative to the PasswordBox. Options are: Auto: The label position is determined automatically based on the available space and button size. Top: The label is positioned above the PasswordBox. Left: The label is positioned to the left of the PasswordBox. Inside: The label is positioned inside the PasswordBox, usually centered. None: The PasswordBox has no visible label. |
Width | Specifies the width of the label. Default is 80. |
Auto | When enabled, the label's width is defined automatically. |
Preview (Label Settings) | Controls the preview of the label content or data bindings. Options are: LinkedTags: 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. |
Numeric TextBox
NumericTextBox Settings | |
|---|---|
Label Text | Specifies the text displayed next to the NumericTextBox. It helps users understand the context or purpose of the displayed value. In this example, it displays {Tag.Temperature}. |
Linked Value | Binds the NumericTextBox to a specific tag or variable (Tag.Temperature.Value). This binding ensures the NumericTextBox displays and controls the value of the specified tag. |
Binding | Sets the binding mode for the component. Options are: TwoWay: Updates the data source and UI interchangeably. Output Only: Updates the UI based on the data source without allowing user input to affect the data source. Input Only: Accepts user input and updates the data source, but changes in the data source do not update the UI. |
Step | Specifies the increment value for the NumericTextBox. Default is 1, which means the value will increase or decrease by 1 unit with each step. |
MinValue | Specifies the minimum value that the NumericTextBox can display or accept. |
MaxValue | Specifies the maximum value that the NumericTextBox can display or accept. |
Preview | Controls the preview of the label content or data bindings. Options are: LinkedTags: 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 | Allows users to define a formatting expression for the displayed text. |
Border | Sets the border style for the NumericTextBox. Options are: OutlineAndFill: Combines both an outline and a fill effect for the border. OutlineOnly: Displays only the outline of the control. HorizontalLine: Shows a horizontal line as the border. |
ShowClearButton | When checked, displays a button to clear the text content within the NumericTextBox. |
Label Settings: Position | Defines the label's position relative to the NumericTextBox. Options are: Auto: The label position is determined automatically based on the available space and button size. Top: The label is positioned above the NumericTextBox. Left: The label is positioned to the left of the NumericTextBox. Inside: The label is positioned inside the NumericTextBox, usually centered. None: The NumericTextBox has no visible label. |
Width | Specifies the width of the label. Default is 80. |
Auto | When enabled, the label's width is defined automatically. |
Preview (Label Settings) | Controls the preview of the label content or data bindings. Options are: LinkedTags: 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 (Label Settings) | Allows to define an expression to format the selected label. For example: 0.00 (number with 2 decimal places). |
Runtime Execution
When users type into a TextBox, the application captures and processes the input. This control supports data entry, allowing users to input commands, notes, or setpoint values. The application then uses this data for various purposes, such as diagnostics, maintenance logs, or operational adjustments, facilitating user interaction and data management.
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|