00:00:05:15 - 00:00:07:23
This tutorial
will continue the configuration
00:00:07:23 - 00:00:11:11
of our basic sample product
using the Infigo form builder.
00:00:11:14 - 00:00:14:27
In this section, we'll take a look at
configuring some additional text fields,
00:00:14:27 - 00:00:21:12
providing customers with a specific set
of customization, options and input types.
00:00:21:14 - 00:00:26:15
This tutorial follows on from FB 006,
which looks at
00:00:26:15 - 00:00:31:02
just configuring this one single
one text field to deal with the name.
00:00:31:04 - 00:00:33:12
You can see that prior
to the start of this tutorial
00:00:33:12 - 00:00:38:15
we've added a few additional text fields
which only have limited formatting so far,
00:00:38:18 - 00:00:43:19
and this covers the job title,
email address and an address.
00:00:43:22 - 00:00:47:08
We've also got a very small one down the
bottom here, which is dealing with a date.
00:00:47:10 - 00:00:50:15
This is just going to show how we can
automatically populate dates in here.
00:00:50:15 - 00:00:54:01
So you can see that we've done some pre
customization of this that's just on using
00:00:54:01 - 00:00:58:19
the usual method of double clicking
and using these formatting options.
00:00:58:21 - 00:01:03:24
So things such as the fonts, the text size
and the place hold
00:01:03:24 - 00:01:07:09
the text have been changed
to match the intent of that field.
00:01:07:11 - 00:01:10:17
Besides these changes,
the fields are all in their default state.
00:01:10:19 - 00:01:12:14
We can see there's
no sign of them at present
00:01:12:14 - 00:01:14:23
on the main form over on the right hand
side,
00:01:14:23 - 00:01:21:14
apart from the name that we specified
in the previous tutorial.
00:01:21:16 - 00:01:23:02
All right, so what we're going to start
doing
00:01:23:02 - 00:01:26:14
is configuring all of these new fields
00:01:26:20 - 00:01:30:07
on the form builder.
00:01:30:10 - 00:01:33:19
If I go over to the custom tab,
you can see that we've got a range
00:01:33:19 - 00:01:38:12
of additional fields here
which currently have nothing specified.
00:01:38:15 - 00:01:42:24
The first thing I might want to do
is to apply a name to all of these fields
00:01:42:26 - 00:01:47:10
so I can click on the icon to the left
of the field to identify which one it is.
00:01:47:13 - 00:01:57:11
Then enter a field name.
00:01:57:14 - 00:01:58:04
And I'm going to do this
00:01:58:04 - 00:02:02:20
for all of the remaining fields.
00:02:02:23 - 00:02:04:20
Next, we want to make sure that things are
00:02:04:20 - 00:02:08:25
in the correct order that I expect them
to be in the actual form themselves.
00:02:08:26 - 00:02:11:02
So although we're not showing things
on the form at the moment,
00:02:11:02 - 00:02:14:10
we can control the order
in which they will appear on the form.
00:02:14:12 - 00:02:17:02
So I'm just going to make sure that the
00:02:17:05 - 00:02:20:14
the ordering is lower numbers for fields.
00:02:20:14 - 00:02:27:17
I want to the towards the top of the form.
00:02:27:19 - 00:02:27:29
Okay.
00:02:27:29 - 00:02:29:13
So with those basic jobs done,
00:02:29:13 - 00:02:33:15
let's take a look at some of these
in a little bit more detail starting off
00:02:33:15 - 00:02:37:07
with our job title field
that we've got here.
00:02:37:09 - 00:02:41:22
So our intent with this field
is to provide a single line input.
00:02:41:24 - 00:02:46:02
The user will also have the ability to
delete this field should they not need it.
00:02:46:05 - 00:02:49:12
In addition, the user will have
the ability to make this text bold,
00:02:49:12 - 00:02:53:07
so that's the only formatting options
they're going to have.
00:02:53:09 - 00:02:55:25
So let's start off
by going to the more advanced settings
00:02:55:25 - 00:02:59:17
for this fields, just by hitting the gear
icon on the right hand
00:02:59:17 - 00:03:03:14
side,
00:03:03:17 - 00:03:06:22
I'm going to select the appropriate
interactivity options.
00:03:06:22 - 00:03:10:13
So as we said, we want the customer
to have the ability to do this.
00:03:10:16 - 00:03:13:10
So I'm going to find the appropriate icon.
00:03:13:12 - 00:03:14:16
I also need to be able to get
00:03:14:16 - 00:03:18:07
them to interact and select
that particular field.
00:03:18:10 - 00:03:22:02
So I'll disable everything else
and leave those two enabled.
00:03:22:02 - 00:03:24:14
So we want this to be a single line
text field.
00:03:24:14 - 00:03:29:17
So I'm going to change my field
type to say single line text.
00:03:29:20 - 00:03:32:14
You can see that means it instantly
becomes available over on the right hand
00:03:32:14 - 00:03:36:26
side, but by default we have a whole range
of formatting options.
00:03:36:29 - 00:03:39:18
All we want to allow
in this particular field,
00:03:39:18 - 00:03:43:14
as mentioned before,
is the ability to make the text bold.
00:03:43:17 - 00:03:47:17
So I'm going to make sure
that everything else is disabled
00:03:47:19 - 00:03:56:02
just by clicking these toggles here.
00:03:56:05 - 00:04:05:11
You see that all we have is the ability
to make the text bold or not.
00:04:05:13 - 00:04:05:28
Okay, so the
00:04:05:28 - 00:04:08:28
title field is now configured
and ready for use on our form.
00:04:09:00 - 00:04:14:00
So next we're going to configure
the email field
00:04:14:03 - 00:04:16:25
our email field with have a
we'll have a slightly different
00:04:16:25 - 00:04:19:25
configuration options
available to the end user.
00:04:19:25 - 00:04:22:25
We wish to use it to be able
to change the text collar.
00:04:23:01 - 00:04:25:29
In addition,
we want to allow the user to open
00:04:25:29 - 00:04:29:11
the additional configuration pop up.
00:04:29:13 - 00:04:32:19
And just as a reminder of what this is,
is done by double clicking on the actual
00:04:32:19 - 00:04:37:06
field itself on the canvas and gives
access to a wider range of configuration
00:04:37:11 - 00:04:43:03
and interactivity options.
00:04:43:06 - 00:04:43:17
All right.
00:04:43:17 - 00:04:44:29
So let's go into the advanced settings
00:04:44:29 - 00:04:48:26
for the email field
and start changing our options.
00:04:48:28 - 00:04:51:06
So to allow the user to utilize
00:04:51:06 - 00:04:54:26
the configuration pop up,
we need to enable selection.
00:04:54:28 - 00:04:58:07
Choose
this one here and the pop up toggles.
00:04:58:09 - 00:05:05:05
Everything else can be
disabled as we don't need it.
00:05:05:08 - 00:05:08:08
As with the previous
field, we want this to be a single line
00:05:08:09 - 00:05:12:06
text and again,
we can control those formatting options.
00:05:12:06 - 00:05:15:02
So all we want
is the ability to change the text color
00:05:15:02 - 00:05:21:14
so I can make sure
everything else is disabled.
00:05:21:16 - 00:05:23:17
There
we can see over on the right hand side
00:05:23:17 - 00:05:26:17
that form entry is now fully configured.
00:05:26:22 - 00:05:30:00
If I start changing the font color,
00:05:30:03 - 00:05:32:24
you can see it changes the entire content
00:05:32:24 - 00:05:44:22
on the actual canvas.
00:05:44:25 - 00:05:45:06
All right.
00:05:45:06 - 00:05:50:04
So now we're going to configure
the address field.
00:05:50:07 - 00:05:52:23
The address
field will be a multi line input.
00:05:52:23 - 00:05:56:07
So this is slightly different,
allowing our users to insert
00:05:56:07 - 00:05:59:28
line breaks and enter
text over multiple lines.
00:06:00:00 - 00:06:03:05
All of the configuration options
will be unavailable to the end user,
00:06:03:05 - 00:06:08:29
so they have no formatting
of the actual text itself.
00:06:09:01 - 00:06:10:05
So this is easy to do.
00:06:10:05 - 00:06:14:19
I'm just going to go on no formatting
options And then in our actual field
00:06:14:19 - 00:06:19:05
type selection is going to be a multi line
text box.
00:06:19:08 - 00:06:21:19
We don't want to use it
to be able to do anything else either.
00:06:21:19 - 00:06:26:04
So move the
the frame or delete the frame or whatever.
00:06:26:07 - 00:06:36:07
So I'm just going to disable
all of the interactivity toggles.
00:06:36:10 - 00:06:36:25
And there you go.
00:06:36:25 - 00:06:38:04
You can see over on the right hand side
00:06:38:04 - 00:06:40:29
that our address field
is now fully configured.
00:06:40:29 - 00:06:46:13
So if I make any changes,
00:06:46:16 - 00:06:47:22
it will apply.
00:06:47:22 - 00:06:52:01
So you see there that we have some slight
formatting issue
00:06:52:01 - 00:06:53:18
when I've tried to change that.
00:06:53:18 - 00:06:55:21
One of the easiest ways
to fix something like this
00:06:55:21 - 00:06:58:24
and make sure it applies to the entire
field is to actually use
00:06:58:24 - 00:07:01:24
the formatting options
that appear on the form itself.
00:07:01:26 - 00:07:07:14
So temporarily I might say
I want to show the formatting options
00:07:07:17 - 00:07:07:29
this time.
00:07:07:29 - 00:07:10:28
I want it to be one particular color
so I can just select the color
00:07:10:28 - 00:07:14:16
I want it to be and then disable
the formatting options again.
00:07:14:16 - 00:07:16:25
But it will remember those settings
that we've defined.
00:07:16:25 - 00:07:20:25
Okay, so you remember hidden away
at the bottom of the screen
00:07:20:25 - 00:07:24:26
here, we've got one last field,
which is for a date.
00:07:24:29 - 00:07:27:19
We want maybe a date
on this actual document.
00:07:27:19 - 00:07:30:19
So this field will allow users
to pick a specific date
00:07:30:19 - 00:07:34:04
using a dedicated date picker
feature Users
00:07:34:04 - 00:07:37:24
will not be able to format this text
or manually input text into the field.
00:07:38:01 - 00:07:42:09
They'll only be able to select the date.
00:07:42:11 - 00:07:44:17
So let's make sure
we've selected the field and gone
00:07:44:17 - 00:07:48:17
to its advanced options.
00:07:48:19 - 00:07:52:04
I don't want them to be able to format
or change the interactivity,
00:07:52:04 - 00:08:00:29
so I'm just going to disable all the interactivity options and disable formatting.
00:08:01:02 - 00:08:02:08
So from the dropdown list,
00:08:02:08 - 00:08:06:03
this time I'm going to pick on a date
00:08:06:06 - 00:08:07:09
field type.
00:08:07:09 - 00:08:08:23
So it's very similar as the time.
00:08:08:23 - 00:08:09:22
So we're not going to over time
00:08:09:22 - 00:08:12:22
in this particular tutorial,
but it works in much the same way.
00:08:12:24 - 00:08:14:18
So when a pick date you'll see them.
00:08:14:18 - 00:08:17:00
we then get the ability
to select the format
00:08:17:00 - 00:08:19:12
in which we want the date to appear.
00:08:19:12 - 00:08:22:20
So you see by default it says day month,
which appears as a number
00:08:22:27 - 00:08:25:24
and then year which appears as a number.
00:08:25:24 - 00:08:30:21
We've also got the ability to specify
whether we want a day suffix on the end.
00:08:30:23 - 00:08:35:21
If that's not the format you're used to,
of course you can change that around.
00:08:35:24 - 00:08:40:06
Once we've got date selected, you can see
that our date picker is now populated.
00:08:40:08 - 00:08:45:23
If I go ahead and just utilize that, so
click on the calendar and pick a new date.
00:08:45:25 - 00:08:47:22
You can see
again, we've got some formatting issues
00:08:47:22 - 00:08:57:04
so I can prepare those in the same way
00:08:57:07 - 00:08:57:19
that you get.
00:08:57:19 - 00:09:00:03
You can see how our date has now
been populated.
00:09:00:03 - 00:09:00:12
All right.
00:09:00:12 - 00:09:03:14
So as we've seen,
we can interact with the form whilst
00:09:03:14 - 00:09:09:19
we're in administrator
mode to see how it actually functions.
00:09:09:22 - 00:09:12:19
However, we might actually want to test
00:09:12:19 - 00:09:15:28
how our end users are going to be able
to interact with the fields
00:09:15:28 - 00:09:16:29
that are on this form.
00:09:16:29 - 00:09:21:27
So if we've started really digging down
into these interactivity toggles,
00:09:22:00 - 00:09:25:11
so we want users to be able to interact
with some fields and not interact.
00:09:25:16 - 00:09:27:22
We want to test that situation.
00:09:27:22 - 00:09:29:27
So what we can do is go to menu
00:09:29:27 - 00:09:32:27
and go to emulate user mode.
00:09:32:27 - 00:09:36:07
Now it's important that I tell you
this does not fully replicate
00:09:36:13 - 00:09:38:17
what the end user is going to see.
00:09:38:17 - 00:09:41:28
So it's
covered in different tutorials, but
00:09:42:00 - 00:09:46:08
you may still see a lot of tabs
over on the left hand pane.
00:09:46:14 - 00:09:50:12
Whilst you're using emulate user mode,
whereas depending on how you've configured
00:09:50:12 - 00:09:54:22
your product, the end user might not see
this left tab at all.
00:09:54:24 - 00:09:56:03
So keep that in mind.
00:09:56:03 - 00:09:58:24
What emulate user mode allows you to do
is figure out
00:09:58:24 - 00:10:09:28
how users can interact with the fields
on the actual canvas itself.
00:10:10:01 - 00:10:11:10
So let's test a few of these
00:10:11:10 - 00:10:17:14
and see what we can
and can't interact with.
00:10:17:17 - 00:10:20:14
So you see, I've got the ability to do
pretty much anything with my name.
00:10:20:14 - 00:10:24:13
Fields I have not changed
its configuration options,
00:10:24:15 - 00:10:30:25
but limited options with the job title,
so I can't move it or anything.
00:10:30:25 - 00:10:33:29
I can't load the pop up,
but I can actually select the fields
00:10:34:03 - 00:10:40:29
and I can delete it if I want to as well.
00:10:41:01 - 00:10:43:20
The email I can select
and I can double click
00:10:43:20 - 00:10:48:00
to open up the configuration, pop up
00:10:48:03 - 00:10:51:17
and the address I can't select at all,
so I can't do anything with that.
00:10:51:17 - 00:11:03:01
Apart from entering information
via the form on the right hand side,
00:11:03:04 - 00:11:03:29
we want to get rid
00:11:03:29 - 00:11:07:06
of emulation mode
and go back to our administrator mode.
00:11:07:09 - 00:11:11:11
Just go to menu
and click on Emulate User mode again
00:11:11:13 - 00:11:13:29
if you want, you
want to see how your end users are going
00:11:13:29 - 00:11:17:20
to see this particular product,
So exactly how they're going to see it.
00:11:17:23 - 00:11:20:06
The best way to do
this is either to impersonate
00:11:20:06 - 00:11:24:20
that user Infigo admin
or to actually log in as that user.
