#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
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
AEM Migration from Your Current CMS
July 9, 2024

Conquering AEM Migration: Shift Seamlessly From Your CMS to Adobe Experience Manager

Discover the core CMS issues that lead enterprises to upgrade to AEM and build your foundation around the migration process as a whole.

Read More
Future-Proof Your Content Authoring with a Component Content Management System
June 7, 2024

Future-Proof Your Content Authoring with a Component Content Management System

You could be leaving untapped ROI on the table with a standard CMS. But a CCMS can fix that, and we’ll explain how.

Read More