Base Page Component in AEM
In AEM, Templates are used as base of every created page, doesn’t matter whether it is home page, Product page or Article page, every page is backed by a template. Basically, Templates define the structure, initial content and policies of the page, which are applied to the resultant page created by the template.
In order to create any template, we require the Page component for example Basepage component, Articlepage component etc. Which is again used to create the template-type then to create any template we have use any Template Type which serve as the template for any template which hole the connection between the page components and templates means it indicate that which page component scripts should be render.
Every he Template Type has four nodes: Initial, policies, structure, thumbnail
Here we are discussing these thing as per the editable template concept.
So let’s first try to understand the page component concept. What is that and why we use them?
If you go to the /libs/core/wcm/components/page/v2/page and see this OOB page component there are many script files available here and dialog, clientlib, and design dialog as well. Means the page component has its own script defined what to render for example: for header and footer what styling should apply, what HTML tags should be render in the head of the html page how social media relates script should be render.
In simple language this page has defined its way how it will render when any page is created using this page component. And page is created when we have created the template by using any template type and template type refer to that particular page component by using the resourceSuperType. In the below screenshot you can see it refer to the “wcm/foundation/components/basicpage/v1/basicpage”.
which is again render the basicpage from the foundation components which are OOB in AEM, Are by default come with AEM.
So lets create the one page component for my demoproject. I am going to create one basepage component, I am creating this basepage component because it will be the base for other component which I will create for specific use case like Article Page template, Root page template and home page template etc. We can also directly refer this v2/page but it is not a good practice, Every time we should use the custom one.
for that go to the page components inside the structure folder of the project in the app folder here is the path: “/apps/demoproject/components/structure” Here I have created the basepage page component and created the custom scripts. Overall concept will remain the same as we have for v2/page. But here we have called some our models in order to support the custom functionality.
For example: I have created the metaproperties.html by which I have defined the meta tags and og tags which are good for SEO perspective.
So I have used the same script code except for the metaproperties.html and head.links.html files. Because we can customize them as per need. So for these I have called my MetaProperties model inorder to provide the og image, canonical and ogurl based on some custom business logic.
Here is the code for those metaproperties.html and head.links.html.
head.links.html
<link data-sly-use.metaData=”com.demoproject.core.models.MetaProperties” data-sly-test.metaCanonical=”${metaData.canonicalUrl}” rel=”canonical” href=”${metaData.canonicalUrl}” >
<link data-sly-use.page=”com.adobe.cq.wcm.core.components.models.Page” data-sly-test=”${!metaData.canonicalUrl && page.canonicalLink}” rel=”canonical” href=”${page.canonicalLink}” >
<link data-sly-test=”${page.alternateLanguageLinks}” data-sly repeat=”${page.alternateLanguageLinks.entrySet}” rel=”alternate” hreflang=”${item.key.toLanguageTag}” href=”${item.value}”>
metaproperties.html
<sly data-sly-use.page=”com.adobe.cq.wcm.core.components.models.Page”data-sly-use.metaData=”com.demoproject.core.models.MetaProperties”/>
<meta name=”keywords” content=”${properties.keywords}”/>
<meta name=”title” content=”${properties.jcr:title @context=’unsafe’}”/>
<meta property=”og:description” content=”${properties.jcr:description}”/>
<meta property=”og:type” content=”${properties.ogType ? properties.ogType : ‘website’}”/>
<meta data-sly-test=${metaData.ogImage} property=”og:image” content=”${metaData.ogImage}”/>
<meta data-sly-test=”${metaData.canonicalUrl}” property=”og:url” content=”${metaData.canonicalUrl}”/>
<meta data-sly-test=”${!metaData.canonicalUrl && page.canonicalLink}” property=”og:url” content=”${page.canonicalLink}”/>
<link rel=”icon” data-sly-test=${properties.favicon} type=”image/png” href=”${properties.favicon}”/>
and here is the model class.
private String ogUrl;
private String ogImage;
private String canonicalUrl;
@SlingObject
SlingHttpServletRequest request;
@Inject
Page currentPage;
@PostConstruct
public void init() {
LOG.info(“—inside the Meta Properties Model———–“);
final InheritanceValueMap vm = new HierarchyNodeInheritanceValueMap(currentPage.getContentResource());
canonicalUrl= StringUtils.isNotBlank(vm.getInherited(“cq:canonicalUrl”, String.class))? vm.getInherited(“cq:canonicalUrl”, String.class): StringUtils.EMPTY;
ogUrl = StringUtils.isNotBlank(vm.getInherited(“cq:canonicalUrl”, String.class))? vm.getInherited(“cq:canonicalUrl”, String.class): StringUtils.EMPTY;
ogImage = StringUtils.isNotBlank(vm.getInherited(“ogimage”, String.class))? vm.getInherited(“ogimage”, String.class): StringUtils.EMPTY;
}
you can create the getter and setter methods easily that why not sharing the code for that.
Once you created the basepage component it will start rending the script from your own custom page component. The priority will be is given to your custom scripts then the v2/page component script will be render. Means, If you want to overrise any file you can write that in your custom page component else it will render the v2/page script which are default one.
Note: we have refer the resourceSuperType to the core v2/page.
sling:resourceSuperType =“core/wcm/components/page/v2/page”
There is one more thing I have created, I have reused the OOB page properties which you can see in the page properties like title, Advance etc. And the main thing I on top of the default title properties I have created some custom fields in the basic tab, for Og type, Og image etc. Because we are reusing everything possibly. So, It not a good practice to keep the again, So if you can see in the path property of the title node it is refereeing the title of the core basic page component, Which means it is rendering the all default fields in the basic tab form OOB and on top of that I have created these Keywords, ogtags, erropage and favicon fields. So, in this way we can create the custom page properties as per requirement. In the upcoming post I will show how to create the Global custom page properties, we can also create those here but that is not a good practice it is base for all other page component. And those global properties should be specific use case only. For example, we can create those global properties in the Root page component which will create the root page and then from there we can get those. So, in that way it will be as per the page hierarchy.
here is the path for that title node property: /mnt/overlay/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic/items/column/items/title
After deploying the code I have created the page and can see the changes working on. Here I have created the template which refereeing this basepage component. In the upcoming post I will show how to create custom template type and templates. Where we will see how to use them and create the custom pages with custom style/design, Structure, policies and initial content at the template level.
