Extending Page Properties in AEM

[#1]

Extending Page Properties

  by Mayur Satav

Overview

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.

For more visit https://medium.com/@mayursatav

Q&A

Please use this thread to ask questions relating to this article

[#2]

@MayurSatav Thank you for sharing this with the community. I have seen this use case had been asked many times in the past. I hope your article helps those who are looking to extend page properties. 

[#3]

Thanks @kautuk_sahni ,

[#4]

Agree with @kautuk_sahni, this comes up as a question a number of times. Thank you @MayurSatav.

[#5]

Thanks for the article @MayurSatav 
I'm currently trying to figure out how to access a custom page property from a custom component in the html file with data-sly-test. It would be great if you could share a your ideas how this can be done. Thanks!

[#6]

@MayurSatav I figured it out myself. It works for my like this: ${currentPage.Properties.fieldName} It was previously not working because of an issue with the checkbox in the properties.