神刀安全网

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 dynamic selection of multiple drop downs in AEM 6.1

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’

Touch UI dynamic selection of multiple drop downs in AEM 6.1

Countries names get populated

Touch UI dynamic selection of multiple drop downs in AEM 6.1

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

<%@include file="/libs/granite/ui/global.jsp"%>   <%@ page import="com.adobe.granite.ui.components.ds.DataSource" %> <%@ page import="com.adobe.granite.ui.components.ds.ValueMapResource" %> <%@ page import="java.util.HashMap" %> <%@ page import="org.apache.sling.api.wrappers.ValueMapDecorator" %> <%@ page import="com.adobe.granite.ui.components.ds.SimpleDataSource" %> <%@ page import="org.apache.commons.collections.iterators.TransformIterator" %> <%@ page import="java.util.Map" %> <%@ page import="java.util.LinkedHashMap" %> <%@ page import="org.apache.commons.collections.Transformer" %> <%@ page import="org.apache.sling.api.resource.*" %>   <%     final Map<String, String> languages = new LinkedHashMap<String, String>();       languages.put("ar", "Arabic");     languages.put("en", "English");     languages.put("de", "German");       final ResourceResolver resolver = resourceResolver;       DataSource ds = new SimpleDataSource(new TransformIterator(languages.keySet().iterator(), new Transformer() {         public Object transform(Object o) {             String language = (String) o;             ValueMap vm = new ValueMapDecorator(new HashMap<String, Object>());               vm.put("value", language);             vm.put("text", languages.get(language));               return new ValueMapResource(resolver, new ResourceMetadata(), "nt:unstructured", vm);         }     }));       request.setAttribute(DataSource.class.getName(), ds); %> 

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

It contains single JS file with below code

(function ($, $document) {     "use strict";          var LANGUAGE = "./language", COUNTRY = "./country";          function adjustLayoutHeight(){         $(".coral-FixedColumn-column").css("height", "20rem");     }          $document.on("dialog-ready", function() {         adjustLayoutHeight();                  // Getting reference of language drop down field         var language = $("[name='" + LANGUAGE +"']").closest(".coral-Select")                  // Initializing country drop down field         var country = new CUI.Select({             element: $("[name='" + COUNTRY +"']").closest(".coral-Select")         });                  if(_.isEmpty(country) || _.isEmpty(language)){             return;         }                  var langCountries = {};                  country._selectList.children().not("[role='option']").remove();                  function fillCountries(selectedLang, selectedCountry){               var x = $("[name='./country']").closest(".coral-Select").find('option').remove().end();             _.each(langCountries, function(value, lang) {                   if( (lang.indexOf(selectedLang) !== 0) || (value.country == "*") ){                     return;                 }                   var test2 = $("[name='./country']")[0];                   $("<option>").appendTo(test2).val(lang).html(value.country);               });               country = new CUI.Select({                 element: $("[name='" + COUNTRY +"']").closest(".coral-Select")             });                                       if(!_.isEmpty(selectedCountry)){                                  country.setValue(selectedCountry);                              }                      }                  //listener on language select for dynamically filling the countries on language select         language.on('selected.select', function(event){             console.log(event);             fillCountries(event.selected);         });                  // Get the languages list from the source         $.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;                 }                   // Passing values to populate countries list                 fillCountries(language.val(), data.country);             })         });                       }); })($, $(document)); 

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.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Touch UI dynamic selection of multiple drop downs in AEM 6.1

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮