The TextBox component allows users to enter and edit numeric values within their applications. It is commonly used for forms, data entry, and any scenario where text input is required.
On this page:
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.
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 NumericTextBox, the application captures and processes the input. Applying to the tag defined in the LinkedValue.
In this section: