Show/Hide AEM CQ Dialog Fields Based on Select Field Selection: A Comprehensive Guide

In AEM, the CQ Dialog’s Select field is quite common. It is often necessary to show/hide other dialog content based on the selected value in the Select field. While there are some Out-of-the-Box (OOTB) and custom solutions available for this functionality, they come with certain limitations. This article aims to address those limitations and cover the following scenarios:

• Showing/hiding content based on the Select field.
• Showing/hiding content under a multifield based on the Select field.
• Showing/hiding content based on multi-select values in the Select field.
• Showing/hiding content under a multifield based on multi-select values in the Select field.

Extra Features:

• Single Content can show/hide for multiple options.

To achieve this, we will start by creating a custom clientlib named “dropdown-showhide.” Follow these steps to create the clientlib:

• Create a new folder named “dropdown-showhide.”
• Within the folder, add the following files:
  - js.txt
  - .content.xml
  - showhide.js
• Now, let’s add the necessary content to these files. In the “js.txt” file,

showhide.js

• In the “.content.xml” file, define the clientlib properties and dependencies. This ensures that the necessary JavaScript is loaded correctly.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:ClientLibraryFolder"
          categories="[cq.authoring.dialog]"
          allowProxy="{Boolean}true"/>

You have the flexibility to customize the category names as per your requirements. In such cases, you will need to include this clientlib in the dialog by adding the “extraClientlibs” property. To ensure its availability throughout the entire project, we will attach it to the global clientlib.

• And finally in “showhide.js” file add the following JS code,

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

    $(document).on("foundation-contentloaded", function (e) {
        Coral.commons.ready(function () {
            showHideHandler($(".cq-dialog-dropdown-showhide", e.target));
        });
    });

    $(document).on("change", ".cq-dialog-dropdown-showhide", function () {
        if ($(this).closest('.coral3-Multifield').length > 0) {
            showHideHandler($(this));
        }
    });

    function showHideHandler(el) {
        el.each(function (i, element) {
            if ($(element).is("coral-select")) {
                Coral.commons.ready(element, function (component) {
                    multiSelectShowHide(element);
                    component.on("change", function () {
                        multiSelectShowHide(element);
                    });
                });
            }
        });
    }

    function multiSelectShowHide(element) {
        let target = $(element).data("cqDialogDropdownShowhideTarget");
        let $target = $(target);
        if (target) {
            $target.each(function () {
                $(this).not(".hide").addClass("hide");
                let filteredElement = [];
                let targetValueList = $(this).data('showhidetargetvalue');
                if (typeof targetValueList !== "undefined") {
                    targetValueList.replace(/ /g, '').split(',').forEach((targetValue) => {
                        let idfSelect = $(this).attr("class").split(' ').filter((item) => item !== "hide")
                        let selectedValues = $(this).parent().find("coral-select[data-cq-dialog-dropdown-showhide-target='." + idfSelect + "']")[0].values;
                        if (selectedValues.includes(targetValue)) {
                            filteredElement.push($(this));
                        }
                    });
                    filteredElement.forEach(element => element.removeClass('hide'));
                }
            });
        }
    }
})(document, Granite.$);

Demo Code & Usages:

To achieve the show/hide functionality based on your requirements, follow these steps:

1. Add the class “cq-dialog-dropdown-showhide” to the dropdown/select element. You can do this by using the attribute [ex: granite: class=”cq-dialog-dropdown-showhide”].

2. Include the data attribute “cq-dialog-dropdown-showhide-target” in the dropdown/select element. The value of this attribute should be a selector, typically a specific class name, used to identify all possible target elements that can be shown/hidden.
For example: [ex: cq-dialog-dropdown-showhide-target=”.connect-layout-show-hide”].

3. Apply the target class to each component that can be shown/hidden. These components will be affected by the show/hide functionality.

4. Initially, set the class “hidden” on each target component. This will ensure that they are hidden when the page loads.

5. For each target component, add the attribute “showhidetargetvalue.” The value of this attribute should correspond to the value of the select [ex: showhidetargetvalue=”val1,val2"] option that will cause this element to be unhidden.

By following these steps, you can implement the desired show/hide behavior based on the selected value in the dropdown/select element. If you encounter any bugs or find any use cases that were missed, please feel free to inform me. Your feedback is valuable, and I will be more than happy to address any issues to ensure smooth functionality.

Regular Show/Hide:

<triggerType
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        granite:class="cq-dialog-dropdown-showhide"
        fieldLabel="Select Field"
        name="./triggerType">
    <granite:data
            jcr:primaryType="nt:unstructured"
            cq-dialog-dropdown-showhide-target=".connect-layout-show-hide"/>
    <items jcr:primaryType="nt:unstructured">
        <dropdown1
                jcr:primaryType="nt:unstructured"
                text="DropDown 1"
                value="dropdown1"/>
        <dropdown2
                jcr:primaryType="nt:unstructured"
                text="DropDown 2"
                value="dropdown2"/>
        <dropdown3
                jcr:primaryType="nt:unstructured"
                text="DropDown 3"
                value="dropdown3"/>
    </items>
</triggerType>
<target-one-container
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        granite:class="hide connect-layout-show-hide">
    <granite:data
            jcr:primaryType="nt:unstructured"
            showhidetargetvalue="dropdown1"/>
    <items jcr:primaryType="nt:unstructured">
        <targetOne
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="Target One"
                jcr:primaryType="nt:unstructured"
                name="./targetOne"/>
    </items>
</target-one-container>
<target-two-container
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        granite:class="hide connect-layout-show-hide">
    <granite:data
            jcr:primaryType="nt:unstructured"
            showhidetargetvalue="dropdown2"/>
    <items jcr:primaryType="nt:unstructured">
        <targetTwo
                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                fieldLabel="Target Two"
                jcr:primaryType="nt:unstructured"
                name="./targetTwo"/>
    </items>
</target-two-container>

Multiselect:

<triggerType
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        granite:class="cq-dialog-dropdown-showhide"
        fieldLabel="Select Field"
        multiple="{Boolean}true"
        name="./triggerType">
    <granite:data
            jcr:primaryType="nt:unstructured"
            cq-dialog-dropdown-showhide-target=".connect-layout-show-hide"/>
    <items jcr:primaryType="nt:unstructured">
        <dropdown1
                jcr:primaryType="nt:unstructured"
                text="DropDown 1"
                value="dropdown1"/>
        <dropdown2
                jcr:primaryType="nt:unstructured"
                text="DropDown 2"
                value="dropdown2"/>
        <dropdown3
                jcr:primaryType="nt:unstructured"
                text="DropDown 3"
                value="dropdown3"/>
    </items>
</triggerType>
<target-one-container
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        granite:class="hide connect-layout-show-hide">
    <granite:data
            jcr:primaryType="nt:unstructured"
            showhidetargetvalue="dropdown1"/>
    <items jcr:primaryType="nt:unstructured">
        <targetOne
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="Target One"
                jcr:primaryType="nt:unstructured"
                name="./targetOne"/>
    </items>
</target-one-container>
<target-two-container
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        granite:class="hide connect-layout-show-hide">
    <granite:data
            jcr:primaryType="nt:unstructured"
            showhidetargetvalue="dropdown1,dropdown2"/>
    <items jcr:primaryType="nt:unstructured">
        <targetTwo
                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                fieldLabel="Target One or Two"
                jcr:primaryType="nt:unstructured"
                name="./targetTwo"/>
    </items>
</target-two-container>

After summarizing the steps mentioned above, you now have a clientlib capable of showing/hiding conditional content as per your requirements. If, however, you come across any bugs or identify any missed use cases, please do not hesitate to inform me. Your feedback is valuable, and I’ll be glad to address any issues to ensure the functionality works seamlessly.