Touch UI dynamic Selection of multiple drop down in AEM 6.1 _Banner

Touch UI dynamic selection of multiple drop downs in AEM 6.1

 

This articles show the use case of have multiple chained drop down in Touch UI. Values in the next drop down depends on what has been selected on previous one. 

Touch UI drop down select language

Brief on how it works:-

There are two drop downs with name Language and Country. When you select a Language from drop down, Country down down gets populated with the name of the countries using that language. For example if you select “German” as a language then all countries using German as language will get populated in second drop down.

Select language as ‘German’

 Language Drop Down

Countries names get populated

Country Drop Down

Values in Language drop down gets populated using DataSource. Once user select a language, ajax request is made to the URL http://localhost:4502/libs/wcm/core/resources/languages.2.json which gives the data for countries and languages. Returned data is filtered based on language selected and countries drop down is created dynamically.

DataSource for populating values in language drop down

Next, we have a added client libs for the component with categories as cq:authoring.dialog

It contains single JS file with below code

JavaScript code in client lib is responsible for changing values in second drop down based on first.

Although we have using DataSource using JSP, we recommend you to use it using sightly as shown in this article Implement DataSource for drop down using Sightly AEM 6.1

You can find the code package here dynamic-touchui-select-1.0

Let me know if you find any bugs or need help.

One thought on “Touch UI dynamic selection of multiple drop downs in AEM 6.1

  1. If I’ve 10 components where I require listeners, then what would be the best way to deal with it in touch UI.
    Shall I create 10 clientlibs in each of the component, if I do so then due to same clinetlib name all the other js are also executing which will delay my page to load. Any better way to solve this issue?

     

Leave a Reply

Your email address will not be published. Required fields are marked *