Solution to Implement dependent choicelist for IBM Form

Body

How to implement dependent choicelist for IBM Form
Author: Author: Ellen Liu, Dan BJ Liu/China/IBM)
We will implement two popups such that the selection made in the first drives the choices that are available in the second. The first popup will list types of frozen treats (gelato, ice cream, and sorbet). The second popup will display the flavors that are available based on the selected type of treat.

We will build the form from scratch. A Data Instance containing the category and flavor choices has been provided in an XML file called frozenTreatsData.xml.

1. Create a New Lotus Form. On the third screen of the New Lotus Form wizard, select Generate XForms Data Model from XML Instance and locate the frozenTreatsData.xml file provided in the Exercises folder.
Click Finish. 

You should now have a form open that contains a “frozenTreatsData” data instance to the form’s default XForms Model. This instance should contain two XML structures; one will serve as a list of categories of frozen treats and the second a list of the flavors that are available. The category_id element found in each flavor will be used to specify which category the current flavor belongs to.
The first step will be to create a second data instance that will contain the data captured by the form.
2. In the XForms View, right click on the default model and select Create Instance.
3. Give the new data instance an id of “formData”.
4. Using the Instance View, add two elements within the root element of the data instance. Name these elements “selected_category” and “selected_flavor”.

Next we will add the two popups to our form. These popups will receive their choices from the “frozenTreatsData” instance and store the selected choice in the “formData” instance.
5. Add a Label (output) to the top left corner of the page. Set its text to “Please select a frozen treat category:”.

  

6. Add a new Popup (select1) below the label. Configure the popup as follows:
a. Set the id to “treatCategory”.
b. Set the width to 100 pixels.
c. Clear the text so that no label is displayed.
d. Set the ref to the selected_category element in the “formData” instance.
e. Make the choices for the popup come from the choice elements in the categories section of the “frozenTreatData” data instance. Set the value -> ref of the itemset to display the id element and the label -> ref to use the name element.

  

7. Add a second Label (output) to the page and place it below the Treat Category popup. Set its text to “Select a flavor:”.
8. Add a second Popup (select1) and place it below the second label. Configure the popup as follows:
a. Set the id to “flavor”.
b. Set the width to 100 pixels.
c. Clear the text so that no label is displayed.
d. Set the ref to the selected_flavor element in the “formData” instance.
e. Make the choices for the popup come from the flavors section of the “frozenTreatData” data instance. Set both the value -> ref and the label -> ref of the itemset to display the name element.

To make the Flavor popup display only the choices that belong to the category currently selected, we will have to make the nodeset for the itemset of the Flavor select1 dynamic.
9. Add a nodeset of Popup (select1) treatCategory.

10. Add another nodeset of Popup (select1) flavor.

  

XPath expression found below:
instance('frozenTreatsData')/flavors/choice[category_id=instance('formData')
/selected_category]
11. View to test the form.

The selection made in the first drives the choices that are available in the second as the pictures below.