Creating Dependent Drop Down List Options

Overview

Dropdown controls can source and narrow their available options based on a variety of outputs. One common requirement is to display options in a drop-down list dependent on options previously selected in another drop-down list.

Example

The example flow will display a form containing two drop-down lists. In the first drop-down list, users will be able to select from a list of items. From the second drop-down list, users will select from a list of all the entities inside the items selected in the first drop-down list.

1. In the Flow Designer, add a Show Form step to the workspace.
2. With the Show Form step selected, in the Properties panel, select Pick or Create Form.
3. Under Create New. Name the Form, select CREATE.
   
   
4. Add two Drop Down Lists from the Favorites category in the Form Controls panel.
   1. Independent Drop Down (First Drop Down)
   2. Dependent Drop Down (Second Drop Down)
5. Select the First Drop Down List. 
6. In the Properties panel, select Static under List Input Source. 
7. Under List Items, type in selections for the First Drop Down List, separate items by pressing [ENTER]. The following items are the List Items used in this example.
   1. Office Supplies
   2. Snacks
   3. Software
      
      
8. Select the Second Drop Down List.
9. In the Properties Panel, change the List Input Source to Flow.
10. Under Flow ID select Create.
    
    
11. In the Create New Flow dialog, name the Flow and change the Behavior to Default Form Behavior Flow.
12. Select CREATE.
    
    
13. In the Flow Properties panel, under Flow Input Data, select Show Editor. 
14. In the Data Definitions dialog, under Name type "Independent Drop Down". Under Type, choose String. Select CLOSE to save and close the dialog.
    
    
    
15. Select the Done outcome path of the Start step.
    1. In the Add After dialog, select the Run Truth Table step in the Favorite Steps category.
    2. Select ADD.
16. With the Run Truth Table step selected, in the Properties panel, select Pick or Create Truth Table.
    1. Under Create New. Name the Truth Table. Select CREATE.
       
       
17. Select SETUP INPUT DATA
18. Under Name type "Independent Drop Down".
19. Under Type, choose String.
20. Save and Close the Data Designer.
21. Configure the Truth Table as follows. Navigate to the Create a Truth Table article to learn more.

    Independent Drop Down Equals	Default Output Data
    Office Supplies	Chair, Duck, Standing Desk
    Snacks	Pretzels, Fruit Roll-Ups, Cookies
    Software	AntiVirus, Photoshop

22. Save and close the Truth Table.
    
23. Select the Run Truth Table step.
24. Under Inputs > Independent Drop Down, select Pick, choose Independent Drop Down.
25. Select the End Step. Under Data > Pick From Current Data, select Result.
26. Save and close.
    
    
27. In the Form Designer, under Input Data, select Update Inputs. 
28. Select the pencil icon next to Independent Drop Down.
29. In the Edit Flow Input Data dialog, change the Source Type to From Form Control.
30. In the Form Data drop down, select First From Down.
31. Select OK to save and close.
    

Debug

1. In the Flow Designer, select Debug in the top action panel.
   1. Select Full.
2. Select one of the static items from the Independent Drop Down List.
3. Notice the Dependent Drop Down List changes to show what the Truth Table valued as True.
4. Change the independent Drop Down List and see the change of the dependent Drop Down List.