AEMaaCS - Touch UI Dialog Dynamic Dropdown

 

Populate Touch UI Dropdown Dynamically based on Other Field

In AEM touch UI, the dropdown options can be populated using static fields or using datasource but the dropdown options are static. Let's say I need to create a dropdown for state and the state values should populate based on country, In this case above two methods will not work. but this can be achieved using dialog listeners. 

This blog is about an example to populate second dropdown options based on the first dropdown.

Steps

1.  Create the first dropdown and populate the options either with fixed values or from datasource. add a granite class to listen to the changes.     

<contenttype

 granite:class="dropdownfield_contenttype"

 jcr:primaryType="nt:unstructured"
 sling:resourceType="granite/ui/components/coral/foundation/form/select" 
 fieldDescription="The type of the content"
 fieldLabel="Content Type"
 name="./type">
 <datasource
  jcr:primaryType="nt:unstructured"      sling:resourceType="aemlab/dialog/granite/components/select/datasource/content/type"/>

</contenttype>

2. Create a second dropdown without any options and add a granite class            

 

<contentsubtype

  granite:class="dropdownfield_contentsubtype"

  jcr:primaryType="nt:unstructured"           sling:resourceType="granite/ui/components/coral/foundation/form/select"
  fieldDescription="The subtype of the content"
  fieldLabel="Content SubType"

  name="./subtype"/>

3. Create a hidden field for the second dropdown to repopulate pre-saved value on a dialog load. The name property must be the same as the secondary dropdown and this field must be disabled and hidden.

                                 

<contentsubtype-hidden                         granite:class="dropdownfield_contentsubtype--hidden"
 jcr:primaryType="nt:unstructured"
 sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
 disabled="{Boolean}true"

 name="./subtype"/>

4. Create Clientlibs(javascript) to populate the second dropdown based on the first dropdown value. The values of the second dropdown can be populated based on any business logic. 

Here I am calling a servlet /apps/aemlab/concept/utils/dialog/contentsubytpe.json with the first dropdown value and getting the options for the second dropdown.

     const contentTypeSelector = ".dropdownfield_contenttype";
    const contentSubTypeSelector = ".dropdownfield_contentsubtype";
    const contentSubTypeDataSourceUri =
        "/apps/aemlab/concept/utils/dialog/contentsubytpe.json";

    $document.on("foundation-contentloaded", function (e) {
        setSubTypeDropdown(true);
    });

    $document.on("change", contentTypeSelector, function (e) {
        setSubTypeDropdown(false);
    });

    function setSubTypeDropdown(preSelect) {
        const contentType = document.querySelector(contentTypeSelector);
        const contentSubType = document.querySelector(contentSubTypeSelector);

        if (contentType && contentSubType) {
            var url =contentSubTypeDataSourceUri +"?type=" +contentType.value +"&ck=" +Math.random();
            $.get(url, function (data) {
                updateSubTypeDropdownField(preSelect, data);
            });
        }
    }

Complete Javascript Code at  
https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/concept/components/dropdown-dynamic/clientlib-dynamic-dropdown/dynamic-dropdown.js

    

Dialog

GitHub

All the code and component example are available at 

Component : 

https://github.com/arunpatidar02/aemaacs-aemlab/tree/master/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/concept/components/dropdown-dynamic

Secondary Dropdown Source Path :

https://github.com/arunpatidar02/aemaacs-aemlab/tree/master/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/concept/utils/dialog/contentsubytpe

First Dropdown datasource and secondary dropdown Servlet :

https://github.com/arunpatidar02/aemaacs-aemlab/tree/master/core/src/main/java/com/community/aemlab/oneweb/core/servlets/ds

The above code is tested in AEM as a Cloud Service, but it will work with standard AEM as well.