Expand my Community achievements bar.

SOLVED

Dynamic dropdown using two select fields & datasource

Avatar

Level 4

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

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 9

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.

View solution in original post

1 Reply

Avatar

Correct answer by
Level 9

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.