AEM 61 - TouchUI Add Items to Multifield based on Select (Drop Down) value

Goal

Solution

(function ($, $document) {
"use strict";

    var LANGUAGE = "./language", COUNTRY = "./country";

    $document.on("dialog-ready", function() {
        var langCountries = {},
            $language = $("[name='" + LANGUAGE + "']"),
            $countryDelete = $("[name='" + COUNTRY + "@Delete']"),
            cuiLanguage = $language.closest(".coral-Select").data("select"),
            cuiCountry = $countryDelete.closest(".coral-Multifield").data("multifield"),
            $countryAdd = cuiCountry.$element.find(".js-coral-Multifield-add");

        cuiLanguage.on('selected.select', function(event){
            var $country;

            cuiCountry.$element.find(".js-coral-Multifield-remove").click();

            _.each(langCountries[event.selected], function(country){
                $countryAdd.click();
                $country = cuiCountry.$element.find("[name='" + COUNTRY + "']:last");
                $country.val(country);
            });
        });

        function fillCountries(data){
            var countries;

            _.each(data, function(country, code){
                if(!_.isObject(country) || (country.country === "*") ){
                    return;
                }

                code = getLangCode(code);

                countries = langCountries[code] || [];

                countries.push(country.country);

                langCountries[code] = countries;
            });
        }

        $.getJSON("/libs/wcm/core/resources/languages.2.json").done(fillCountries);
    });

    function getLangCode(code){
        if(code.indexOf("_") != -1){
            code = code.substring(0, code.indexOf("_"));
        }

        return code;
    }
})(jQuery, jQuery(document));

<%@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("", "Select");
    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);
%>

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Sample Dynamic Select Multifield Component"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="en/cq/current/wcm/default_components.html#Text">
<content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
<layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fieldset
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Sample Select"
                        sling:resourceType="granite/ui/components/foundation/form/fieldset">
<layout
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<language
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/form/select"
                                        fieldLabel="Language"
                                        name="./language">
<datasource
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="/apps/touchui-dynamic-select-multifield/datasource/language"
                                            addNone="{Boolean}true"/>
</language>
<country
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/form/multifield"
                                        fieldLabel="Country">
<field
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                            name="./country"/>
</country>
</items>
</column>
</items>
</fieldset>
</items>
</column>
</items>
</content>
</jcr:root>