Creating Dependent Drop Down List Options
  • Updated on 09 May 2013
  • 3 minutes to read
  • Print
  • Dark
    Light

Creating Dependent Drop Down List Options

  • Print
  • Dark
    Light

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 theProperties 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.
2018-05-22_175702-2-1024x463.jpg

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.
2018-05-22_111350-1024x496.jpg

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].
2018-05-22_112724-1024x496.jpg

Select the white space of the Form Designer. Within the Properties panels under Form Rules > Data Flows select Add New.
2018-05-22_112914-1024x496.jpg

Name the Data Flow, then select Create.
2018-05-22_112950-1024x496.jpg

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. 
2018-05-22_124333-1024x496.jpg

Select Pick or Create Truth Table within the properties panel of the Run Truth Table [create] step.
2018-05-22_113545-1024x496.jpg

Name the Truth Table , select Create.
2018-05-22_114738-1-1024x496.jpg

Define the Rule Input Data by selecting Show Editor under Rule Input Data
2018-05-22_121048-1024x496.jpg

Configure theTruth Table as follows. Save andclose .  Navigate here to learn more about Truth Tables
2018-05-22_121109-1024x496.jpg

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.
2018-05-22_174424-1024x496.jpg

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
2018-05-22_174529-1024x496.jpg

Back in the Form Designer, select Update Inputs. Then select the pencil icon next to Independent Drop Down.
2018-05-22_174713-1024x496.jpg

Under Form Data Name select the Form Component that is the primary Drop Down List that was created first. Select OK.
2018-05-22_173811-1-1024x496.jpg

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
2018-05-22_174843-1024x496.jpg

Select Run Flow on the flow that houses the form with the Drop Down Lists.
2018-05-22_175523-1-1024x427.jpg

Select one of the static items from the Independent Drop Down List.
2018-05-22_175628-2-1024x461.jpg

Notice the Dependent Drop Down List changes to show what the Truth Table valued as True.
2018-05-22_175638-2-1024x463.jpg

Change the Independent Drop Down List and see the change of the Independent Drop Down List. 2018-05-22_175702-2-1024x4631.jpg

Was this article helpful?