Expand my Community achievements bar.

SOLVED

Customizing Site Properties

Avatar

Level 2

Can someone point me to documentation on how to customize any of the site properties tabs? Screenshot of the page I am trying to customize is attached.

AEM Site Properties.png

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

If the requirement is to create new tab for page properties, then we have to go for overriding instead of overlaying. Below is the steps for the same.

  • Create a new component  -> Delete the JSP that is automatically created.
  • To the newly created component node -> add sling:resourceSuperType with value as "/libs/wcm/foundation/components/page"
  • Create Touch UI dialog structure for the newly created component (same as is in "libs" till this node - /cq:dialog/content/items/tabs/items)
  • Add node(granite/ui/components/foundation/section) for your new tab.
  • Create template with resourceType being the component that you have created as above and hence the page out of it. -> You would see the new tab coming up on Page properties and while creating page.
  • If you don't want this new tab to show up while creating page, add property named "cq:showOnCreate" (Boolean type set to false) - You can see this property for tabs other than "Basic" and "Advanced" which alone will show up while creating new page.

Screenshot for reference: (wcmpage-override is component inheriting from wcm/foundation/components/page)

Page created out of templates(with wcmpage-override) will pick this new tab along with entire logic/files/nodes from wcm/foundation/components/page.

pageoverride.png

pageprops.png

View solution in original post

5 Replies

Avatar

Community Advisor

HI,

Above properties of page is nothing but the dialog of page component.  To customise, we need to overlay the same.

  • Check for the resourceSuperType property of the page component that you are using for your project.
  • Projects created out of maven archetype will have superType to be wcm/foundation/components/page.
  • Navigate to that resource(/libs/wcm/foundation/components/page/cq:dialog), you will find these tabs which is again including the properties from foundation/components/page/cq:dialog.

With this above flow, we need to ultimately overlay the path /libs/foundation/components/page/cq:dialog to /apps/foundation/components/page/cq:dialog and do the customisations here.

We need not change any reference anywhere in the flow, because the paths are mentioned without "libs". Per the "Resource Resolver Factory" configuration, apps will be checked first.

Screenshot for reference:

page_dialog.png

Avatar

Level 2

Thank you for pointing me in the right direction vijis31358935.

What if I just want to add a new tab, can I do that without copying everything from /libs/foundation/components/page/cq:dialog to /apps/foundation/components/page/cq:dialog? When I create just one new tab under "/apps/foundation/components/page/cq:dialog", it doesn't show the default tabs from "/libs/foundation/components/page/cq:dialog" unless I copy the default tabs into "/apps/foundation/components/page/cq:dialog"

Avatar

Correct answer by
Community Advisor

Hi,

If the requirement is to create new tab for page properties, then we have to go for overriding instead of overlaying. Below is the steps for the same.

  • Create a new component  -> Delete the JSP that is automatically created.
  • To the newly created component node -> add sling:resourceSuperType with value as "/libs/wcm/foundation/components/page"
  • Create Touch UI dialog structure for the newly created component (same as is in "libs" till this node - /cq:dialog/content/items/tabs/items)
  • Add node(granite/ui/components/foundation/section) for your new tab.
  • Create template with resourceType being the component that you have created as above and hence the page out of it. -> You would see the new tab coming up on Page properties and while creating page.
  • If you don't want this new tab to show up while creating page, add property named "cq:showOnCreate" (Boolean type set to false) - You can see this property for tabs other than "Basic" and "Advanced" which alone will show up while creating new page.

Screenshot for reference: (wcmpage-override is component inheriting from wcm/foundation/components/page)

Page created out of templates(with wcmpage-override) will pick this new tab along with entire logic/files/nodes from wcm/foundation/components/page.

pageoverride.png

pageprops.png

Avatar

Employee

[1] should be good starter to understand how you can extend this. Hope this helps

[1] : Extending Page Properties in AEM Sites