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 of 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. Select CREATE under Create New. Choose Form, name the Form, and then select CREATE.
   
   
4. Add two Drop Down Lists from the Favorites category in the Toolbox: Independent Drop Down (First Drop Down) and 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: Office Supplies, Snacks, and Software.
   
   
8. Select the Second Drop Down List.
9. In the Properties Panel, change the List Input Source to Flow. Select PICK FLOW ID.
10. Select CREATE under Create Flow. Choose Flow, name the Flow, and then select CREATE.
    
    
11. Select SETUP INPUT DATA. Under Name type "Independent Drop Down". Under Type, choose String. Save and Close the Data Designer.
    
    
    1. Select the Done outcome path of the Start step.
    2. In the Add After dialog, select the Run Truth Table step in the Favorite Steps category. Select ADD.
    3. With the Run Truth Table step selected, in the Properties panel, select PICK OR CREATE TRUTHTABLE.
    4. Select CREATE under Create New. Choose Truth Table, name the Truth Table, and then select CREATE.
       
       
    5. Select SETUP INPUT DATA. Under Name type "Independent Drop Down". Under Type, choose String. Save and Close the Data Designer.
    6. Configure the Truth Table as follows. 

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

       
       
       Want to know more about Truth tables?

       Navigate to the Create A Truth Table article for further information. 
    7. Save and close the Truth Table.
       
       
    8. Select the Run Truth Table step.
       1. Under Inputs > Independent Drop Down, select Pick.
       2. In the Pick Data for Input dialog, choose Form Data > ComboBox > Selected Item.
          
          
    9. Select the End Step. Under Data > Pick From Current Data, select Result.
    10. Save and close.
        
        
    11. In the Form Designer, under Input Data, select Update Inputs. 
    12. Select the pencil icon next to Independent Drop Down.
    13. In the Edit Flow Input Data dialog, change the Source Type to From Form Control. In the Form Data drop down, select First From Down.
    14. Select OK to save and close.

Debug

1. In the Flow Designer, select Debug in the top action panel. Select Start Debugging
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.