This page presents the TextBox Control, with its two variations, the Numeric TextBox and the MaskedTextBox.
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
After dragging and dropping the component into the Drawing area, double-click it to open the graphical element configuration window.
Default TextBox
For the regular text box, we have:
TextBox configuration | |
|---|---|
Field | Description |
Control Name | Defines a name for the control so it can be accessed in the CodeBehind script. See Display Code Behind. |
Value | The Tag that will receive the value selected. |
Label | The label that will be shown in the text box. |
AutoComplete | Enable auto complete. |
FloatLabel | Options for enable the float (never, auto, always). |
Type | Text, password, email. |
ShowClearButton | Enable clear button. |
MultiLine | Enable Multi line |
ReadOnly | Enable Read Only mode. |
Masked TextBox
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 (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) | Controls the preview of the label content or data bindings. Options are:<br>LinkedTags: Displays the object path of a linked tag, such as Tag.Temperature.Value.<br>Whitespace: Shows a white space as a placeholder.<br>Placeholder: Displays the symbol # as a placeholder. |
Format (Label Settings) | It is available only when you link an object to the button. It allows you to define an expression to format the selected label. For example: N1 (number with 1 decimal place). |
PasswordBox
MaskedTextBox properties
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. In this example, it is set to 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. By default, it is set to 1, meaning 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. In this example, it is set to 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) | It allows you to define an expression to format the selected label. For example: 0.00 (number with 2 decimal places) |
MaskedTextBox properties
Control name
MaskedTextBox name.
Value
The Tag that will receive the value selected.
Mask
Insert a mask for the input text.
Label
Numeric TextBox
NumericTextBox properties
Control name
Numeric Text Box name.
Value
The Tag that will receive the value selected.
Label
Enter your value.
FloatLabel
- Always
- Auto
- Never
Format
Min
The minimum value in the input.
Max
The maximum value in the input.
Step
The step when using the arrows of the component.
ReadOnly
. |
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 | ||||
|---|---|---|---|---|
|