Extending Page Properties in AEM
Extending Page Properties
by Mayur SatavOverview
It is always one of the prime requirements for the projects to extend page properties. It helps to manage metadata and many other functionalities associated with the page.In this blog we will see how to extend page properties.
Step1: Open CrxDe and go to your project package. Then select the page component node. You will see sling:resourceSuperType property copy the path associated with that property. This property points to the v2 version of the core page component.
Step 2: Now paste that core page component path in the node search bar and do not forget to add /apps/ before /core/. Otherwise, it will not navigate you to that component. The complete path should look like this.
/apps/core/wcm/components/page/v2/page
You can refer below image for clarity.
Now if you click on the page component node you will see the sling:resourceSuperType property again. So basically this v2 core page component further points to the foundation basic page.
But now we have nothing to do with the foundation component. Just simply open the page node and copy the cq:dialog node structure.
Step 3: Now Paste that node structure into our project page component and remove the social media tab because it is not require, we need dialog structure only.
Step4: In this step we will add a New tab and fields. Now create tab structure and add whatever fields you want to add the way you do it for normal components dialogs. You can refer to the below code for that structure.
<newtab
cq:showOnCreate="{Boolean}true"
jcr:primaryType="nt:unstructured"
jcr:title="New Tab"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<section
jcr:primaryType="nt:unstructured"
jcr:title="New Custom tab"
sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
<items jcr:primaryType="nt:unstructured">
<textfield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
name="./testfield"/>
</items>
</section>
</items>
</column>
</items>
</newtab>and That's it you are done !!!
Same way you can do advance customisation for your page properties.
Q&A
Please use this thread to ask questions relating to this article