#Adobe Experience Manager

How to add custom page properties in AEM?

Contents

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.

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

Back to Glossary

Axamit blog

Get Inside Scoop on Adobe Experience Manager Updates, Trends, Best Practices
October 18, 2024

Data Governance Framework: A Path to Data Integrity and Compliance

Explore how a data governance framework helps organizations manage data quality, security, and compliance with real-world examples and best practices.

Read More
October 2, 2024

How to Implement Data Governance: the Surefire Practices

Discover how proper data governance not only protects your business from risks but also empowers your team to unlock new opportunities and insights.

Read More
September 6, 2024

Optimizing Adobe Experience Manager Performance: Expert Techniques for Peak Results

Discover actionable techniques to boost Adobe Experience Manager performance and ensure a seamless experience for your users.

Read More