Using the Masked Textbox Component
- 17 Nov 2020
- 2 Minutes to read
- Print
- DarkLight
This documentation version is deprecated, please click here for the latest version.
Using the Masked Textbox Component
- Updated on 17 Nov 2020
- 2 Minutes to read
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
Overview
The Masked Textbox Form control outputs data supplied, provided by users, according to the format defined by one of the following Value Types:
- General
- Email address
- Number
- Decimal
- Currency
- Social security number
- Phone Number
Behavior
| Value Type | Purpose |
| General | Accepts any text formatting or characters |
| Number | Enforces the textbox to only accept numbers |
| Decimal | Configures the textbox to only accept numbers and decimal values |
| Currency | Configures the textbox to only accept number values, and only two decimal place values |
| EmailAddress | Sets the textbox to only accept string values that contain an @ sign |
| SSN | Configures the textbox to only accept a 9 digit SSN number format |
| PhoneNumber | Enforce the textbox to only accept a 10 digit Phone number |
| Custom | Allows users to define their own custom string formatting |
The Masked Textbox form component constrains data entry to the specified format. This component also enforces the user selected text formatting when paired with Required Outcome Scenarios or Optional Outcome Scenarios.
A setting was introduced in v6.12+ that, when enabled, outputs an empty value for incomplete input for Optional Outcome Scenarios. This can be found under Behavior > Produce Empty Text For Invalid Value.
The Masked Textbox component can be found in the Toolbox tab, under the Data category.
Example
The example form will require six pieces of applicant information, five of which must conform to specific formatting rules.
- Name can contain any value.
- Age must contain a number.
- Email must contain a valid email address.
- Cash Amount must contain a currency value.
- Interest Decimal must contain a number and may contain a decimal point.
- Social Security Number must contain number formatted as ###-##-####
The example assumes that there is already a designed most Applicant Details Form, placing the labels and masked textboxes in position.
Begin in the Designer Folder by selecting the Applicant Details Form and clicking the Edit link.
Of the six masked textboxes in the form, none have been configured.
Begin by selecting the Name field and giving it a Value Type of General. This will enforce no requirements on the input.
Next, select the Age field and give it a Value Type of Number.
Next, select the Email field and give it a Value Type of EmailAddress.
Then, select the Cash field and give it a Value Type of Currency.
After, select the Interest field and give it a Value Type of Decimal.
Finally, select the Social Security Number field and give it a Value Type of Social Security Number.
The form is complete. Save and close.
Back in the Designer folder, we click the Create Flow button.
Name the flow "Application Flow" and click Ok to open it in the Flow Designer.
Begin by placing "Applicant Details" form in our flow. Located Flows, Rules, Forms and Reports > Forms [Interaction] > [Current Folder].
Click Add to place this step in the flow.
In the Mapping Editor, give all inputs a Mapping Type of "Ignore" and click Ok.
Next, connect the form's Done outcome to the End Step. Save and close.
To test the form, click Debug on the Action Bar.
Validations
Not filling in the form fields will return an error message
Clicking the Done button after filling the form fields with invalid data results in error messages for those fields.
But when filling in the form fields with valid data, the field error messages disappear.
On submission, our flow will run to the end.
Was this article helpful?
