Picture of Predefining a large number of custom entries in predefined text fields (Form Builder) | FB_027

Predefining a large number of custom entries in predefined text fields (Form Builder) | FB_027

Here, we'll take a look at creating predefined text fields where the contents are populated via CSV. This is particularly useful when there are a long list of options, for which manual specification of each is not a viable solution. We'll also take a look at the configuration options surrounding this capability, such as giving the user the option to search in this extended list of entries.

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:05:15 - 00:00:06:28
Here, we'll take a look at creating

00:00:06:28 - 00:00:11:08
predefined text fields
where the contents of populated via CSV.

00:00:12:00 - 00:00:15:24
This is particularly useful when there is
a long list of available options

00:00:16:00 - 00:00:19:25
for which manual specification of each
is not a viable solution.

00:00:20:18 - 00:00:23:04
We'll also take a look
at the configuration options

00:00:23:04 - 00:00:26:15
surrounding this capability,
such as giving the user the option

00:00:26:15 - 00:00:29:15
to search
in this extended list of entries.

00:00:31:28 - 00:00:32:20
We will begin

00:00:32:20 - 00:00:35:25
by uploading our CSV to the Infigo system.

00:00:36:10 - 00:00:39:14
To do this, I'm
going to go to my global additional data

00:00:39:14 - 00:00:42:14
area of the admin.

00:00:43:00 - 00:00:45:29
If you can not access this area
on your storefront,

00:00:45:29 - 00:00:49:02
please contact customer support
who can enable this for you.

00:00:54:28 - 00:00:55:23
We need to make sure

00:00:55:23 - 00:00:59:21
that our CSV is correctly formatted
so data for

00:00:59:21 - 00:01:03:18
this should be within
label and value columns.

00:01:04:03 - 00:01:08:13
The label is a string displayed
in the user facing form itself,

00:01:08:24 - 00:01:13:18
and the value is a string that displayed
within the field on the canvas itself.

00:01:17:11 - 00:01:19:03
Back in our global additional

00:01:19:03 - 00:01:22:22
data screen, we just need to make sure
that we're uploading this CSV.

00:01:22:23 - 00:01:25:26
We can do this just by dragging
and dropping the CSV documents

00:01:26:07 - 00:01:29:07
onto this area
or by clicking and uploading.

00:01:34:03 - 00:01:35:27
You can see in my case,
I've already uploaded

00:01:35:27 - 00:01:38:27
a couple of versions of the CSV.

00:01:42:03 - 00:01:43:10
Now we do need to remember

00:01:43:10 - 00:01:47:16
the name of our CSV,
and that includes the DOT CSV extension.

00:01:47:24 - 00:01:51:02
We'll need this later
for the script config.

00:01:52:21 - 00:01:55:21
So in this case, calling codes dot CSV.

00:01:59:19 - 00:02:01:25
Next, we'll navigate to the Form
Builder script

00:02:01:25 - 00:02:04:25
config of our particular product.

00:02:07:24 - 00:02:10:29
So you can see my completed config here
and I'll just talk you through

00:02:11:00 - 00:02:11:27
what I've done.

00:02:11:27 - 00:02:16:05
So we've added a predefined text section
and then this format below

00:02:16:05 - 00:02:19:16
it will ensure that
a predefined text entry

00:02:19:20 - 00:02:23:17
which is looking at your
uploaded CSV for its values.

00:02:24:16 - 00:02:27:16
the available fields are custom
target tag.

00:02:27:21 - 00:02:31:11
This is a name associated
with the predefined text option

00:02:31:19 - 00:02:35:07
and this will be visible in the UI
when configuring your product

00:02:35:07 - 00:02:38:07
using the Form Builder

00:02:38:20 - 00:02:41:05
you've got use CSV.

00:02:41:05 - 00:02:45:01
This is a true or a false value stating
if an uploaded CSV

00:02:45:13 - 00:02:48:13
is to be read.

00:02:48:23 - 00:02:50:20
We've got a CSV path.

00:02:50:20 - 00:02:52:28
You can enter the name of your CSV

00:02:52:28 - 00:02:56:02
as it was uploaded
to the global additional data area.

00:02:56:10 - 00:03:01:01
And remember, this includes the dot
CSV extension we've got use dialog.

00:03:01:02 - 00:03:05:18
This is a true or false value
that will activate a user friendly dialog

00:03:05:18 - 00:03:09:13
to navigate through those options
instead of just a simple dropdown

00:03:14:17 - 00:03:15:14
show search.

00:03:15:14 - 00:03:17:05
This is a true or false value

00:03:17:05 - 00:03:20:27
that will activate a search feature
within the dialog Allowing your users

00:03:20:27 - 00:03:25:10
to quickly sift through large amounts of
provided data from your CSV.

00:03:29:20 - 00:03:31:04
And then we have dialog title.

00:03:31:04 - 00:03:34:22
This is just a named title
given to the dialog pop up

00:03:35:02 - 00:03:38:02
useful for providing instructions

00:03:41:16 - 00:03:41:27
With this

00:03:41:27 - 00:03:44:27
information
specified, click on Save and continue edit

00:03:45:09 - 00:03:48:09
and then launch the MegaEdit product.

00:03:49:28 - 00:03:50:23
So on this product

00:03:50:23 - 00:03:54:08
we've added a text frame
and given it a name.

00:03:55:01 - 00:03:58:01
Now we'll start configuring it
for our predefined text.

00:03:58:15 - 00:04:02:01
If I make sure I'm on my custom tap,
go to the advanced settings

00:04:02:01 - 00:04:05:01
of that particular field.

00:04:07:00 - 00:04:07:17
I'm going to choose

00:04:07:17 - 00:04:10:17
a field type of predefined text

00:04:13:05 - 00:04:16:03
and then from the option
that appears here called

00:04:16:03 - 00:04:20:26
predefined text options,
we can select the required named sections.

00:04:21:07 - 00:04:25:02
So in our example,
the calling code's name is available

00:04:25:10 - 00:04:29:19
taken from the customer
target tagline of our script config.

00:04:29:19 - 00:04:31:16
Remember that
there's other configuration options

00:04:31:16 - 00:04:34:27
we can specify as well, such as making
sure it's a single line of text

00:04:35:05 - 00:04:38:03
and if I don't want them available,
no formatting options.

00:04:42:21 - 00:04:45:00
So whilst we were doing all this,
you may have noticed that

00:04:45:00 - 00:04:49:29
a new form entry appeared
over on the right hand side clicking.

00:04:49:29 - 00:04:54:02
This will result in a different behavior
based on whether you requested a dialog

00:04:54:02 - 00:04:55:06
or not.

00:04:55:06 - 00:04:59:06
By default, this will display
a dropdown list if a dialog was enabled,

00:04:59:08 - 00:05:02:08
a separate window like this will appear

00:05:03:18 - 00:05:06:18
and you can select an entry
from this dialog.

00:05:10:27 - 00:05:12:09
You can see the field on

00:05:12:09 - 00:05:15:09
the canvas is updated

00:05:16:27 - 00:05:20:02
if enabled the search function,
which you'll see at the top here.

00:05:20:08 - 00:05:24:15
Why To quickly sift
through data that's provided by the CSV.

 

Incomplete
Step by Step Guide

Predefining a large number of custom entries in predefined text fields (Form Builder) | FB_027

Here, we'll take a look at creating predefined text fields where the contents are populated via CSV. This is particularly useful when there are a long list of options, for which manual specification of each is not a viable solution.

We'll also take a look at the configuration options surrounding this capability, such as giving the user the option to search in this extended list of entries.

Creation Date: Mar 21, 2024
Created By: Sam Webster

1. Navigate to Global Additional Data

We will begin by uploading our CSV to the Infigo system. This is done in the Global Additional Data section. If you cannot access this on your Storefront, please contact Customer Support who can enable it for you.

Navigate to Global Additional Data

2. Ensure your CSV is correctly formatted

Data should be within "Label" and "Value" columns.

The Label is the string displayed in the user-facing form.

The Value is the string displayed within the field on the canvas.

Ensure your CSV is correctly formatted

3. Upload your CSV

Upload your CSV

4. Click on Calling Codes.csv

Click on Calling Codes.csv

5. Remember the name of your CSV (including the .csv extension). We will need this later for the product script config

Remember the name of your CSV (including the .csv extension). We will need this later for the product script config

6. Click on Product Management

Next, we'll navigate to the Form Builder script config for our product

Click on Product Management

7. Click on MegaEdit

Click on MegaEdit

8. Click on Scripts

Click on Scripts

9. Click on Config

Click on Config

10. Populate the script config with predefinedText

The format shown below will ensure a predefinedText entry which is looking at your uploaded CSV for its values.

The available fields are:

  • customTargetTag | This is the name assigned to this predefinedText option. This will be visible in the UI when configuring your product using the Form Builder

  • useCSV | a true or false value stating if an uploaded CSV is to be read

  • csvPath | Enter the name of your CSV as it was uploaded to the Global Additional Data area, including the ".csv" extension

  • useDialog | A true or false value that will activate a user friendly dialog to navigate through the options, instead of a simple dropdown list

  • showSearch | A true or false value that will activate a search feature within the dialog, allowing your users to quickly sift through large amounts of provided data from your CSV.

  • dialogTitle | A named title given to the dialog pop up, useful for providing instruction

Here is the format, suitable for copy/pasting:

{

predefinedText: [

{

"customTargetTag": "",

"useCSV": ,

"csvPath": "",

"useDialog": true,

"showSearch": true,

"dialogTitle": ""

}

],

}

Populate the script config with predefinedText

11. Click on Save and Continue Edit

Click on Save and Continue Edit

12. Launch the product in MegaEdit

Launch the product in MegaEdit

13. Click on Custom Tab

Click on Custom Tab

14. Create and perform the basic Form Builder configuration of a text field

Create and perform the basic Form Builder configuration of a text field

15. Select Predefined text

Select Predefined text

16. From predefined options, select the required named sections

In our example, the CallingCodes name is available, taken from the customerTargetTag line of our script config.

From predefined options, select the required named sections

17. Select Single line text

Select Single line text

18. Check No formatting options

Remember that the usual formatting options are still available when using predefined text. Here, for example, we will restrict our end users from modifying the fields formatting.

Check No formatting options

19. An entry will appear on the form

Clicking this will result in different behaviour based on whether you requested a dialog or not.

By default, this will display a dropdown list. If a dialog was enabled, a separate window will appear.

An entry will appear on the form

20. Select an entry from the dialog

Select an entry from the dialog

21. The field on the canvas will be updated

The field on the canvas will be updated

22. If enabled, a search function will allow you to quickly sift through data provided by the CSV

If enabled, a search function will allow you to quickly sift through data provided by the CSV

23. Click on United Kingdom | 44

Click on United Kingdom | 44

Individual Search Words:

upload, CSV, predefined, populate, dialog, dropdown, search, entries, configuration, options

Alternate Search Phrases:

import CSV options, populate dropdown from CSV, predefined text field CSV, upload CSV data, CSV for form builder, predefined options CSV, text field from CSV, CSV entries search, configure CSV dropdown, large list predefined options