A cascading dropdown, also known as dependent or linked dropdown, is a user interface element commonly used in forms. It consists of two or more dropdown lists where the options in one dropdown are dynamically updated based on the selection made in another dropdown. The goal is to provide a more interactive and user-friendly experience by narrowing down the available options based on user choices.
Let's say you have two dropdown lists: one for selecting a Person and another for selecting a Group. The options in the group's dropdown would depend on the person selected. As the user chooses a person, the group dropdown is dynamically updated to show only the groups associated with the selected person.
Cascading dropdowns are commonly used in various scenarios, such as address forms, product categorization, and any situation where the available options depend on a prior selection.
Demonstration
In my form control, I will incorporate two dropdowns. The initial dropdown will be populated with a list of individuals in EmpowerID. Subsequently, based on the selection from the first dropdown, I will dynamically filter the options in the second dropdown to display only the groups associated with the selected person.
Steps to Create a Form:
Create a form, save it, and give it a meaningful name, such as CascadingDropdownForm.
Add two objects of type string and rename them as PersonDropdown and GroupDropdown, respectively.
Right-click on the Data Sources and select the Add Data Source option. Ensure that the first option, Create New Data Source, is selected, and then click on the Next button.
Name your data source dsPersonView and select Generated as the DataSource Type. From the Component Name dropdown, choose PersonView, and from the 'Method To Execute,' select GetAllSearch with parameters (string columnsToSearch, string textToSearch). Click on the Finish button.
Now, drag PersonDropdown onto the first section of the form designer pane.
Right-click on the PersonDropdown and select the Edit option. In the DataSources tab, uncheck the 'Use Default Datasource' option and select dsPersonView. In the Control Types tab uncheck the Use Default Control Template and select the DropDownList. Proceed to the 'Standard Properties' tab, choose FriendlyName from the 'Display Field' dropdown, select PersonID from the 'Selected Value Path' dropdown, and click the OK button.
Right-click on the Data Sources and select the Add Data Source option. Ensure that the first option, Create New Data Source, is selected, and then click on the Next button.
Name your data source dsGroupView and select Generated as the DataSource Type. From the Component Name dropdown, choose GroupView, and from the ‘Method To Execute,' select GetByPersonID with parameters (int? personID, bool? showNestedMembership, string columnsToSearch, string textToSearch, string resourceTags). Select the int? personID parameter and from the Parameter Type choose the LinkedControl option and in the 'Control To Link To’ select the PersonDropdown. Click on the Finish button.
For the dsGroupView datasource, we are setting the value for personID parameter from the selected value that will come from the PersonDropdown, which is bound to the dsPersonView datasource.
Drag GroupDropdown onto the first section of the form designer pane.
Right-click on the GroupDropdown and select the Edit option. In the DataSources tab, uncheck the 'Use Default Datasource' option and select dsGroupView. In the Control Types tab uncheck the Use Default Control Template and select the DropDownList. Proceed to the 'Standard Properties' tab, choose FriendlyName from the 'Display Field' dropdown, select PersonID from the 'Selected Value Path' dropdown, and click the OK button.
Publish your Form.
Create a workflow, save it, and give it the name CascadingDropdownWF.
Drag and drop your Form (CascadingDropDownForm) onto the Workflow Designer pane and connect it with lines from the start circle to the end circle.
Publish Workflow both from the workflow studio and in the EmpowerID UI
Run the workflow, and within the first dropdown, choose a user. Subsequently, the second dropdown will display only the groups to which the selected user belongs.
