Creating Dependent Drop-Down Menu Options

Last Updated: 12/07/2015 Introduced in Verision: 2.0

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 click the Edit button. In the resulting pop-up, 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 click Save.

Videos

Flow for populating the drop-down content: http://screencast.com/t/6AEcDoWU9

Form: http://screencast.com/t/a2z6Hoi5

Example

Our 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. Here is what the result will resemble:

Four entities need to be created to build this scenario:

1) Get All Folder Flow

2) Get All Folder Entities Flow

3) Form displaying the two drop-down lists

4) Flow in which the form runs

Get All Folder Flow

One flow sources the first drop-down list. That flow is named Get All Folders Flow. From the Designer Project folder, click on Create Flow. Name the flow Get All Folders Flow and click OK.

To build this flow, from the Workflow Designer’s startup window, expand the Integrations > All Integrations > Internal Services > Folder Service component category. Select the Get All component and click Add to add it to the workspace.

Connect the Get All component to the End component.

Next, it is necessary to set the output data the flow will provide, which in this example, is a list of folders. Click on the End step. From the Properties panel, click on Add under the Output Data section. Name the output data FoldersList. Click on the Data Type field Browse button. In the Search field, type Folder and click OK. Click on Folder in the results list and click OK. Check the Is List checkbox and click OK.

Lastly, it is necessary to map in the data from the Get All component to the End step. Click on the End step. Set the mapping type to Select Value. Click on the Path field Browse button, and select GetAll1_Output and click OK.

Save and close the flow.

Get All Folder Entities Flow

The next flow sources the second drop-down list. That flow is named Get All Folder Entities Flow. From the Designer Project folder, click on Create Flow. Name the flow Get All Folder Entities Flow and click OK.

To build this flow, from the Workflow Designer’s startup window, expand the Integrations > All Integrations > Internal Services > Folder Service component category. Select the Get All Entities component and click Add to add it to the workspace.

Connect the Get All Entities component to the End component.

Next, it is necessary to set the input data for this flow, which is the folder selected in the first drop-down list. (The ID will need to be passed in to the Get All Entities component.) Click on the Start step of this flow. From the Properties panel, click on Add under the Flow Input Data section. Name the input data Folder. Click on the Type field Browse button. Click on Folder and click OK. Check the Can Be Null checkbox; this is needed because until the selection from the first drop-down list is made, the input to this flow will not have a value. Click OK.

To accommodate a null value (and thus avoid an error when this flow runs), a rule is needed in this flow to route around the Get All Entities component when the value of its input data is null. This will be the case the very first time the form containing the drop-down lists loads; both lists show up empty until the user picks a folder from the first drop-down list. However, the flow that populates the dependent drop-down still executes.

From the Toolbox, expand the Data category and drag and drop an Object Is Null component in front of the Get All Entities component. Connect the Start component to the Object is Null component, and connect the False path to the Get All Entities component. Connect the True path of the Object Is Null component to the End component.

Click on the Object Is Null component and from the Properties panel, under Inputs, change the Value field mapping type to Select Value. Click on the Path field Browse button. Expand the Folder data list, and scroll down to find FolderID. Click on FolderID and click OK.

Next, map in the FolderId to the Get All Entities 1 component. Click on the Get All Entities 1 component. From the Properties panel, under Inputs, change the ID field mapping type to Select Value. Click on the Path field Browse button, expand the Folder category and click on FolderId. Click OK.

Next, set the output data the flow will provide, which in this example, is a list of folder entities. Click on the End step. From the Properties panel, click on Add under the Output Data section. Name the output data FolderEntities. Click on the Data Type field Browse button. In the Search field, type EntityHeaderData and click OK. Click on EntityHeaderData in the results list and click OK. Check the Is List checkbox and click OK.

NOTE: We know the EntityHeaderData data type by first viewing the step data from the End step, which shows:

Lastly, it is necessary to map in the data from the Get All Entities 1 component to the End step. Click on the End step. Set the mapping type to Select Value. Click on the Path field Browse button, and select GetAllEntities1_Output and click OK.

Save and close the flow.

Form with Drop-Down Lists

In the Designer Projects folder, click the Create Form button. In the resulting New Form pop-up, name the flow and click OK to open it in the Form Designer.

The first form component is a drop-down list that will independently get a list of all folders in the system. From the Toolbox panel, under the category List, drag a Drop Down List component to the workspace.

To make sure that it’s able to display long folder names, make it a bit larger by dragging its right-most frame anchor to the right.

Next, place a second drop-down control under the first and resize it to be the same length as the first.

Next, place a button on the form to provide an outcome. The Button component can be found in the Toolbox panel, under the Actions category.

In the Properties panel for the first drop-down list component, under the Input Data section, click the Type selector.

In the resulting Select Entity pop-up, search for Folder. Click on the data structure Folder and click OK.

Next, define which property of the folder object to display in the drop-down list by selecting EntityName from the Display Field drop-down list.

It is necessary to provide a name for whatever folder is selected from our independent drop-down list. In the Properties panel, in the Output Data section, enter “Folder_data” in the Selected Item DataName field.

Next, configure the independent drop-down list to use the folders output by Get all folder Flow as options. First, in the Properties panel, in the Input Data section, select Flow from the List Input Source drop-down list. The Flow ID field displays below it. To select the flow, click the Flow ID selector. In the resulting Select Pick Flow pop-up, we will select Get all folder Flow and click OK.

To set the control to only output data, check the Output only checkbox under the Output Data section. Lastly, check the Required Outcome Scenarios outcome for the output path Button. This completes our configuration of the independent drop-down list.

Next, we’ll configure the dependent drop-down list. Just as we did with the independent drop-down list, in the Properties panel, under the Input Data section, click the Type selector.

In the resulting Select Entity pop-up, search for and select the structure EntityHeaderData and click OK.

Under Display Field, select EntityName.

It is necessary to provide a name for whatever folder entity is selected from our dependent drop-down list. In the Properties panel, in the Output Data section, enter “Folder_entity” in the Selected Item DataName field.

Next, configure the dependent drop-down list to use the folders outputted by Get all folder entities Flow as options. First, define List Input Source as Flow. The Flow ID field appears.

To define the Flow ID, click the Flow ID selector. In the resulting Select Pick Flow pop-up, select Get all folder entities Flow and click OK.

Next, under the section Input Data > Flow Input Data, select the input data for the control folder, TypedInText, and click the Edit button.

In the resulting Edit Object pop-up, change this input’s Source Type from Typed Text to From Form Control.

For the new Form Data field, we will select Folder_data, which corresponds to the option selected in our independent drop-down control.

Click Save to save the flow input definition.

Just as with the independent drop-down control, configure our dependent control to only output data. Check the Output only checkbox under the Output Data section. Lastly, check the Required Outcome Scenarios outcome for the output path Button. This completes our configuration of the dependent drop-down list.

This completes our form. Click the Save Form link at the top of the Form Designer and close it.

Flow Containing Form

Back in the Designer Project folder, begin creating our example flow that will display the form with the two drop-down lists. Click the Create Flow button at the bottom of the screen. In the resulting New Flow pop-up, we will name our flow and click OK to open it in the Flow Designer.

In the Workflow Designer’s startup window, in the category Flows, Rules, Forms and Reports > [Forms] Interaction > [Current Folder], select a Drop Down Form component and click Add to add it to the workspace.

Next, connect the [Form] Drop Down Form’s Button outcome to the End step. This completes our example flow; click the Save Flow link at the top of the window to save it, then close the Flow Designer.

Back in our project folder, test the flow by clicking the Drop Down Flow thumbnail and selecting Run Flow from the Action menu.

In the resulting popup, we’re presented with the form we designed. Initially, the drop-down lists have no selections made. When we select a folder in our independent drop-down, our dependent drop-down automatically refines its list of entities to those that are contained in the selected folder.

This completes our example of building a list of drop-down options dependent on an independent drop-down control’s selected option