Skip to main content
Version: 8.1

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:

SymbolDescription
#Any valid number, Such as 0-9.
'Escape character, used to escape any of the special formatting characters.
UAny letter. All lowercase letters will be mapped to upper case automatically.
LAny letter. All upper case letters will be mapped to lower case automatically.
AAny letter or number.
?Any letter, case is preserved.
*Anything.
HAny 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

PropertyDescriptionProperty TypeScriptingCategory
Allows Invalid TextAllows Invalid text to Commit.boolean.allowsInvalidBehavior
Background ColorThe 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.backgroundAppearance
BorderThe 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.borderCommon
Commit While TypingCommits valid text while user is typing.boolean.commitsOnValidEditBehavior
Committed ValueCommitted text value.String.committedValueData
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.int.cursorCodeCommon
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
Focus Lost BehaviorControls how a transaction can be committed.int.focusLostBehaviorBehavior
FontFont of text on this component.Font.fontAppearance
Foreground ColorThe 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.foregroundAppearance
Formatted Mask PatternFormatted Mask Validation Pattern.String.formattedMaskPatternBehavior
Horizontal AlignmentDetermines the alignment of the label's contents along the X axis.int.horizontalAlignmentLayout
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
QualityThe data quality code for any Tag bindings on this component.QualityCode.qualityData
Overwrites TextOverwrites text while typing.boolean.overwriteModeBehavior
Reg Ex PatternRegular Expression Validation Pattern.String.validationPatternBehavior
StylesContains the component's styles.Dataset.stylesAppearance
TextContents of this Text Field.String.textData
Touchscreen ModeControls when this input component responds if touchscreen mode is enabled.int.touchscreenModeBehavior
Touchscreen Keyboard Layout
New in 8.1.28
Sets the touchscreen keyboard layout to use for this component.
String.keyboardNameBehavior
Validation ModeSelect regular expression or mask-driven field validation.int.validationModeBehavior
VisibleIf disabled, the component will be hidden.boolean.visibleCommon

Deprecated Properties

PropertyDescriptionProperty TypeScriptingCategory
Data QualityThe data quality code for any Tag bindings on this component.int.dataQualityDeprecated

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

ExampleDescription
##U-####/UUA product code with a specifc format, like 28E-8213/AR
0xHHHHA hex digit, automatically prepends "0x" on the front. e.g. "0x82FF"
#UUU###A California license plate, eg. 4ABC123

Regular Expression

ExampleDescription
\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 NameValue
Validation ModeFormatted Mask
Formatted Mask Pattern(###) ###-####