Vision - Formatted Text Field
Component Palette Icon
This specialized text field is used for alphanumeric text input that must match some specific pattern or needs to be formatted in a specific way. It operates in two modes:
Formatted Mask
In this mode, input is automatically formatted and restricted based on a format mask. For example, a format mask like: (###) ###-#### will allow the entry of a 10-digit US phone number. The formatting characters are automatically inserted if the user does not type them in. Any other characters are restricted. The following characters may be used in a formatted mask pattern:
| Symbol | Description |
|---|---|
| # | Any valid number, Such as 0-9. |
| ' | Escape character, used to escape any of the special formatting characters. |
| U | Any letter. All lowercase letters will be mapped to upper case automatically. |
| L | Any letter. All upper case letters will be mapped to lower case automatically. |
| A | Any letter or number. |
| ? | Any letter, case is preserved. |
| * | Anything. |
| H | Any hex character (0-9, a-f or A-F). |
Regular Expression
In this mode, input is validated against a regular expression. A regular expression is a special string that defines a set of allowed strings. Any input that matches the given regular expression is allowed, and input that doesn't match, is restricted. And yes, while powerful, regular expressions are decidedly difficult to decipher.
Properties​
| Property | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| Allows Invalid Text | Allows Invalid text to Commit. | boolean | .allowsInvalid | Behavior |
| Background Color | The background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | Color | .background | Appearance |
| Border | The border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border. Note: The border is unaffected by rotation. Changed in 8.1.21 As of 8.1.21, the "Button Border" and "Other Border" options are removed. | Border | .border | Common |
| Commit While Typing | Commits valid text while user is typing. | boolean | .commitsOnValidEdit | Behavior |
| Committed Value | Committed text value. | String | .committedValue | Data |
| Cursor | The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. | int | .cursorCode | Common |
| Enabled | If disabled, a component cannot be used. | boolean | .componentEnabled | Common |
| Focus Lost Behavior | Controls how a transaction can be committed. | int | .focusLostBehavior | Behavior |
| Font | Font of text on this component. | Font | .font | Appearance |
| Foreground Color | The foreground color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | Color | .foreground | Appearance |
| Formatted Mask Pattern | Formatted Mask Validation Pattern. | String | .formattedMaskPattern | Behavior |
| Horizontal Alignment | Determines the alignment of the label's contents along the X axis. | int | .horizontalAlignment | Layout |
| Mouseover Text | The text that is displayed in the tooltip which pops up on mouseover of this component. | String | .toolTipText | Common |
| Name | The name of this component. | String | .name | Common |
| Quality | The data quality code for any Tag bindings on this component. | QualityCode | .quality | Data |
| Overwrites Text | Overwrites text while typing. | boolean | .overwriteMode | Behavior |
| Reg Ex Pattern | Regular Expression Validation Pattern. | String | .validationPattern | Behavior |
| Styles | Contains the component's styles. | Dataset | .styles | Appearance |
| Text | Contents of this Text Field. | String | .text | Data |
| Touchscreen Mode | Controls when this input component responds if touchscreen mode is enabled. | int | .touchscreenMode | Behavior |
| Touchscreen Keyboard Layout | New in 8.1.28 Sets the touchscreen keyboard layout to use for this component. | String | .keyboardName | Behavior |
| Validation Mode | Select regular expression or mask-driven field validation. | int | .validationMode | Behavior |
| Visible | If disabled, the component will be hidden. | boolean | .visible | Common |
Deprecated Properties​
| Property | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| Data Quality | The data quality code for any Tag bindings on this component. | int | .dataQuality | Deprecated |
Scripting​
Component Functions​
This component does not have component functions associated with it.
Extension Functions​
This component does not have extension functions associated with it.
Event Handlers​
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page
Customizers​
Examples​
Formatted Mask​
| Example | Description |
|---|---|
| ##U-####/UU | A product code with a specifc format, like 28E-8213/AR |
| 0xHHHH | A hex digit, automatically prepends "0x" on the front. e.g. "0x82FF" |
| #UUU### | A California license plate, eg. 4ABC123 |
Regular Expression​
| Example | Description |
|---|---|
| \p{Upper}\p{Lower}, \p{Upper}\p{Lower} | A name, formatted such as Smith, John |
| \d{3}-\d{2}-\d{4} | A US social security number, like 123-45-6789 |
| \d{1,3}.\d{1,3}.\d{1,3}.\d{1,3} | A network IPv4 address, like 67.82.120.116 |
| ^[a-f0-9A-F]{6}$ | A six-digit hexadecimal number |
Phone Number Format​
| Property Name | Value |
|---|---|
| Validation Mode | Formatted Mask |
| Formatted Mask Pattern | (###) ###-#### |