Formatting rules on fields and variables (Form Builder) | FB_020

In this tutorial, we will learn how to apply formatting rules to our MegaEdit fields and to variables contained within our MegaEdit fields. This formatting includes options such as limiting input characters (such as numbers only) and formatting the input characters via regex terms.

This example will focus on a common use case, formatting an input string of numbers into a phone number.

This tutorial assumes prior experience with configuring the Form Builder script and using the Form Builder within MegaEdit.

The format for formatting rules in the Form Builder script config

These are the primary accepted terms within Form Builder's formatting rules.

The Tag line is the name of this particular formatting rule. We will use this to assign to defined rule to both fields and variables. We will see how to do this later on.

Type allows you to define what is allowable within this rule. For example, "number" will allow only numeric input. Letters will not be placed in the field at all.

Regex: This section defines a regular expression pattern that specifies the format the input should match. For example, this regex (\d{3})(\d{3})(\d{4}) represents a pattern for a phone number format where the first three digits are grouped, followed by the next three digits, and then the last four digits.

Parts: This section specifies how the matched parts of the input, as defined by the regex, should be formatted. In the example, "($1) $2-$3" specifies the desired formatting for the phone number, where $1, $2, and $3 represent the matched groups from the regex pattern, corresponding to the first three digits, next three digits, and last four digits respectively. This formatting rule applies parentheses around the first three digits, adds a space, and then formats the next three digits followed by a hyphen and the last four digits.

Note: Regex is not an Infigo specific term. There are many resources available on the web to aid you in the construction of these terms.

The format for formatting rules in the Form Builder script config

We will also create a variable within this script config

How to accomplish the creation of a variable is covered in other resources on the Infigo Academy.

Add the useFormattingRule term to the end of your variable configuration. Input a name into here matching the tag field of the formatting rule you wish to utilise

Click on Save and Continue Edit

Apply the formatting to an entire field

Within MegaEdit, configure a text field in the usual method when using the Form Builder.

A complete field (such as single line text and not one where variables are being used), requires you only to input the Tag name of the formatting rule as a Field Tag

Once you've input the name, click the + icon to add the tag.

As soon as this is done, the formatting rule will take effect

In this example, we can see entering a certain number of numerical characters results in automatic formatting of the field contents. In addition, letters cannot be added.

For a variable, the work has already been done

Simply ensure the variable is added in the usual way for the Form Builder (seen in other tutorials).

Remember, we already defined which formatting rule this variable was to use.

For a variable, the work has already been done

Entering a number into the variable's text box will result in the formatting being applied.

Well done!

Create how-to guides like this in a snap. Get Tango now.