Dynamically populate selection dropdown in AEM6.2

Avatar

Avatar

pradeepdubey82

Avatar

pradeepdubey82

pradeepdubey82

09-11-2017

Hi All,

I have a requirement in AEM6.2 to populate selection dtopdown dynamically.

Requirement is

There are 5 dropdown, first is fixed all others are dependent upon values selected in previous dropdown.

Similar to like countries(fixed dropdown), then state, district, blocks then villages etc all dynamic dropdown values.

Followed below link didn't work in AEM6.2

Touch UI dynamic selection of multiple drop downs | Adobe AEM Club

Please help/advise if you have worked upon such requirement.

Thanks,

Pradeep

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

mjb54261515

Avatar

mjb54261515

mjb54261515

09-11-2017

In touch ui dialog you can Use DataSource objects api to build dynamic drop down we have very good documents

Adobe Experience Manager Help | Using Granite DataSource objects to populate AEM Touch UI objects

acs-aem-samples/sample-datasource.jsp at master · Adobe-Consulting-Services/acs-aem-samples · GitHub

you have to dynamically inject your value and text.

1344731_pastedImage_1.png

In your use case if it is on page you need a custom sling servlet with 5 different request params.

when  one input selection is selected you can do ajax call to servlet that will return you values dynamically..

sample servlets in aem 6.2

Adobe Experience Manager Help | Submitting Adobe Experience Manager form data to Java Sling Servlets

Answers (6)

Answers (6)

Avatar

Avatar

pradeepdubey82

Avatar

pradeepdubey82

pradeepdubey82

10-11-2017

Onload(very first time) i used dataasource API as suggested to populate dropdown options.

Finally i managed by working on listener.js.

It's really tough task to look widget html code given by adobe granite, and write lot of jquery code to fulfil our requirement. In AEM 6.2 everything is listener.js where only we have to play around for anything dynamic.

Thanks,

Pradeep

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

879

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

879
Arun_Patidar
MVP

18-06-2019

Hi,

Below is sample js which populate second dropdown with child pages values based on pathbrowser values in first field.

You can modify the code to listen events on first dropdown

aem63app-repo/dynamic-dropdown.js at master · arunpatidar02/aem63app-repo · GitHub

Avatar

Avatar

pradeepdubey82

Avatar

pradeepdubey82

pradeepdubey82

18-06-2019

I don't remember full but there is js code which makes ajax call to pull

dynamic values and populated them using jquery and coral ui.

Avatar

Avatar

akashdhawle

Avatar

akashdhawle

akashdhawle

17-06-2019

Hi Pradeep,

I have a same scenario as you have mentioned. I am able to populate values in first drop-down using dataSource. but not understanding the exact approach to populate values in second drop down based on the first. can you please share me your approach.

Thanks,

Akash

Avatar

Avatar

pradeepdubey82

Avatar

pradeepdubey82

pradeepdubey82

09-11-2017

This logic is working fine but first dropdown selected value i am able to capture in listener(listener.js). How do i populate 2nd dropdown based on value selected in first?

Please help.

Thanks,

Pradeep

Avatar

Avatar

Ratna_Kumar

MVP

Avatar

Ratna_Kumar

MVP

Ratna_Kumar
MVP

09-11-2017

Hi Pradeep,

Seems the HELPX article Adobe Experience Manager Help | Dynamically updating Adobe Experience Manager TouchUI Dialog Select ... is for AEM 6.1. We will check this HELPX article once again for AEM 6.2 as well as AEM 6.3

Also, in that article the drop-down population is shown in JSP. We will convert to HTL and will let you know!!

See this article for how to populate the drop-down dynamically in HTL: Adobe Experience Manager Help | Using an WCMUsePojo class to populate an Experience Manager Touch UI...

Thanks,

Ratna Kumar.