The term "Cascading Popups" refers to form functionality where a selection made in one popup determines or filters the choices available in a second popup. The choice made in the second popup could then determine the choices in a third, and so on.
In this sample, that was first created for the Designer 3.0 training material, we explore a two popup scenario where selecting a type of "frozen treat" in the first popup changes what flavours are available in the second. The key to "cascading popups" is providing a dynamic xpath reference for the nodeset attribute of the dependant popup's xforms:itemset. So if a Flavours popup that shows all flavours has a nodeset of:
A predicate can be added at the choice node level to return only choices that have a category_id element matching the selection made in the Category popup (which is stored in "instance('formData')/selected_category"). This results in the following xpath reference:
It is possible to configure a select1 (popup) so that the choices are listed using a description or name, but when selected a shorter name, id or code is stored in the XForms model. This is the difference between the xforms:label and xforms:value elements found in a select1's xforms:itemset. The problem with doing this is that once a choice is selected, the popup also displays the code version of the choice in the popup. This is not always desirable. To get around this problem, the following xforms:extension can be added to the itemset: