Show details for Configuring text inputs | IV_007

Configuring text inputs | IV_007

In this tutorial, we will learn how to set up and configure text frames, where the contents are driven from one of our form fields.

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:08 - 00:00:14:23
In this tutorial, we're going to learn
how to set up and.

00:00:14:23 - 00:00:16:27
Configure text variables and.

00:00:16:27 - 00:00:22:07
Text frames where the contents of a text
frame are driven from one of our form.

00:00:22:07 - 00:00:25:28
Fields via a variable.

00:00:26:12 - 00:00:28:28
We'll start off by creating our variable.

00:00:28:28 - 00:00:34:28
So within the Invent plugin window
in Adobe InDesign, go to the variables.

00:00:34:28 - 00:00:39:04
Tab and click on add variable.

00:00:40:06 - 00:00:41:05
That brings up a few.

00:00:41:05 - 00:00:43:17
Different variable options
you. Can choose from.

00:00:44:03 - 00:00:45:08
And in this case, we're going to.

00:00:45:08 - 00:00:47:08
Go for a text variable.

00:00:51:24 - 00:00:52:27
Will begin by typing.

00:00:52:27 - 00:00:54:21
A variable name.

00:01:04:06 - 00:01:06:02
And then we need to select the variable.

00:01:06:02 - 00:01:06:19
Mode.

00:01:06:19 - 00:01:09:03
So we'll save this three options in there.

00:01:09:03 - 00:01:11:19
So for the text variable,
I also get the option.

00:01:11:19 - 00:01:14:12
To select if we should have a single.

00:01:14:12 - 00:01:16:23
Line multi-line or a rich.

00:01:16:23 - 00:01:18:10
Text mode input.

00:01:19:11 - 00:01:20:22
Depending on what you select

00:01:20:22 - 00:01:23:28
here, it will change the form control
that it is going to be.

00:01:23:28 - 00:01:25:23
Using on the form.

00:01:25:23 - 00:01:27:28
So a single line will. Show
you a single text.

00:01:27:28 - 00:01:29:23
Box multi-line will show.

00:01:29:23 - 00:01:31:26
You a text area input.

00:01:31:26 - 00:01:32:17
And then a rich.

00:01:32:17 - 00:01:35:15
Text will show you a. Text area input.

00:01:35:29 - 00:01:37:06
But with some font.

00:01:37:06 - 00:01:38:12
Editing controls like.

00:01:38:12 - 00:01:41:07
Color, font and size that.

00:01:41:07 - 00:01:44:07
Can be applied to the text
that you input into

00:01:44:07 - 00:01:49:14
that form element.

00:01:49:14 - 00:01:52:24
In this case, I'm going to leave it
as a simple single line input.

00:01:53:07 - 00:01:54:11
And next we see we have.

00:01:54:11 - 00:01:57:01
The ability to populate some of the data.

00:01:58:06 - 00:01:58:26
So text.

00:01:58:26 - 00:02:00:25
Variables allow. A.

00:02:00:25 - 00:02:02:27
Repopulation of. Data based on.

00:02:02:27 - 00:02:04:07
The logged in account.

00:02:04:07 - 00:02:06:26
Of the user that's looking at the product.

00:02:06:26 - 00:02:09:00
And if you go in that. Dropdown,
you'll see it includes.

00:02:09:00 - 00:02:12:06
Data.
Such as names, addresses and. Emails.

00:02:13:09 - 00:02:14:12
So leave the text

00:02:14:12 - 00:02:17:03
variable blank, so nothing.

00:02:18:17 - 00:02:19:19
However, you do also have.

00:02:19:19 - 00:02:21:29
The ability
to put a default value in there.

00:02:21:29 - 00:02:22:17
So that will be.

00:02:22:17 - 00:02:24:25
The value shown in that field.

00:02:25:02 - 00:02:31:14
When the product first floats.

00:02:31:14 - 00:02:35:03
So let's say, for example,
we're going to do a name field.

00:02:35:03 - 00:02:47:12
I might say something
like for name surname.

00:02:47:12 - 00:02:50:12
So over on the right hand side
we have some UI information.

00:02:50:12 - 00:02:52:05
So user. Interface.

00:02:52:05 - 00:02:53:21
So first we've got the label.

00:02:53:21 - 00:02:56:03
That's the label
for this particular variable.

00:02:56:18 - 00:02:58:19
So I could have. That as.

00:02:58:19 - 00:02:59:13
The name of the.

00:02:59:13 - 00:03:01:24
Variable,
I could have it as an. Instruction.

00:03:01:24 - 00:03:02:24
So let's say enter.

00:03:02:24 - 00:03:06:28
Name, for example.

00:03:06:28 - 00:03:09:13
I have the ability.
To put in some help information.

00:03:09:14 - 00:03:10:27
If you need to provide some additional.

00:03:10:27 - 00:03:14:21
Information to the user
and some placeholder information.

00:03:16:06 - 00:03:19:03
Moving a bit further down the screen,
we have some validation.

00:03:19:03 - 00:03:20:11
Options.

00:03:20:15 - 00:03:23:02
So for single line and multi line,
we also.

00:03:23:02 - 00:03:23:20
Provide some.

00:03:23:20 - 00:03:27:19
Validation so that you can control
to a degree what type of.

00:03:27:19 - 00:03:29:11
Text you are expecting. The.

00:03:29:11 - 00:03:32:21
User to input within this variable.

00:03:32:21 - 00:03:37:08
A good example of this is if you create
a variable to accept an email address,

00:03:37:20 - 00:03:40:15
you can select our preset email Regex

00:03:41:07 - 00:03:42:22
down here

00:03:45:13 - 00:03:47:27
that will ensure that the user inputs
a valid.

00:03:47:27 - 00:03:50:04
Email address format.

00:03:50:04 - 00:03:53:05
You were also able to enter validation
for minimum a.

00:03:53:06 - 00:03:55:15
Maximum character count.

00:03:55:15 - 00:03:58:04
So for example,
if this is a name, I might say there's.

00:03:58:04 - 00:03:58:17
A minimum.

00:03:58:17 - 00:04:02:03
Character count of four characters
just to give it some validation

00:04:02:15 - 00:04:04:01
and to make sure that it can't be.

00:04:04:01 - 00:04:11:06
Blank.

00:04:11:06 - 00:04:13:11
We can see that
for any of those validation.

00:04:13:11 - 00:04:15:16
Steps, we have the ability to. Customize.

00:04:15:16 - 00:04:19:02
The message that's shown to our end users.

00:04:19:21 - 00:04:22:02
With all of those things
configured, we can. Click save.

00:04:23:01 - 00:04:23:12
Next.

00:04:23:12 - 00:04:26:20
We need to make
sure that one of our text frames on the.

00:04:26:20 - 00:04:28:16
Artwork itself, so on the canvas.

00:04:28:16 - 00:04:30:19
Itself is linked to.

00:04:30:19 - 00:04:32:07
That variable so that it shows.

00:04:32:07 - 00:04:34:26
The contents. Of that variable.

00:04:34:26 - 00:04:35:27
Now the example we've.

00:04:35:27 - 00:04:38:14
Set up here is to do with the. Name.

00:04:39:02 - 00:04:44:15
So if I go to this option here, which is
showing me the name on our business.

00:04:44:15 - 00:04:46:00
Card example.

00:04:46:02 - 00:04:48:15
And then go over to the. Properties tab.

00:04:48:15 - 00:04:50:15
You can see that's a text frame.

00:04:50:15 - 00:04:51:22
And if I click enable.

00:04:51:22 - 00:04:54:27
That enables that field to be controlled

00:04:54:27 - 00:04:59:01
dynamically using Invent.

00:04:59:01 - 00:05:01:14
There's a lot of different things
we can control on here.

00:05:01:14 - 00:05:03:14
So if I scroll down,
you can. See this things like.

00:05:03:14 - 00:05:04:24
Text, color.

00:05:04:24 - 00:05:06:29
Font size and font options.

00:05:06:29 - 00:05:09:07
In this case
we're going to keep it nice and simple.

00:05:09:07 - 00:05:10:27
Just with the text options.

00:05:11:26 - 00:05:13:02
Setting.

00:05:13:21 - 00:05:15:00
Currently it's unlinked.

00:05:15:00 - 00:05:17:29
So it's not linked to any of our resources
or. Variables.

00:05:17:29 - 00:05:19:18
But if I want to link it to the.

00:05:19:18 - 00:05:22:06
Variable that we just created,

00:05:22:06 - 00:05:23:21
I say. Variable.

00:05:23:21 - 00:05:26:02
It will show me
a list of relevant variables

00:05:27:02 - 00:05:29:12
and that is now linked.

00:05:30:13 - 00:05:34:02
With another option that we have.

00:05:34:03 - 00:05:35:10
Here, which is worth.

00:05:35:10 - 00:05:38:08
Considering is the fit. To box option.

00:05:38:27 - 00:05:43:07
So this will ensure that the size
of the box itself does not change.

00:05:43:17 - 00:05:45:22
But whatever
the contents of that box. Are,

00:05:45:23 - 00:05:48:15
it will try its best to fill that box.

00:05:48:23 - 00:05:50:01
So it will change the size of the.

00:05:50:01 - 00:05:52:00
Font to fill the box.

00:05:52:00 - 00:05:55:02
So if you've got something
like this scenario, so a business card

00:05:55:10 - 00:05:56:01
you might want it.

00:05:56:01 - 00:05:58:05
So the name covers as. Much of that area.

00:05:58:05 - 00:05:59:11
As possible.

00:05:59:12 - 00:06:00:05
Fit to box.

00:06:00:05 - 00:06:02:25
Will allow you to do. That
and if needed, you.

00:06:02:25 - 00:06:05:21
Can also enter some.
Some additional validation.

00:06:05:21 - 00:06:05:28
In the.

00:06:05:28 - 00:06:07:00
Forms of a minimum, a.

00:06:07:00 - 00:06:09:19
Maximum font size that is available.

00:06:11:01 - 00:06:11:16
From here.

00:06:11:16 - 00:06:12:16
We're just going to go ahead and.

00:06:12:16 - 00:06:18:11
Export that Mex file
that we can import into MegaEdit

00:06:25:02 - 00:06:26:11
So if we look over on the right hand

00:06:26:11 - 00:06:29:12
side there,
the variable will be shown in the form.

00:06:29:14 - 00:06:30:20
Within mega.

00:06:30:20 - 00:06:34:05
Edit one text is entered into the text box

00:06:34:05 - 00:06:37:12
in the form
the text frame on the product itself.

00:06:37:12 - 00:06:39:28
If I change the page will be populated.

00:06:39:28 - 00:06:42:09
With those contents.

00:06:42:09 - 00:06:43:26
We can also see, for example, that we.

00:06:43:26 - 00:06:45:28
Have our help. Text available.

00:06:45:28 - 00:06:48:12
Our UI name has been changed as we.

00:06:48:12 - 00:06:50:04
Specified and we should.

00:06:50:04 - 00:06:50:14
Have some.

00:06:50:14 - 00:07:10:02
Validation on here as well.

00:07:10:02 - 00:07:16:04
You can couple this functionality with the
application of additional restrictions.

00:07:16:04 - 00:07:18:18
On the text frame.

00:07:18:18 - 00:07:22:09
So for example,
we could do this in Invent itself.

00:07:22:09 - 00:07:22:18
We can.

00:07:22:18 - 00:07:25:14
Also do it
once the template has been. Imported.

00:07:25:14 - 00:07:27:00
I could limit the customer's.

00:07:27:00 - 00:07:29:16
Ability to actually select
this field at all.

00:07:30:00 - 00:07:33:03
And this ensures that the data
can only be entered via the form.

00:07:33:19 - 00:07:35:10
Not on the template self.

00:07:36:13 - 00:07:38:25
So for
example, if I couple that with the do not.

00:07:38:25 - 00:07:41:07
Select setting.

00:07:42:26 - 00:07:43:11
Which is already.

00:07:43:11 - 00:07:45:12
Active in this case,

00:07:45:16 - 00:07:47:07
if I emulate user mode to.

00:07:47:07 - 00:07:49:05
See how the actual.

00:07:49:05 - 00:07:52:27
End users would interact with this,
that is not.

00:07:52:27 - 00:07:53:18
Selectable.

00:07:53:18 - 00:07:56:21
So I can only enter data via

00:07:56:21 - 00:07:59:21
this form.

 

Incomplete
Step by Step Guide

Configuring text inputs

In this tutorial, we will learn how to set up and configure text frames, where the contents are driven from one of our form fields.

 
1
Click Add Variable
 
 

To start adding variables you simple need to navigate to the Variables tab in the Invent plugin panel and the click the 'Add Variable' button.

Click Add Variable
 
 
2
Click Select on Text Variable
 
 

The first thing you will be asked is what type of variable you would like to create. You can see the list of variables types available to you here but in this example we are going to create a Text Variable because we want to create a form that will ask the user for some text.

Click Select on Text Variable
 
 
3
Enter a variable name
 
 
Enter a variable name
 
 
4
Select a text variable mode
 
 

For the Text Variable I also get the option to select if it should be a Single Line, Multi Line or Rich Text 'Mode'.

 

Depending on what you select here it will change the form control that is used in the form. Single Line will show a single text box, Multi Line will show a text area input and then a Rich Text will show a text area input but with some font editing controls like colour, font and size that can be applied to the text you input in that form element.

Select a text variable mode
 
 
5
Select a data pre-population option
 
 

Text variables allow a pre-population of data based on the logged in account. This includes data such as names, addresses or emails.

 

To leave the text variable blank, select "Nothing".

Select a data pre-population option
 
 
6
Enter a default value, if required
 
 

This allows you to specify a default value for this variable.

Enter a default value, if required
 
 
7
Enter UI label information
 
 

This is the text that will display alongside the text box in the form UI.

Enter UI label information
 
 
8
Enter help text, if required
 
 

Help text will be shown alongside the text box in the UI and can be used to provide guidance and instruction.

Enter help text, if required
 
 
9
Specify field validation
 
 

For Single Line and Multi Line we also provide some Validation options so that you can control, to a degree, what type of text you are expecting the user to input here.

 

A good example of this is if you are creating a variable to accept an email address you can select our preset email Regex that will ensure the user inputs a valid email address format.

 

You are also able to enter validation for the minimum and maximum character count.

 

For any of these validation steps, you can customise the message shown to the end user.

Specify field validation
 
 
10
Save the variable and export the template as an MEX file (as covered in previous tutorials)
 
 
 
11
Click on highlight
 
 
Click on highlight
 
 
12
Import the MEX template and launch the MegaEdit product
 
 

The variable will be shown in the form within MegaEdit.

When text is entered into the text box in the form, the text frame on the product will be populated.

 

You can couple this will the application of additional restrictions on the text frame. By limiting a customers ability to select this field, you can ensure that data can only be entered via the form.

Import the MEX template and launch the MegaEdit product
 
Alternate Search Terms

add text field, create text input, single line text box, multi-line text area, rich text editor field, pre-fill form field, default text value, form field validation, email regex check, MegaEdit text variable setup, auto-fill customer details, pre-populate from account, load saved profile data, import user email automatically, pull stored address into form