Configuring basic variable text within the Form Builder | FB_014

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.

Once launched, we will leave this product for now and conduct some configuration of the Form Builder script.

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.

This will take us to the global configuration of the Form Builder script.

Clicking Edit instead of Global Config will take you to a screen showing full details of the 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.

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

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++].

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.

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.

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.

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.

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.

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.

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.

If required, enter text to appear on a tool tip to assist your end users.

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.

We'll begin with some of the basic configuration options within the Form Builder

In order to use our defined variables, select Variable Text from the dropdown.

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.

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.