Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How can I inherit page properties

Avatar

Level 1

I have created a template based on a base page template and I have added one new property to a new template.

Now I want to inherit the new property to all the pages

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @kunald36548265 

As suggested by others in this thread, you can use the inheritedPageProperties.<your-property> in the sightly code to inherit <your-property> in child pages.

 

Use case where I've used inheritedPageProperties:

The requirement is to select a site section only on the top level page of a content tree and all pages underneath that page must use the same site section.

This requirement was achieved using inheritedPageProperties

A new property ( of type = select list) named "siteSection" is defined at the page template dialog. This select list has a predefined list of names of the various areas of the site. Along with that, the sightly code has the <meta name="" content=""> HTML HEAD attribute in on the page that looks for a property by the name "siteSection" on the current page.

If found on the current page, then it reads it and displays the value.

If not found, inheritedPageProperties climbs at its parent page and looks for a property by the name "siteSection". If found, reads it and displays it. If not, then repeats the process up in the page hierarchy until it finds a value to the property.

 

The marketing business team set the property only on handful of pages and the entire site had the attribute showing in no time.

 

<data-sly-test="${inheritedPageProperties.siteSection}"> <meta name="site_section" content="inheritedPageProperties.siteSection"> </sly>

 

 

regards,

Preetpal

View solution in original post

5 Replies

Avatar

Community Advisor

For getting parent page properties from child page, you can use

 

<div> ${inheritedPageProperties.myProperties} </div>

 


Referencehttps://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-inheritedpagepropertie...

Avatar

Community Advisor

@kunald36548265  You can conditionally also check for empty case for inherited page properties

 

<link rel="icon" type="image/png" href="${inheritedPageProperties.favIcon ? inheritedPageProperties.favIcon : '/content/dam/***/favicon.png'}"/>

Avatar

Employee

In case you are talking about metadata properties of parent dialogue, you should use Sling Resource Merger. Explore this link - https://experienceleague.adobe.com/docs/experience-manager-65/developing/platform/sling-resource-mer...

 

Avatar

Community Advisor

You need ton to understand that when viewing the component in the XF environment /content/experience-fragments/* or /conf, inheritedProperties will never be visible. Until you visit the page that utilizes the XF... which content is rendered under /content/my-site/*, then you will be able to see the inheritedPageProperties being rendered.

 

Here's how you would do it in sightly, JSP, and backend Sling Models:

 

Sightly:

${inheritedPageProperties.myCustomProperty}
${inheritedPageProperties['myCustomProperty']}
${inheritedPageProperties.jcr:title}
${inheritedPageProperties['jcr:title']}

 

JSP:

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="com.day.cq.commons.inherit.InheritanceValueMap" %>
<%@ page import="com.day.cq.commons.inherit.HierarchyNodeInheritanceValueMap" %>

<%
    InheritanceValueMap ivm = new HierarchyNodeInheritanceValueMap(currentPage.getContentResource());
    String inheritedValueMyCustomProperty = ivm.getInherited("myCustomerProperty", String.class);
    String inheritedValueJcrTitle = ivm.getInherited("jcr:title", String.class);
%>
inheritedValueMyCustomProperty = <%= inheritedValueMyCustomProperty %>
inheritedValueJcrTitle = <%= inheritedValueJcrTitle %>



Sling Models:

import com.day.cq.commons.inherit.InheritanceValueMap;
import com.day.cq.commons.inherit.HierarchyNodeInheritanceValueMap;

@ScriptVariable
private Page currentPage;
...
InheritanceValueMap ivm = new HierarchyNodeInheritanceValueMap(currentPage.getContentResource());
String inheritedValueMyCustomProperty = ivm.getInherited("myCustomerProperty", String.class);
String inheritedValueJcrTitle = ivm.getInherited("jcr:title", String.class);

 

Learn more from the documentation here: AEM inheritedpageproperties with Sightly, JSP, OSGI Bundle - Sourced Code

Avatar

Correct answer by
Community Advisor

Hello @kunald36548265 

As suggested by others in this thread, you can use the inheritedPageProperties.<your-property> in the sightly code to inherit <your-property> in child pages.

 

Use case where I've used inheritedPageProperties:

The requirement is to select a site section only on the top level page of a content tree and all pages underneath that page must use the same site section.

This requirement was achieved using inheritedPageProperties

A new property ( of type = select list) named "siteSection" is defined at the page template dialog. This select list has a predefined list of names of the various areas of the site. Along with that, the sightly code has the <meta name="" content=""> HTML HEAD attribute in on the page that looks for a property by the name "siteSection" on the current page.

If found on the current page, then it reads it and displays the value.

If not found, inheritedPageProperties climbs at its parent page and looks for a property by the name "siteSection". If found, reads it and displays it. If not, then repeats the process up in the page hierarchy until it finds a value to the property.

 

The marketing business team set the property only on handful of pages and the entire site had the attribute showing in no time.

 

<data-sly-test="${inheritedPageProperties.siteSection}"> <meta name="site_section" content="inheritedPageProperties.siteSection"> </sly>

 

 

regards,

Preetpal