Loading data from previous pages into dropdown lists

Ever wanted to use data from a repeat on one page of your form wizard as the options of a dropdown list on another page? Well you can! This article will walk you through a simple implementation, and slowly build up to more complex implementations.

Simple implementation

The simplest way to do this is to create an array of values from a repeat and use that array as the values for your dropdown list. The repeat must be on a previous page to the dropdown, otherwise, the options will not load.

This implementation allows you to use one identifier per-option. The user will be able to select the option directly from the list without any user-facing labels being visible or alternate text (mtext) being stored.

Simply go to the Data tab for the dropdown list and select 'Custom' as the Data Source Type. Then add the following script to the Custom Values box:

var rpt = data.Repeat_rpt;
var Arr = [];
if (rpt !== undefined && rpt !== null) {
  for (i=0;i<rpt.length;i++){
    var input = rpt[i].Field_Name_txt;
    Arr.push(input);
  }
}
values = Arr;

Make sure you change the variables rpt and input to match the repeat field name and textbox field name in your form.

Adding constant, or conditional options

You can also add constant options if you would like, for example adding the following line of code on the penultimate line of the above piece of script, will add an 'Other' option to the dropdown list:

Arr.push('Other');

If, for example, you only wanted to offer the 'Other' option when the Array you had created was empty, you might instead use the following line of script as the penultimate line:

if (Arr.length === 0) {Arr.push('Other')}

You could also add options with values from multiple repeats, or add any number of conditions to include or exclude different inputs - it's up to you.

Adding options with separate labels, values and mtext values

To create a fully fleshed out dropdown list with custom labels, values and alternative text for each option, not much changes. We just change how our input variable is structured.

For this example we are going to use different aspects of a repeated Person control (field name 'person') to build our options, namely the salutation and full name for the label, full name only for the value, and salutation, full name and an address from a text field as the alternative text (mtext). In the Custom Values box we add:

var rpt = data.Repeat_rpt;
var Arr = [];
if (rpt !== undefined && rpt !== null) {
  for (i=0;i<rpt.length;i++){
    var input = {
      label: rpt[i].person.Sal_cho + ' ' + rpt[i].person.Name_Full_scr;
      value: rpt[i].person.Name_Full_scr;
      mtext: rpt[i].person.Sal_cho + ' ' + rpt[i].person.Name_Full_scr + ' of ' + rpt[i].Address_txt;
    }
    Arr.push(input);
  }
}
values = Arr;

Now the user will be presented with a different label to the text and alternative text that will be saved and used in the template - all based on their previous inputs!