Nested Drop Downs / Multi-Level Drop Downs

Look at the picture given below, What if you can provide such type of options in your app. With Clappia it is possible to do so.

This feature gives you the option to have conditional drop-downs, i.e. different options will be there in the next drop-down field for the different options selected in the dependent drop-downs.

For this, you don’t need to use any another feature; using drop-down option along with applying dependency will work.

Here are the steps to use nested drop-downs, we are taking an example of an app where you need to select an item to purchase.

  • Add a new app or Get into the edit mode of an existing application.
  • Add a few drop-downs by dragging “Drop Down” block from right to the left section.
  • Change the variables according to your requirement and give options in the drop-down bar.
  • Leave the ‘dependency field names’ blank for the first drop-down.
  • Here we are giving options to select any item i.e. Shirt, T-Shirt, Jeans, or Shoes.
  • Edit the next drop-down label according to your requirement.
  • For it to be dependent on the previous drop-down, put the field name of that drop-down in the  ‘Dependency field names’.
  • And fill the options with choices you wanted to give on each option of dependency drop-down, separated by ||.
  • Here we gave the option to select the type of the item selected,
  • For example for option Shirt, we want to give choices – casual, formal or half sleeved and
  • For the option T-shirt we want to give choices- round-necked, v-necked or with collar, we will write options of ‘Select Type’ drop-down as
  • Shirt||Casual
  • Shirt||Formal
  • Shirt||Half-Sleeved
  • T-Shirt||V-Necked
  • T-Shirt||Round-Necked
  • T-Shirt||With Collar  

And so on for the remaining options.

  • Similarly, if you want to add another level in the drop-downs, you can do it following the same steps as above.
  • For multiple dependencies, write the ‘Dependency field names’ separated by comma (,) and write the options separated by || as shown in the picture.
  • Here we gave the option to select the size of the item and its type selected

In that way, you can create Nested or Multi-Level Drop Downs, Have a look at how it works:

Here is the link to the app we used as an example, i.e “Purchase Item”
https://marketplace.clappia.com/guest/#/app/PUR522413

Related Articles