Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

AEM touch Ui dynamic select options not working in AEM 6.1, but it works in AEM 6.0

Avatar

Level 4

Hello,

I am using AEM 6.1, and trying to implement the dynamic select options. And found the following link for reference, but it does not work for me in AEM 6.1, but it works well AEM 6.0

http://experience-aem.blogspot.com/2015/04/aem-6-sp2-touchui-adding-dynamic-select-options.html

 

Is there any update I need to make to get it working ?

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi, 

replace listener.js with this code and it should work for 6.1

(function ($, $document) { "use strict"; var LANGUAGE = "./language", COUNTRY = "./country"; function adjustLayoutHeight(){ //with only two selects, the second select drop down is not visible when expanded, so adjust the layout height //fixedcolumns i guess doesn't support css property height, so fallback to jquery //http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/layouts/fixedcolumns/index.html $(".coral-FixedColumn-column").css("height", "20rem"); } $document.on("dialog-ready", function() { adjustLayoutHeight(); //http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/form/select/index.html var language = new CUI.Select({ element: $("[name='" + LANGUAGE +"']").closest(".coral-Select") }); var country = new CUI.Select({ element: $("[name='" + COUNTRY +"']").closest(".coral-Select") }); if(_.isEmpty(country) || _.isEmpty(language)){ return; } var langCountries = {}; //workaround to remove the options getting added twice, using CUI.Select() language._selectList.children().not("[role='option']").remove(); function fillCountries(selectedLang, selectedCountry){ country._nativeSelect.children().remove(); country._selectList.children().remove(); _.each(langCountries, function(value, lang){ if( (lang.indexOf(selectedLang) !== 0) || (value.country == "*") ){ return; } $("<option>").appendTo(country._nativeSelect) .val(lang).html(value.country); }); country = new CUI.Select({ element: $("[name='" + COUNTRY +"']").closest(".coral-Select") }); if(!_.isEmpty(selectedCountry)){ country._nativeSelect.val(selectedCountry).trigger('change'); } } //listener on language select for dynamically filling the countries on language select language._selectList.on('selected.select', function(event){ fillCountries(event.selectedValue); }); //get the langs list $.getJSON("/libs/wcm/core/resources/languages.2.json").done(function(data){ langCountries = data; var $form = country.$element.closest("form"); //get the second select box (country) saved value $.getJSON($form.attr("action") + ".json").done(function(data){ if(_.isEmpty(data)){ return; } fillCountries(language.getValue(), data.country); }) }); }); })($, $(document));

View solution in original post

5 Replies

Avatar

Level 4

Hello,

Can you please share your thoughts on why is it working in AEM 6.0 and not in AEM 6.1.

 

Thank you.

Avatar

Level 10

I will test the article we have on AEM 6.1 and report back the findings. 

Avatar

Correct answer by
Level 10

Hi, 

replace listener.js with this code and it should work for 6.1

(function ($, $document) { "use strict"; var LANGUAGE = "./language", COUNTRY = "./country"; function adjustLayoutHeight(){ //with only two selects, the second select drop down is not visible when expanded, so adjust the layout height //fixedcolumns i guess doesn't support css property height, so fallback to jquery //http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/layouts/fixedcolumns/index.html $(".coral-FixedColumn-column").css("height", "20rem"); } $document.on("dialog-ready", function() { adjustLayoutHeight(); //http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/form/select/index.html var language = new CUI.Select({ element: $("[name='" + LANGUAGE +"']").closest(".coral-Select") }); var country = new CUI.Select({ element: $("[name='" + COUNTRY +"']").closest(".coral-Select") }); if(_.isEmpty(country) || _.isEmpty(language)){ return; } var langCountries = {}; //workaround to remove the options getting added twice, using CUI.Select() language._selectList.children().not("[role='option']").remove(); function fillCountries(selectedLang, selectedCountry){ country._nativeSelect.children().remove(); country._selectList.children().remove(); _.each(langCountries, function(value, lang){ if( (lang.indexOf(selectedLang) !== 0) || (value.country == "*") ){ return; } $("<option>").appendTo(country._nativeSelect) .val(lang).html(value.country); }); country = new CUI.Select({ element: $("[name='" + COUNTRY +"']").closest(".coral-Select") }); if(!_.isEmpty(selectedCountry)){ country._nativeSelect.val(selectedCountry).trigger('change'); } } //listener on language select for dynamically filling the countries on language select language._selectList.on('selected.select', function(event){ fillCountries(event.selectedValue); }); //get the langs list $.getJSON("/libs/wcm/core/resources/languages.2.json").done(function(data){ langCountries = data; var $form = country.$element.closest("form"); //get the second select box (country) saved value $.getJSON($form.attr("action") + ".json").done(function(data){ if(_.isEmpty(data)){ return; } fillCountries(language.getValue(), data.country); }) }); }); })($, $(document));

Avatar

Level 4

Thank you Bsloki. Your solution rocks!!

Avatar

Level 4

What documentation I could go through to learn about the fix that you make.

I see that you have used '_nativeSelect' with CUI.Select. Where is the _nativeSelect documented ?