Dynamic dropdown using two select fields & datasource

[sesmic]

Hi All,

I'm working on a component where I need to populate the two dropdowns dynamically in dialog box. The second dropdown will change depending on the option selected in first field. Consider below structure under /content/dam/org/vehicles:

--bike
     --b1
     --b1
     --b1
--car
     --c1
     --c2
--truck
     --t1
     --t2

 So, my first dropdown will show the name of nodes/folder under vehicles but when any option is selected my second dropdown should populate with nodes/folder under that specific selected folder. For eg. if author selects car option in first dropdown, then second dropdown should show c1 & c2 likewise if bike is selected b1, b2 & b2.

I created a datasource which gives me name of resources under vehicles i.e bike, car & truck but not sure how to populate second dropdown.

Any suggestions on this would be helpful.

Regards,

Aamir

[konstantyn_diachenko · Accepted solution]

Hi @sesmic ,

I found solution that will fit you in this useful article: https://medium.com/@arunpatidar26/dynamic-dropdown-in-aem-touch-ui-cc502022da24 

You will need to implement generic data source to fetch relevant options and add JS code to dialog clientlibrary.

Best regards,

Kostiantyn Diachenko.