Show details for Building a form in Invent for use in MegaEdit | IV_009

Building a form in Invent for use in MegaEdit | IV_009

In this tutorial, we will learn how to build and customise the form your users will utilise to customise their products. In your form you can order add and remove your variables, re-order them, group them and choose where you would like them to be displayed to the user.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

00:00:12:27 - 00:00:13:08
In this

00:00:13:08 - 00:00:16:08
tutorial will learn how to build
and customize the form

00:00:16:08 - 00:00:19:13
your users will utilize
to customize their products.

00:00:20:17 - 00:00:24:06
In your form, you can order ads
and remove your variables.

00:00:24:18 - 00:00:25:23
Reorder them.

00:00:25:23 - 00:00:29:01
Group them and choose
where you would like them to be displayed

00:00:29:07 - 00:00:31:07
to your end user.

00:00:32:06 - 00:00:35:06
The first thing we need to do
is to navigate to the variables tab

00:00:35:13 - 00:00:40:10
and make sure that we actually have
some variables defined.

00:00:43:00 - 00:00:44:19
Once you've defined some variables,

00:00:44:19 - 00:00:46:24
click on the Setup Forms button,

00:00:47:29 - 00:00:51:08
which will bring up a separate window
which looks something like this.

00:00:52:13 - 00:00:57:06
Now what you'll see
by default will be a variable pool.

00:00:57:07 - 00:00:58:15
Over on the left hand side.

00:00:58:15 - 00:01:01:06
So that will be a list
of all of your available variables.

00:01:01:24 - 00:01:04:27
And then on the right hand
side is your currently constructed form.

00:01:06:01 - 00:01:07:02
By default, that

00:01:07:02 - 00:01:09:26
will just be a list
of all of your variables

00:01:10:05 - 00:01:13:28
displayed in one long form.

00:01:17:09 - 00:01:20:19
Now we have some customization options
for this particular form.

00:01:21:03 - 00:01:25:12
The first thing we could potentially do
is go to the switch icon, the top right,

00:01:26:00 - 00:01:29:15
which allows us to change the type of form
that's going to be utilized.

00:01:30:23 - 00:01:32:17
So there's three types of form.

00:01:32:17 - 00:01:35:22
We've got single form,
which is what we see by default

00:01:35:27 - 00:01:39:06
is just one form that covers
all of the pages

00:01:39:06 - 00:01:42:11
in our template.

00:01:42:11 - 00:01:44:15
We've got per page form,

00:01:44:15 - 00:01:47:11
so this displays a separate form

00:01:47:11 - 00:01:49:29
for each individual page in our product.

00:01:51:09 - 00:01:53:23
That means we can have separate

00:01:53:23 - 00:01:58:08
sets of variables displayed per page,
and then we've got no page form.

00:01:58:08 - 00:02:02:07
So where no form is displayed at all.

00:02:02:18 - 00:02:05:26
In addition to this,
we've also got a pop up form option

00:02:05:26 - 00:02:10:16
now that can be utilized alongside either
the single form or the per page form.

00:02:10:29 - 00:02:14:07
It just means that you get a pop up window
appearing with the form included,

00:02:14:17 - 00:02:18:02
rather than the form being embedded
on the right hand side of your

00:02:18:02 - 00:02:21:04
MegaEdit window.

00:02:23:18 - 00:02:24:19
For our example, I'm

00:02:24:19 - 00:02:29:12
just going to go for a per page form
and it's going to be mounted

00:02:29:16 - 00:02:32:00
on the right hand
side of my MegaEdit window.

00:02:32:01 - 00:02:34:07
So I'm going to make sure
a pop up is selected

00:02:35:13 - 00:02:38:23
and then click select
on the bottom, right?

00:02:38:23 - 00:02:41:10
Now what you can see is that there's now
separate columns

00:02:41:10 - 00:02:44:09
available for each page
within our document.

00:02:45:09 - 00:02:47:28
The document I have here
is a business card template.

00:02:47:28 - 00:02:49:20
So we've got one page

00:02:49:20 - 00:02:52:23
representing the front of the business
card, one representing the back,

00:02:53:13 - 00:02:59:16
and we can control which of the variables
are visible in each of these fields.

00:02:59:21 - 00:03:06:00
Each of these pages, in addition
to just having lists of variables,

00:03:06:00 - 00:03:09:00
we also have the group
icon down at the bottom here

00:03:09:16 - 00:03:13:01
that allows us to actually create groups
within individual pages.

00:03:14:02 - 00:03:15:24
So, for example, if I drag

00:03:15:24 - 00:03:18:16
and drop from the burger icon
or click on use

00:03:19:28 - 00:03:21:26
onto one of the pages

00:03:21:26 - 00:03:29:02
you can see that creates a group.

00:03:29:02 - 00:03:32:03
And then I am able to place
individual variables either

00:03:32:03 - 00:03:37:02
inside the group or outside of the group.

00:03:41:19 - 00:03:42:19
We also have the ability

00:03:42:19 - 00:03:44:29
to create multiple groups per page

00:03:51:23 - 00:03:54:12
and then we can create a separate form
on page two.

00:03:54:12 - 00:04:00:15
For example,
you have the ability to move the groups

00:04:00:15 - 00:04:03:18
and the variables around
using these icons.

00:04:03:18 - 00:04:09:03
Here.

00:04:09:03 - 00:04:14:15
And what it means is that you can build up
a very robust form which is very user

00:04:14:15 - 00:04:19:19
friendly with everything laid out
exactly as you like. It.

00:04:19:22 - 00:04:22:24
So the video will skip forward
now to a more completed version

00:04:22:29 - 00:04:25:28
of this form.

00:04:27:23 - 00:04:30:10
Now, what we can see from this
is that we've developed a form

00:04:30:10 - 00:04:36:10
which has multiple variables
visible per page, and page two,

00:04:36:11 - 00:04:40:03
which has by far
the most information, has nested groups

00:04:40:13 - 00:04:46:03
with very carefully positioned variable
to make sure that we have a sleek

00:04:46:03 - 00:04:49:28
user experience and it's very easy
to navigate your way around the form.

00:04:51:13 - 00:04:53:17
Now what we're going to do is export

00:04:54:10 - 00:04:57:25
this particular template as a MEX file

00:04:58:07 - 00:05:04:19
and import that into our MegaEdit product.

00:05:05:01 - 00:05:07:02
So over on the right hand
side of the screen now

00:05:07:02 - 00:05:10:12
you can see the formatted form
that we generated

00:05:11:08 - 00:05:14:19
the logos side, which was page
one has minimal information,

00:05:15:18 - 00:05:18:10
all contained within a logo side
titled group.

00:05:19:14 - 00:05:21:16
And then if I scroll across to page two,

00:05:22:07 - 00:05:25:10
you can see we have a different form
which appears

00:05:25:25 - 00:05:30:15
and they are grouped in different ways.

 

Incomplete