HELP
 / 
Deep Dive
 / 
Nested Drop Downs / Multi-Level Drop Downs

Nested Drop Downs / Multi-Level Drop Downs

This is some text inside of a div block.

What if you can provide 'Nested Dropdowns' or 'Dependent Dropdowns' in your app like the one in the picture below:

In Clappia, it is easily possible.

This feature gives you the option to have conditional dropdowns, i.e. each option has it's own dropdowns. There is no need of using many features. Just by using the dropdown block and adding suitable dependency will work.

Let us understand the use of Nested Dropdowns by an example:

Example: Select the Item from a dropdown menu and it's corresponding types appear in the next dropdown menu.

Step 1:

Add a dropdown block and name it as Select Item. Add Shirt,T-Shirt and Shoes in the options.

Step 2:

Add another dropdown block and name it as Type. Now enter the following in the options field:

Shirt||Formal

Shirt||Casual

Shirt||Hooded

T-Shirt||Round Neck

T-Shirt||V Neck

T-Shirt||with Collar

Shoes||Sports

Shoes||Sneakers

Shoes||Formals

In the level 1 dependency field select the first dropdown, i.e, select the 'Select Item' dropdown.

This ensures that the selection in first dropdown will display options related to that option in the second dropdown.

Step 3:

Add a third dropdown block and name it as Size. Now enter the following in the options field:

Shirt||Formal||S

Shirt||Formal||M

Shirt||Formal||L

Shirt||Casual||S

Shirt||Casual||M

Shirt||Casual||L

Shirt||Hooded||S

Shirt||Hooded||M

Shirt||Hooded||L

T-Shirt||Round Neck||S

T-Shirt||Round Neck||M

T-Shirt||Round Neck||L

T-Shirt||V Neck||S

T-Shirt||V Neck||M

T-Shirt||V Neck||L

T-Shirt||with Collar||S

T-Shirt||with Collar||M

T-Shirt||with Collar||L

Shoes||Sports||8

Shoes||Sports||9

Shoes||Sports||10

Shoes||Sneakers||8

Shoes||Sneakers||9

Shoes||Sneakers||10

Shoes||Formals||8

Shoes||Formals||9

Shoes||Formals||10

In the level 1 dependency field select the first dropdown, i.e, select the 'Select Item' dropdown.

In the level 2 dependency field select the second dropdown, i.e, select the 'Type' dropdown.

This ensures that the selection in first dropdown will display the corresponding options related to that option in the second dropdown and then the corresponding options related to those two dropdowns will be shown in the third dropdown.

     

This is how the nested dropdown in the app works:

Scenario 1:

Dropdown 1 - Shirt

Dropdown 2 - Formal

Dropdown - S, M, L (Small, Medium, Large)


Scenario 2:

Dropdown 1 - T-Shirt

Dropdown 2 - With Collar

Dropdown - S, M, L (Small, Medium, Large)

Scenario 3:

Dropdown 1 - Shoes

Dropdown 2 - Sports

Dropdown - 8, 9, 10