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.
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.
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.
3. Upload your CSV
4. 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
6. Click on Product Management
Next, we'll navigate to the Form Builder script config for our product
7. Click on MegaEdit
8. Click on Scripts
9. 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": ""
}
],
}
11. Click on Save and Continue Edit
12. Launch the product in MegaEdit
13. Click on Custom Tab
14. Create and perform the basic Form Builder configuration of a text field
15. 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.
17. 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.
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.
20. Select an entry from the dialog
21. 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
23. Click on United Kingdom | 44
