Configuring basic variable text within the Form Builder | FB_014

The basic tutorials on the Form Builder have covered dealing with the entire form. For example, we are providing a text box where the entire contents of that text box is controlled by one of our form fields. But what if we want to only change part of the text within a text field.

In this example, we'll cover this functionality by showing you how to configure basic variable text in the Form Builder. Our example will result in a text field which contains static text of "My name is", followed by variable text which is entered by the user on the form.

1. Create a product
In my example, I'm going to begin this process on a new product for clarity. You can of course complete this on a template you have already been working on.
2. Click on MegaEdit config
3. Click on Scripts
4. Ensure the Refactored Form Builder script is activated on the Product and save
5. Launch the MegaEdit product
Once launched, we will leave this product for now and conduct some configuration of the Form Builder script.
6. Click on MegaEdit config
7. Click on Scripts
8. Click to configure the Form Builder script instance on this particular Product
9. Script configuration
We have two options when configuring the Form Builder script. We can do it on a product by product basic (on the current screen), or, we can configure the script globally. This means any script alterations will apply to all products using the script.
10. Navigate to MegaEdit Scripts
11. Click on Global Config
This will take us to the global configuration of the Form Builder script.
12. See full configuration options
Clicking Edit instead of Global Config will take you to a screen showing full details of the script.
13. Form Builder Script
This is a very useful screen, detailing all the possible configuration options within the script. In addition, this script contains a vast array of notes, giving you insight into what the different elements do and how they are populated.
14. textVariableHandlingCustom
Enables the variable handling of form builder if set to true. If set to false, it will use the same functionality as the batch mode.
We will configure this on a per product basis
15. textVariablePrefix and textVariablePostfix
Controls the string of text that precedes and follows our variable name. This allows us to easily define where a variable is to be used on our product.
So, for example, if the prefix and postfix are "[++" and "++]" respectively, and the variable name is "Variable", our complete text string entered onto our template in order to use this variable is "[++Variable++].
16. textVariableLookup
This is how we can define our custom variables. In the script editor, you will see a range of informative text showing how this is configured and populated.
For our example, I'm going to copy this content as a template for our custom variable and paste it into the global configuration of our Form Builder script.
17. Paste selected text into text area
18. Specify a variable name
This is the name of the variable and will form part of the text you input into your template to utilise the variable. This field can be admin only and does not have to be displayed to your end users.
19. Define a label
This is the name that is associated with the variable and will be used as the label on the form shown to the end user.
20. Specify any predefined values
This does not have to be filled in, however if you would like the variable to show some predefined text, it can be specified here.
This can be static text, or you can utilise existing user data. For example, inputting "LoadUserData: FirstName,LastName" will populate the field with the name of the logged in user (if it has been defined on their account).
Available fields are listed in the script editor and include names, address fields and email.
21. Define the input type
This allows you to define the type of input this variable should be. For example "TextField" will provide a single line text input, and "DatePicker" will provide a calendar selection tool.
Available inputs are TextField, TextArea, DatePicker and TimePicker.
22. Optionally enter a placeholder
This is temporary text that is displayed in the form field in the event no other text is present. It serves as example text only.
23. Prefix and Suffix
Allows you to optionally define if any text should precede or follow the variable value. In our example, we'll input "--" so we can demonstrate this for clarity. This could be used for spacing, consistent static text and more.
One other use case is to automatically input a line break using /n. We'll cover this in more detail on another tutorial.
24. Enter optional help text
If required, enter text to appear on a tool tip to assist your end users.
25. Format the script config
If you try to save the script config in a non valid JSON format, the save will fail and issue a warning.
Make sure to amend the script into a suitable format, such as that seen here.
26. Click on Save and Continue Edit
27. Reload the MegaEdit product and add a text field
28. Click on Custom Tab
We'll begin with some of the basic configuration options within the Form Builder
29. Enter a name for the field
30. Enter the advanced configuration options for this field
31. Select Variable text
In order to use our defined variables, select Variable Text from the dropdown.
32. Any correctly defined variables will be displayed underneath the text cache input field.
33. Fill in the Field text cache field
This can be a combination of static text and variables. Make sure to include the variable prefix and suffix in order for it to register as a variable within the Form Builder.
As you enter text in here it will appear on the canvas.
34. Once a variable is entered into the Field text cache area, it will also become available in the main form
We can see in our example that the placeholder we specified is shown. No name has been automatically populated as the account used for this demo has no name assigned.
35. Typing into the form will populate the field on the canvas, including the prefix and suffix (if one has been specified)