A cascading drop-down list is a series of dependent drop-down list controls in which one drop-down list control depends on the parent or previous drop-down list controls. The Cascading Dropdown allows you to drill down through hierarchical data by using one dropdown menu as a filter into the next.
How to Create Dropdown Cascading Relationship & Change Dropdown List
Create a new form. Name it as Product Categories.

Create Singleline field. Name it as Product Category.

Create a new form. Name it as Product.

Create Dropdown field. Name it as Product Category.

Setting as below image in Additional Options. This will populate dropdown list from Product Categories form we created previously.

Create Singleline field. Name it as Product Name.

Create a new form. Name it as Sample Cascading Dropdown.

Create Dropdown field. Name it as Product Category.

Setting as below image in Additional Options. This will populate dropdown list from Product Categories form we created previously.

Create Dropdown field. Name it as Product Name.

Setting as below image in Additional Options. This will populate dropdown list from Product form we created previously.

Click Edit form behavior.

1) How to Create Dropdown Cascading Relationship
Create a new behavior. Put the appropriate caption. Click Action wizard.

Click Create an action.

Click Create cascading relationship.

Select Product Category for Master Dropdown and select Product Name for Child Dropdown. Click OK.

Click Save changes.

Click View code. Just leave it as it is. Click Check Syntax, if no error then click Save and close.

Click Create now.

How it look in the form:
Go to your Product Categories form, fill 'Hardware' in Product Category. Click Save.

Go again to your Product Categories form, fill 'Software' in Product Category. Click Save.

Go to your Product form, select 'Hardware' for Product Category and fill 'Mouse' for Product Name. Click Save.

Again, go to your Product form, select 'Hardware' for Product Category and fill 'Keyboard' for Product Name. Click Save.

Go to your Product form again, this time we will fill information for Software. Select 'Software' for Product Category and fill 'Microsoft Word' for Product Name. Click Save.

Again, go to your Product form, select 'Software' for Product Category and fill 'Microsoft Excel' for Product Name. Click Save.

Before:
Go to Sample Cascading Dropdown. Product Name dropdown listed all product regardless of category Hardware or Software.

After:
It's filtering based on Product Category.


2) How to Change Dropdown List
Create a new behavior. Put the appropriate caption. Click Action wizard.

Click Create an action.

Click Change dropdown list.

Select as per below figure. Click OK.

Click Save changes.

Click View code. Just leave it as it is. Click Check Syntax, if no error then click Save and close.

Click Create now.

How it look in the form:
Go to your Product Categories form, fill 'Hardware' in Product Category. Click Save.

Go again to your Product Categories form, fill 'Software' in Product Category. Click Save.

Go to your Product form, select 'Hardware' for Product Category and fill 'Mouse' for Product Name. Click Save.

Again, go to your Product form, select 'Hardware' for Product Category and fill 'Keyboard' for Product Name. Click Save.

Go to your Product form again, this time we will fill information for Software. Select 'Software' for Product Category and fill 'Microsoft Word' for Product Name. Click Save.

Again, go to your Product form, select 'Software' for Product Category and fill 'Microsoft Excel' for Product Name. Click Save.

Before:
Go to Sample Cascading Dropdown. Product Name dropdown listed all product regardless of category Hardware or Software.

After:
It's filtering based on Product Category.


Comments