The Text Field widget is an input element that is commonly used within forms. You can use a Text Field to enable users to type text in a mashup. You can set or retrieve the text within the field using the Text property. Unlike the Text Area widget, the Text Field is limited to a single line. In addition to the common widget properties, you can configure the widget using properties in the following ways:

You can use the following widget events to execute data services or functions when the widget is value is updated at run time:

The Text Field widget triggers two bindable events:

You can use the widget events to trigger functions, data services, or services within widgets. For example, you can bind the events to a Validator function to validate the input as it is typed or when the Enter key is pressed.

You can enable the ReadOnly property to prevent changes to the text at run time. For example, you can use this property to prevent changes until a toggle button is enabled or a check-box is selected in the mashup. When read-only is enabled, you can select and copy text, but you cannot edit, cut, or delete the current value. To change the text value of a read-only Text Field, enter a value for the Text property at design time. You can also bind a data source to the property to change the text value at run time.

You can limit the input from the text field to a specific number of characters in one of the following ways:

To add a counter that shows the number of characters in the text field, set the Counter property to True. The MaxNumberOfCharacters property is used to set the character limit, including whitespace. The following image shows the Text Field widget with a visible counter and a maximum character count of 10:

When the character limit is reached, the counter color changes:

You can enable the ShowClearText property to add a text button to the input box of the widget. The button appears automatically to the right side of the widget when the input field contains a value. This enables users to quickly remove any existing text within the widget.

You can use the Icon property to display an icon within the text field. The Icon appears automatically to the left side of the widget. You can select an icon from the provided SVG icons that are available in the platform. For more information about these icons, see Using SVG Icons.

You can use the Mask property to specify an input pattern for numeric, alphabetic, and alphanumeric characters. When you define a pattern, placeholder guides are added to the input box. The guides are lines that are used to indicate the text pattern that a user can type into the text field. In addition to the required pattern, the property sets the number of characters within the text field. You can create patterns using the following special characters:

To create a pattern, combine the special characters into a string that represents the required input. For example, the following patterns represent different types of inputs:

The following image shows the guides for a 999–999–999–999 numeric pattern that contains four three-digit numbers at run time:

The pattern is used to set the format of the number in addition to the number of digits. In this example, you can type any 12 digit number, such as: 256120233234. As you type, the underscore (_) guides are replaced by numbers.

The indicator guides are displayed based on the total number of characters that you set within the pattern during design time. When you type a number with fewer digits than the pattern, the input remains incomplete. You should use the mask to define patterns with a specific number of characters, such as a phone numbers or Zip codes. Avoid using a mask when the input is not a specific number of characters, such as a monetary amount.

The properties of the Text Field widget are listed below.

In addition to the common properties, you can use the MaxLength and MinLength validation properties to validate the number of characters within the Text Field widget.

You can customize the default failure messages using the MaxLengthFailureMessage and MinLengthFailureMessage property. The maximum and minimum values are displayed within the messages using the ${value} parameter.

For more information about using the common validation properties, see Applying Validation to Widgets.

The following table lists validation properties that are available on the Validation panel in ThingWorx 9.3.4 or later.