How to add custom page properties in AEM?

To add custom page properties in Adobe Experience Manager (AEM), you will need to modify the Page Properties dialog of your template to include additional fields. Here’s a step-by-step guide on how to do this.

Step-by-Step Guide

1. Locate the Page Component
   Navigate to the page component associated with the template you want to modify. This is often found at /apps/<your_project>/components/structure/page.
2. Create a Dialog Node
   If it does not exist already, add a new cq:Dialog node within the page component. This is where you will define the structure of the Page Properties dialog.
3. Define the Dialog Structure
   Within the cq:Dialog node, create a structure that outlines the layout and fields of the dialog. Here is a basic structure for adding a text field:

<cq:Dialog jcr:primaryType="nt:unstructured">

  <content jcr:primaryType="nt:unstructured">

    <items jcr:primaryType="nt:unstructured">

      <tab1 jcr:primaryType="nt:unstructured">

        <items jcr:primaryType="nt:unstructured">

          <myTextField

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

            fieldLabel="My Custom Field"

            name="./myCustomField"/>

        </items>

      </tab1>

    </items>

  </content>

</cq:Dialog>

This structure will add a new text field labeled “My Custom Field” to the Page Properties dialog.

4. Save and Test Your Changes
   Save your changes and open the Page Properties dialog of a page using the modified template. You should see your custom field in the dialog.

Additional Explanation

Understanding Page Properties

Page properties in AEM are metadata associated with a page. They can include details such as the page’s title, description, tags, and more. These properties can be viewed and edited through the Page Properties dialog in the AEM authoring interface.

The Need for Custom Page Properties

Custom page properties enable you to extend the default metadata associated with your pages. This can be useful for adding specific information that is relevant to your website or application, which isn’t covered by the default properties.

Important Considerations

When adding custom page properties, ensure that the names of your properties are unique and do not conflict with existing properties. Also, remember that any changes made to the Page Properties dialog will impact all pages using the associated template.

In conclusion, adding custom page properties in AEM involves navigating to the page component of your template, adding a cq:Dialog node, and defining the structure of the dialog to include your custom fields. This process allows you to expand the default page metadata to better meet the needs of your project.