Using the Masked Textbox Component
  • Updated on 09 May 2013
  • 2 minutes to read
  • Print
  • Dark
    Light

Using the Masked Textbox Component

  • Print
  • Dark
    Light

The Masked Textbox form component requires the user to enter data that matches the specified format. The available formats are: general, email address, number, decimal, currency and social security number. The Masked Textbox component can be found in the Toolbox tab, under the Data category.

Example

Our 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 ###-##-####.
Our example assumes that we've already designed most of the Applicant Details Form - placing the labels and masked textboxes in position.

1_FormInDebuggerView.png

We will begin in our Designer Folder by selecting the Applicant Details Form and clicking the Edit link.
2_EditForm.png

Of the six masked textboxes in our form, none have been configured.

3_FormDesignerView.png

We will begin by selecting the Name field and giving it a Value Type of General . This will enforce no requirements on the input.
4_NameProperties.png

Next, we will select the Age field and give it a Value Type of Number .
5_AgeProperties.png

Next, we will select the Email field and give it a Value Type of EmailAddress .
6_EmailProperties.png

Next, we will select the Cash field and give it a Value Type of Currency .
7_CashProperties-1.png

Next, we will select the Interest field and give it a Value Type of Decimal .
8_InterestProperties.png

Finally, we will select the Social Security Number field and give it a Value Type of Social Security Number .
9_SsnProperties.png

This completes our form, so we will save it and close the Form Designer.
10_SaveAndClose.png

Back in our Designer Project folder, we click the Create Flow button.
In the resulting New Flow pop-up, we will name our flow "Application Flow" and click OK to open it in the Flow Designer.
11_NewFlow-1.png

We will begin by placing "Applicant Details" form in our flow. We will find it in the Flow Designer's startup window, under the category Flows, Rules, Forms and Reports > Forms [Interaction] > [Current Folder] . Click Add to place this step in the flow.

12_AddForm.png

In the Mapping Editor, we will give all inputs a Mapping Type of "Ignore" and click OK .
13_IgnoreMapping.png

Next, we will connect our form's Done outcome to the End Step , which will complete our flow. We will save it and close the Flow Designer.
14_SaveFlowAndClose.png

To test our form, we will click the Debug Flow link. When we click the Done button without filling in the form fields, we will see error messages for every field.

15_DebugFlow.png

16_RunInDebugger.png

When we click the Done button after filling the form fields with invalid data, we will still see error messages for those fields.
When we fill in the form fields with valid data, the field error messages will disappear.
On submission, our flow will run to the end.
17_DebuggerOutcome.png

Was this article helpful?