This page presents the TextBox Control, with its two variations, the Numeric TextBox and the MaskedTextBoxThe 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.
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:
- 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 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
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
CheckBox to enable ReadOnly.
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. |
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. |
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 | ||||
|---|---|---|---|---|
|