How to Populate List Options

Created by Marty Lechleider

Working With Lists - Using Leap to Store List Data

There may be times where you have dropdown items that have a lot of choices, or other dropdown items dependent on the selection of another and/or these choices change frequently. There are two approaches that you can take when creating a FEB application: hard-code all the choices or use the FEB services feature to dynamically populate the dropdown choices.

You may also be looking to import existing data from another source (i.e. spreadsheet).

Using JavaScript

Below is an example of using Javascript to dynamically assign the options in a dropdown based on the selection of another dropdown. This code would be placed in the onItemChange event of the first dropdown that controls the behavior of the second (F_DropDown1).

var opt = "";

if(BOA.getValue() === '1') {
opt = new Array({title:'a',value:'a'}, {title:'b',value:'b'}, {title:'c',value:'c'});
} else if(BOA.getValue() === '2') {
opt = new Array({title:'d',value:'d'}, {title:'e',value:'e'});
} else if(BOA.getValue() === '3') {
opt = new Array({title:'f',value:'f'});
}

page.F_DropDown1.setOptions(opt);

Using Services

Let's take the previous example where we have two dropdowns (D1 and D2), one has the values 1-3 and the other will have the values a-f. If D1 = 1 then D2 = a-c, if D1 = 2 then D2 = d-e and if D1 = 3 then D2 = f.

1. Create the main form. On this form we have 2 dropdowns (D1 and D2).

2. Create the form for D1. On this form we have two fields (Label and Value)

In order to allow continual updates of existing dropdown choices we need to create a few stages and setup some access permissions.

  • Click on the Stages Tab
  • Create a new stage called Active
  • Change the Submit button text to “Update” and set its next stage to Active. This will create an endless loop where the record can be updated.


3. Create the form for D2. On this form we have a dropdown (D1) and two fields (Label and Value)

We need to create the same stage for the D2 form as we did with D1.

4. Save the form.

5. Create the service to populate D1.

  • Change the Service Catalog to IBM Forms Experience Builder Applications
  • Select Working With Lists / D1 / Search
  • There will be no inputs since we want all the choices for D1
  • Bind the outputs: link the Value with the Saved Value and the Label with the Displayed Value


  • Click OK

6. Link the D1 dropdown to the newly created service.

  • Open the Properties, Click the Edit button under Set Options
  • Select Use a Service in the dropdown, select the service
  • Click OK
  • Click OK

7. Now let's deploy the application. Once Deployed we need to add some D1 choices. Launch the D1 form. Create three records entering 1, 2 and 3 as the label and value

.

Note: After clicking submit a new form will be opened.

8. Now Launch Form1. You will see that D1 has been populated by the service call with our choices.

9. Next we need to create the service for D2. Follow the same procedure we did in step 5, only this time select Working With Lists / D2 / Search as the service.

  • For this search we want to have an input, the value of D1. Link D1 to Search By D1
  • Bind the outputs: link the Value with the Saved Value and the Label with the Displayed Value for D2
  • Set the Options of D2 to call the service that searches D2.
  • When the D1 dropdown changes we also want to call the service to update the D2 dropdown. Enter the properties for D1 and click on the Events tab. In the onItemChange event select Call a Service and select the D2 Search Service.

10. Before we are ready to preview our final form we need to setup the dropdown in the D2 form that pulls the D1 choices. Because this is a different form then our main form we cannot re-use the service that we created, so we have to create the same service on this form.

  • Open the properties for the D1 dropdown on the D2 form.
  • Click Edit under Set Options, select Use a Service. Click the Add/Edit Service Configuration
  • Find the Working With Lists / D1 / Search service and bind the outputs.

11. Save and Deploy the application.

12. Now Launch the D2 form. Verify that the D1 choices appear in the D1 dropdown. Then add all the records that we require D1: a,b,c and D2: d,e and D1: f

13. Now Launch Form1 and you will see D2 choices change as you change D1.

Now that the structure is in place if any of the values or labels of current selections need to change you can do that in View Responses. Find the record, make the change and click Update. You can also add new choices at any time and they will automatically appear in the main form without having to edit and re-deploy your application!