00:00:05:15 - 00:00:08:22
In this tutorial, we'll learn how to apply
formatting rules

00:00:08:22 - 00:00:14:11
to our MegaEdit fields and to variables
contained within MegaEdit fields.

00:00:14:11 - 00:00:19:06
This formatting includes options
such as limiting input characters such as

00:00:19:08 - 00:00:22:01
allowing numbers only
and formatting the input

00:00:22:01 - 00:00:26:07
characters using regex terms.

00:00:26:09 - 00:00:29:27
This example will focus on a fairly common
use case, which is formatting

00:00:29:27 - 00:00:34:03
an input string of numbers
into a telephone number.

00:00:34:05 - 00:00:36:14
This tutorial assumes prior experience

00:00:36:14 - 00:00:40:20
with configuring the Form Builder script
and using the Infigo form.

00:00:40:20 - 00:00:48:10
Build that within MegaEdit.

00:00:48:13 - 00:00:48:21
All right,

00:00:48:21 - 00:00:51:23
so we're going to start off
on the actual script config and you'll see

00:00:51:23 - 00:00:54:23
I've done some prior work here,
but I'm just going to explain

00:00:54:25 - 00:01:00:19
what I've done.

00:01:00:22 - 00:01:01:24
What we're focusing on

00:01:01:24 - 00:01:09:10
is this formatting rules section here.

00:01:09:13 - 00:01:12:11
So the formatting rules are
what actually allows us

00:01:12:11 - 00:01:17:28
to format the contents of our fields
or our variables in a certain way.

00:01:18:00 - 00:01:20:11
These lines we've got
here are the primarily

00:01:20:11 - 00:01:24:25
accepted terms
within Form Builder's formatting rules.

00:01:24:28 - 00:01:26:02
Let's go through some of these.

00:01:26:02 - 00:01:29:16
We've got the tagline,
and that is the name of this particular

00:01:29:16 - 00:01:32:29
formatting rule,
and we'll use this to assign

00:01:32:29 - 00:01:36:25
the defined rule to both fields
and to variables.

00:01:36:25 - 00:01:40:23
And we'll see how to do this later on.

00:01:40:25 - 00:01:42:09
Next down is type.

00:01:42:09 - 00:01:45:24
This allows you to define
what is allowable within that rule.

00:01:45:26 - 00:01:50:02
So for example, we have number here
and that will allow only

00:01:50:02 - 00:01:54:02
numeric input letters will not be placed
within the field at all.

00:01:54:02 - 00:01:58:23
So it just will not allow you to type
them.

00:01:58:25 - 00:02:00:10
We've got regex.

00:02:00:10 - 00:02:03:16
So this section defines
a regular expression pattern.

00:02:03:22 - 00:02:07:13
The specifies
the format that the input should match.

00:02:07:15 - 00:02:11:18
So for example,
this regex term that we've got here

00:02:11:20 - 00:02:13:28
represents a pattern for a phone number

00:02:13:28 - 00:02:19:06
format
where the first three digits are grouped,

00:02:19:09 - 00:02:21:26
followed by the next three digits

00:02:21:26 - 00:02:26:20
and then the last four digits

00:02:26:22 - 00:02:28:07
coming down to the parts line.

00:02:28:07 - 00:02:31:21
This section specifies
how the matched parts of the input

00:02:31:25 - 00:02:35:05
as defined in the regex line
should it be formatted.

00:02:35:08 - 00:02:38:08
So in this example, we've got

00:02:38:12 - 00:02:40:00
this string here.

00:02:40:00 - 00:02:43:12
This specifies the desired formatting
for the phone number

00:02:43:14 - 00:02:48:23
where $1, $2 and $3 represents

00:02:48:23 - 00:02:54:19
the matched groups from the regex pattern
corresponding to the first three digits,

00:02:54:19 - 00:02:59:29
the next three digits
and the last four digits respectively.

00:03:00:02 - 00:03:02:21
This formatting rule applies parentheses

00:03:02:21 - 00:03:07:11
around the first three
digits, adds a space

00:03:07:13 - 00:03:10:13
and then formats the next three digits

00:03:10:14 - 00:03:13:24
followed by a hyphen
and then the last four digits.

00:03:13:27 - 00:03:20:02
So you can see how it's representing group
one here, the group one there,

00:03:20:05 - 00:03:22:29
group two two

00:03:22:29 - 00:03:25:24
and so on.

00:03:25:24 - 00:03:29:09
Please note
that regex is not an Infigo specific term.

00:03:29:09 - 00:03:33:03
There are many resources available
on the web to aid you in the construction

00:03:33:08 - 00:03:41:02
of these terms.

00:03:41:05 - 00:03:41:16
Okay.

00:03:41:16 - 00:03:48:04
So we're also going to create a variable
within this script config.

00:03:48:06 - 00:03:51:00
So we're not going to show you how
to do this in this particular tutorial.

00:03:51:00 - 00:03:54:02
How to accomplish
the creation of a variable is covered in

00:03:54:02 - 00:03:59:09
other resources on the Infigo Academy.

00:03:59:11 - 00:04:02:11
The only difference here
to what we've covered in other tutorials

00:04:02:16 - 00:04:05:23
is the use of use formatting rules

00:04:05:23 - 00:04:09:07
as a term
to the end of our variable configuration.

00:04:09:09 - 00:04:10:11
So all I've done is added

00:04:10:11 - 00:04:14:10
an additional line to the end
of my variable configuration here

00:04:14:12 - 00:04:19:03
and we input the name into here,
matching the tag field

00:04:19:05 - 00:04:22:01
of the formatting rule
that we wish to utilize.

00:04:22:01 - 00:04:22:21
And what it means

00:04:22:21 - 00:04:31:11
is that this particular variable
will utilize these formatting rules.

00:04:31:13 - 00:04:31:26
All right.

00:04:31:26 - 00:04:37:15
So with that configured, I'm
just going to go ahead and save

00:04:37:18 - 00:04:42:00
and then relaunch our MegaEdit product.

00:04:42:02 - 00:04:44:29
So we're going to start off
by applying this defined formatting

00:04:44:29 - 00:04:49:01
to an entire field
that is going to contain a phone number.

00:04:49:04 - 00:04:51:11
So within MegaEdit, configure

00:04:51:11 - 00:04:54:25
a text field in the usual method
when using the Form Builder.

00:04:54:25 - 00:04:59:08
So a complete field,
so such as a single line of text

00:04:59:15 - 00:05:03:01
and not one where any variables
are going to be used requires

00:05:03:01 - 00:05:06:20
you only to input the tag
name of the formatting rule

00:05:06:26 - 00:05:11:18
as a tag field.

00:05:11:20 - 00:05:13:16
So this is done
just by going to the advanced

00:05:13:16 - 00:05:16:16
configuration options
for that particular field,

00:05:16:20 - 00:05:22:09
going down to the field tag section
and then inputs the name

00:05:22:11 - 00:05:25:02
of that formatting rule
that we've specified.

00:05:25:02 - 00:05:28:18
I'm going to take this name here,

00:05:28:20 - 00:05:30:14
enter it into a new field tag,

00:05:30:14 - 00:05:35:18
and click the plus icon.

00:05:35:20 - 00:05:38:26
As soon as that's been done,
the formatting rule will take effect.

00:05:38:28 - 00:05:39:14
So you'll see.

00:05:39:14 - 00:05:43:11
Now, if I start adding additional
characters to here, I can't apply letters.

00:05:43:11 - 00:05:47:14
It simply won't allow me to type them in
If I start applying more numbers.

00:05:47:17 - 00:05:51:08
Once it reaches
the required number of characters,

00:05:51:10 - 00:05:58:27
we can see that
the formatting rule takes effect

00:05:59:00 - 00:06:00:24
now through an actual variable.

00:06:00:24 - 00:06:06:00
So such as this one here, where
we've put a variable into a field,

00:06:06:03 - 00:06:08:16
the work has actually already been done.

00:06:08:16 - 00:06:11:16
So simply ensure that the variable is
added in the usual way

00:06:11:21 - 00:06:14:16
for the Form Builder,
which is seen in other tutorials.

00:06:14:16 - 00:06:17:06
Remember that we already defined
which formatting rule

00:06:17:06 - 00:06:24:18
this variable was going to
use within the script config.

00:06:24:21 - 00:06:26:17
If I start

00:06:26:17 - 00:06:29:17
applying additional numbers

00:06:29:24 - 00:06:33:01
again when we reach the required amount,
the formatting takes effect.