Reuse Common Dialog Parts in AEM Components

PublishedMay 08, 2025

In AEM development, it's common to encounter scenarios where the same set of dialog fields such as alternative text for an image, or text and background color options are needed across multiple components. Traditionally, developers might copy-paste these dialog configurations into each component, but this leads to code duplication and maintenance headaches.

A better approach is to create a shared dialog fragment and reuse it across different components. This not only ensures consistency but also makes updates easier, as changes in the common dialog reflect everywhere it's used.

In this article, we'll discuss:

How to Reuse a Common Dialog As Is.
How to Reuse a Common Dialog and Override or Extend certain Properties.

Reuse a Common Dialog As Is

Let's create a reusable common dialog fragment that contains a two Color Picker for text and background color.

apps / aem-demo / components / commons / color / .content.xml

<?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"
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/container">
  <items jcr:primaryType="nt:unstructured">
    <textColor jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
      fieldLabel="Text Color"
      name="./textColor"
      showDefaultColors="{Boolean}true"
      showProperties="{Boolean}true"
      showSwatches="{Boolean}true"/>
    <backgroundColor jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
      fieldLabel="Background Color"
      name="./backgroundColor"
      showDefaultColors="{Boolean}true"
      showProperties="{Boolean}true"
      showSwatches="{Boolean}true"/>
  </items>
</jcr:root>

Now, we can reuse this dialog fragment in any component dialog by including it using Include resource type.

apps / aem-demo / components / text / _cq_dialog / .content.xml

<textStyle jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/include"
  path="/apps/aem-demo/components/commons/color"/>

The dialog will render all the fields from the color dialog fragment as part of your component's dialog. Any updates in the shared dialog will automatically reflect in all components using it.

Reuse a Common Dialog and Override or Extend certain Properties

You may be wondering at this point, what if we want use the common dialog but also need to add additional fields or update an existing property (e.g., name) to the component dialog?

In this case, we can use the sling:resourceSuperType property to extend the common dialog and override the properties we need. Additionally, ensure that the sling:resourceType matches that of the jcr:root node in the common dialog.

apps / aem-demo / components / text / _cq_dialog / .content.xml

<textStyle jcr:primaryType="nt:unstructured"
  sling:resourceSuperType="/apps/aem-commons/components/commons/color"
  sling:resourceType="granite/ui/components/coral/foundation/container">
  <items jcr:primaryType="nt:unstructured">
    <textColor jcr:primaryType="nt:unstructured"
      name="./textColorV2"/>
    <backgroundColor jcr:primaryType="nt:unstructured"
      name="./backgroundColorV2""/>
  </items>
</textStyle>

By using the sling:resourceSuperType property, we can inherit all the properties from the common dialog and override or add any additional fields as needed. This allows for maximum flexibility while still maintaining a clean and reusable dialog structure.

Reusing and extending common dialog fragments is a best practice that every AEM developer should adopt. It enforces consistency across components, minimizes redundant code, and enhances maintainability. Whether you choose to include dialogs directly or extend them for more tailored needs, these strategies streamline your workflow and set a strong foundation for scalable AEM projects.