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