Building readable lists in your Forms

Documents sometimes require a number of items to be formatted as a list. For example, when entering multiple individuals for a document you may want them to be displayed in a list as ‘Peter, Mary-Jane and Harry’. To achieve this outcome regardless of how many people or items are in the list, we have a short piece of script which can be managed using the Logic Builder.

If you aren’t quite so au fait with JavaScript, you might want to try creating a formatted list in your template using our Word Add-in. For more information see our guide.

You can also see here for more information on repeat sections.

Creating a simple List for a repeated field

For the simple case where we are building a list from one of the repeated fields in a repeat section, follow these steps:

1. After you have created a form with a repeat section that collects the data you want to add to the list, make a note of the field name of the field whose values you will be using to build your list. This is the 'source' or 'input' field.
2. Also note the field name for your repeat.
3. Add a text box field outside of the Repeat Section. This will be the field which stores your formatted list (the ‘script’ or ‘output’ field)
4. Click on the output field to open its properties.
5. From there open the Logic tab and click the '+Add Logic' button.
6. Under Trigger select 'JavaScript' from the list and add the following script, replacing Repeat_rpt with the field name of your repeat:

var rpt = data.Repeat_rpt;
result = rpt !== undefined ? true : false;

7. Now click '+Add Action', select 'Value' from the list and add the following script, replacing Field_txt with your input's field name and Repeat_rpt with the field name of your repeat:

var rpt = data.Repeat_rpt;
var Arr = [];
var string = '';

for (i=0;i<rpt.length;i++){
  var input = rpt[i].Field_txt;
  if (input !== '') {Arr.push(input)}
}

if (Arr.length>0) { string = Arr[0] }
if (Arr.length>1) {
  for (i=1;i<Arr.length-1;i++) {
    string += ', ' + Arr[i];
  }
  string += ' and ' + Arr[Arr.length-1];
}

value = string;

8. Give your action and Logic block names and save both the action and the logic, before saving the field
9. Save and open your form to verify that the list is being built correctly.
10. Congratulations, you have built a simple readable list in your form!

Understanding the script

Having a look at the main script added to the action block above, you may note that there are four distinct sections to the script.

The first section defines most of our variables.

The second loops over each row of the repeat, pushing a new input into the Array when the input for that row is not empty.

The third section builds the list by looping over each element of the array (aside from the first and last elements) and adding them to the list (the variable 'string') with a comma delimiter. For the first element of the Array no delimiter is added, and for the last element, the final ' and ' delimiter is added.

Finally, the value of the output field is set to the string built in the third section.

Whilst it would be possible to merge sections two and three for this particular script, by splitting them up we can make adjustments easier, particularly in section two, where we can add data from outside the repeat to the Array to make up part of our list.

Going Further

Here are some examples of modifications to the above script which will allow you to create a more complex list.

Using Two Repeats

To build a list from similar values in separate repeats, you would follow the same process as above except:

• At Step 6 use the following script, where Repeat1_rpt and Repeat2_rpt will need to be replaced by your own repeat names:

var rpt1 = data.Repeat1_rpt;
var rpt2 = data.Repeat2_rpt;
result = (rpt1 !== undefined || rpt2 !== undefined) ? true : false;

• And at Step 7 use the following script, where Field1_txt and Field2_txt will need to be replaced by your field names, as well as Repeat1_rpt  and Repeat2_rpt:

var rpt1 = data.Repeat1_rpt;
var rpt2 = data.Repeat2_rpt
var Arr = [];
var string = '';

for (i=0;i<rpt1.length;i++){
 var input1 = rpt1[i].Field1_txt;
 if (input1 !== '') {Arr.push(input1)}
}
for (i=0;i<rpt2.length;i++){
 var input2 = rpt2[i].Field2_txt;
 if (input2 !== '') {Arr.push(input2)}
}

if (Arr.length>0) { string = Arr[0] }
if (Arr.length>1) {
 for (i=1;i<Arr.length-1;i++) {
 string += ', ' + Arr[i];
 }
 string += ' and ' + Arr[Arr.length-1];
}

value = string;

Build a list from a checkbox group

To create a readable list of selected answers to a checkbox group you would use the following in the trigger and action blocks for the script field, replacing Field_chk with your checkbox group field name:

For the Trigger select 'JavaScript' from the list and add the following script:

var input = data.Field_chk;
result = input !== undefined ? true : false;

For the Action select 'Value' from the list and add the following script:

var input = data.Field_chk;
var Arr = input.split(',');
var string = '';

if (Arr.length>0) { string = Arr[0].replace(',', '') }
if (Arr.length>1) {
  for (i=1;i<Arr.length-1;i++) {
    string += ', ' + Arr[i].replace(',', '');
  }
  string += ' and ' + Arr[Arr.length-1].replace(',', '');
}

value = string;

If you have an option in your checkbox group designated 'other' with a free text box for the user to add their own value, you can include that value by adding the following script on the penultimate line (where you will have to replace Other_Field_txt with the field name of your own 'other' input):

if (string.includes('other')) {
 string = string.replace('other', '') + data.Other_Field_txt;
}

Further Tips

To hide the list being built we suggest using the hidden property on the target field.

If you have any trouble with this script, you can submit a support request at the top of this page.