Show/Hide AEM Dialog Fields on Dropdown Selection

PublishedApril 10, 2024

Viewed510 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.