Using the Masked Textbox Component

Last Updated: 08/11/2016 Introduced in Verision: 2.0

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.

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

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

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

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

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

Next, we will select the Cash field and give it a Value Type of Currency.

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

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

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

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.

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.

In the Mapping Editor, we will give all inputs a Mapping Type of “Ignore” and click OK.

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.

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.

Note that in Decisions version 3.5 and above, you’ll need to click on Test Flow to access the Debugger.

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.

Using the Masked Textbox Component

Example

Additional Resources