Creating Dependent Drop Down List Options

Last Updated: 10/03/2018 Introduced in Version: 2.0

Overview:

Drop down 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 that are dependent on options previously selected in another drop down list.

To build a list of drop down options dependent on an independent drop-down list’s selected option, first create a form and add two drop-down list components. In the Properties panel, under the Output Data section, configure the independent drop-down list component with an Output only setting of “True” by checking the Output only checkbox 

Next, select the dependent drop down list and configure its input. In the Properties panel, under the section Input Data > Flow Input Data, select the appropriate input entry, then select the Edit button. In the resulting dialog, change the value of the Source Type from “Typed Text” to “From Form Control,” select the appropriate output to source in the resulting Form Data control, then select Save.

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 all of the folders in our system. From the second drop down list, users will be able to select form a list of all the entities inside of the folder selected in the first drop down list. 

Steps:

  • Data Flow:
    • Run Truth Table [Create]: Favorite Steps
  • Final Flow:
    • Show Form: Favorite Steps

Below is the image of the expected result.

 

Configure the Steps:

 

This example begins within the Form Designer with a form that has Labels, Text boxes, two buttons, and two Drop Down Lists. These are all found in the Form Control panel.

 

Select the primary Drop Down List. In the Properties Panel, select Static under List Input Source. Under List Items type in the selections for the primary Drop Down List, separate items by pressing [ENTER].

 

Select the white space of the Form Designer. Within the Properties panels under Form Rules > Data Flows select Add New.

 

Name the Data Flow,  then select Create. 

 

Select the Start Step. Within the Properties panel under Flow Data > Flow Input Data, select Show Editor and define the input data for the Primary Drop Down List.

From the Steps panel, drag Run Truth Table [create] to the work space. 

 

Select Pick or Create Truth Table within the properties panel of the Run Truth Table [create] step.

 

Name the Truth Table, select Create.

 

Define the Rule Input Data by selecting Show Editor under Rule Input Data

 

Configure the Truth Table as follows. Save and close.  Navigate here to learn more about Truth Tables

 

Select the Run Truth Table [create] Step. Within the Properties panel under Inputs, select Pick and define the input data for the Truth Table.

Under Outputs, select Rename and name the output.

 

Select the End Step. Within the Properties panel under Inputs, select Pick and define the input data for the Dependent Drop Down. Save and close

 

Back in the Form Designer, select Update Inputs. Then select the pencil icon next to Independent Drop Down. 

 

Under Form Data Name select the Form Component that is the primary Drop Down List that was created first. Select OK. 

 

Select the dependent Drop Down List. Within the Properties panel, under Input Data > List Items DataName select Pick From Data.  Pick the flow just created that contains the Truth Table. Save and Close

 

Select Run Flow on the flow that houses the form with the Drop Down Lists. 

 

Select one of the static items from the Independent Drop Down List.

 

Notice the Dependent Drop Down List changes to show what the Truth Table valued as True.

 

Change the Independent Drop Down List and see the change of the Independent Drop Down List. 

 

 

Additional Resources