Show/Hide AEM Dialog Fields on Dropdown Selection

PublishedApril 10, 2024

ModifiedMarch 23, 2025

Viewed680 times

Enabling Show/Hide functionality for AEM dialog fields improves user experience by allowing content authors to focus on relevant fields, thereby making the authoring process more efficient and less error-prone.

AEM provided an out-of-the-box solution for showing/hiding dialog fields based on dropdown selection value. ClientLibs implementation is available here /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

To achieve the functionality, need to proceed with the following steps:

Apply granite:class="cq-dialog-dropdown-showhide" to the select/dropdown field.
Add a data attribute cq-dialog-dropdown-showhide-target to the select field using granite:data typically configured with a class selector as the value such as .background-config-show-hide
Add a container field with granite:class attribute, incorporating the hide class to keep it hidden upon initial loading, along with the target value set in the preceding step, without employing the class selector "." such as granite:class="hide background-config-show-hide"
Add showhidetargetvalue data attribute to the container field using granite:data to set up the display or hiding of items beneath the container according to a specified value.

_cq_dialog / .content.xml

<backgroundConfig jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/select"
  fieldLabel="Background Config"
  name="./backgroundConfig"
  granite:class="cq-dialog-dropdown-showhide">
  <items jcr:primaryType="nt:unstructured">
    <backgroundColor jcr:primaryType="nt:unstructured"
      text="Background Color"
      value="backgroundColor"/>
    <backgroundImage jcr:primaryType="nt:unstructured"
      text="Background Image"
      value="backgroundImage"/>
  </items>
  <granite:data jcr:primaryType="nt:unstructured"
    cq-dialog-dropdown-showhide-target=".background-config-show-hide"/>
</backgroundConfig>
<backgroundColorContainer jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/container"
  granite:class="hide background-config-show-hide">
  <items jcr:primaryType="nt:unstructured">
    <colorCode jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
      fieldLabel="Color Code"
      name="./colorCode"/>
  </items>
  <granite:data jcr:primaryType="nt:unstructured"
    showhidetargetvalue="backgroundColor"/>
</backgroundColorContainer>

According to the _cq_dialog configuration provided above, the Color Code option will be displayed only when Background Color is selected in the Background Config. Otherwise, the Color Code field will remain hidden in the dialog.

Show/Hide Fields for Multiple Options

While the default implementation supports showing or hiding fields based on a single dropdown option, it doesn't account for multiple selections. To achieve that functionality, a custom JavaScript solution is required. Consider the following example:

_cq_dialog / .content.xml

<meetingType jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/select"
  fieldLabel="Meeting Type"
  name="./meetingType"
  granite:class="cq-dialog-dropdown-showhide">
  <items jcr:primaryType="nt:unstructured">
    <office jcr:primaryType="nt:unstructured"
      text="Office"
      value="office"/>
    <online jcr:primaryType="nt:unstructured"
      text="Online"
      value="online"/>
    <hybrid jcr:primaryType="nt:unstructured"
      text="Hybrid"
      value="hybrid"/>
  </items>
  <granite:data jcr:primaryType="nt:unstructured"
    cq-dialog-dropdown-showhide-target=".meeting-type-show-hide"/>
</meetingType>
<meetingLinkContainer jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/container"
  granite:class="hide meeting-type-show-hide">
  <items jcr:primaryType="nt:unstructured">
    <meetingLink jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
      fieldLabel="Meeting Link"
      name="./meetingLink"/>
  </items>
  <granite:data jcr:primaryType="nt:unstructured"
    showhidetargetvalue="online,hybrid"/>
</meetingLinkContainer>

In the given configuration, expectation is that Meeting Link field should be displayed only when the Meeting Type dropdown is set to Online or Hybrid. To achieve this, showHide method needs to be updated to handle multiple values.

js / dropdownshowhide.js

var targetValues = (element.dataset.showhidetargetvalue || "")
  .split(",").map(v => v.trim());
var show = targetValues.includes(value);

To incorporate the changes, create a custom ClientLib that includes the updated dropdownshowhide.js file. Then, ensure the Clientlib category is added as extraClientlibs in the dialog. Here is the completed JavaScript implementation:

js / dropdownshowhide.js

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

  // when dialog gets injected
  $(document).on("foundation-contentloaded", function (e) {
    // if there is already an inital value make sure the according target element becomes visible
    Coral.commons.ready(function () {
      showHideHandler($(".cq-dialog-dropdown-showhide", e.target));
    });
  });

  $(document).on("selected", ".cq-dialog-dropdown-showhide", function (e) {
    showHideHandler($(this));
  });

  function showHideHandler(el) {
    el.each(function (i, element) {
      if ($(element).is("coral-select")) {
        // handle Coral3 base drop-down
        Coral.commons.ready(element, function (component) {
          showHide(component, element);
          component.on("change", function () {
            showHide(component, element);
          });
        });
      } else {
        // handle Coral2 based drop-down
        var component = $(element).data("select");
        if (component) {
          showHide(component, element);
        }
      }
    })
  }

  function showHide(component, element) {
    // get the selector to find the target elements. its stored as data-.. attribute
    var target = $(element).data("cqDialogDropdownShowhideTarget");
    // querySelector won't create HTML objects on the fly as jquery does
    var sanitizedTarget = document.querySelectorAll(target);
    var $target = $(sanitizedTarget);

    if (sanitizedTarget.length) {
      var value;
      if (typeof component.value !== "undefined") {
        value = component.value;
      } else if (typeof component.getValue === "function") {
        value = component.getValue();
      }

      $target.each(function(index, element) {
        // make sure all unselected target elements are hidden.
        // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
        var targetValues = (element.dataset.showhidetargetvalue || "")
                    .split(",").map(v => v.trim());
        var show = targetValues.includes(value);
        setVisibilityAndHandleFieldValidation($(element), show);
      });
    }
  }

  function setVisibilityAndHandleFieldValidation($element, show) {
    if (show) {
      $element.removeClass("hide");
      $element.find("
        input[aria-required=false], coral-multifield[aria-required=false], foundation-autocomplete[aria-required=false]"
      ).filter(":not(.hide>input)").filter(":not(input.hide)")
      .filter(":not(foundation-autocomplete[aria-required=false] input)")
      .filter(":not(.hide>coral-multifield)").filter(":not(input.coral-multifield)").each(function(index, field) {
        toggleValidation($(field));
      });
    } else {
      $element.addClass("hide");
      $element.find("
        input[aria-required=true], coral-multifield[aria-required=true], foundation-autocomplete[required]"
      ).filter(":not(foundation-autocomplete[required] input)")
      .each(function(index, field) {
        toggleValidation($(field));
      });
    }
  }

  function toggleValidation($field) {
    var required = $field.prop("required");
    var ariaRequired = $field.attr('aria-required');
    var notRequired = ariaRequired === 'true';
    if ($field.is("foundation-autocomplete") && required !== 'undefined') {
      if (required === true) {
        $field[0].required = false;
        $field.attr('aria-required', false);
      } else if (required === false) {
        $field[0].required = true;
        $field.removeAttr('aria-required');
      }
    } else if (typeof ariaRequired !== 'undefined') {
      $field.attr('aria-required', String(!notRequired));
    }
    
    var api = $field.adaptTo("foundation-validation");
    if (api) {
      if (notRequired) {
        api.checkValidity();
      }
      api.updateUI();
    }
  }
})(document, Granite.$);