Solved

Dynamically populate selection dropdown in AEM6.2

Forum|Forum|8 years ago
November 9, 2017
7 replies
15210 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by manoj_devapath

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.

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

Ratna_Kumar

Hi Pradeep,

Seems the HELPX article Adobe Experience Manager Help | Dynamically updating Adobe Experience Manager TouchUI Dialog Select Fields 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 Select Field

Thanks,

Ratna Kumar.

manoj_devapathAccepted solution

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.

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

P

pradeepdubey82Author

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

P

pradeepdubey82Author

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

A

akashdhawle

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

P

pradeepdubey82Author

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.