Ad Code

Friday, February 1, 2019

How to make a Page Component and Template in AEM

Hello Everyone,

As AEM is growing really well, A lot of people are learning AEM. So to help beginners,
I am here with this blog about creating page Component and template in AEM.

In AEM component development, Page Component is the very first step to do.
How to make a Page Component in AEM 6.4
  • Usually an AEM Project maintains a hierarchy to create page component.
Add caption
  • Now to create a Page Component, Right click on the structure folder and click on Create Component.
Add caption
  • Now give proper name and Title(human readable title) and inherit the page component “/apps/core/wcm/components/page/v2/page” to get all the basic things from parent page component.Click on Next and Finish.
The value of Super Type used to change as per the AEM Version.
In AEM 6.3, we use “/apps/core/wcm/components/page/v1/page” for Super Type.
In AEM 6.2, we use “/libs/wcm/foundation/components/page” for Super Type.

Note: Use relative Paths, avoid using absolute one as per the best practice in AEM.So don’t  use absolute path.
Add caption

: The component Group for the Page Components are always “hidden” as
we don’t need to drag and drop this component anywhere.So use “.hidden” for the Group.
  • Now add parsys in a basePage.html.
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp"/>
<div data-sly-resource="${'parsys' @resourceType = 'wcm/foundation/components/parsys'}"></div>
Now it’s time to create a template for the page component.

How to make a template from the Page Component
  • Go to the templates folder ,Right click and choose Create Template.
Add caption
  • Fill the label, Title,description and “resourceType which points to page component” we previously created.
Add caption
Ranking:This property is used to show the templates in the ascending order while creating pages. Which template is having the highest ranking which will be shown above. “1” is the highest ranking for a template.
  • Now click on next. Now there is an option for allowedPaths.This property is important as this template would be visible only when there is any allowedPaths for template.
Add caption
The value /content(/.*)?  means that we can access this template from anywhere under the “/content” folder.

  • Click on Next.There are options for allowed Children and allowedParents.Don’t fill these values for now.We will cover these properties in a while.Directly go for finish and Save.
Now it’s time to create pages from the templates.

How to make a Page from the Template
  • Go to http://localhost:4502/sites.html/content and click on Create.Choose the base Page Template.
  • Fill the name and Title for the page and click on open.
  • You can see the page having a parsys defined in basePage Component. Now you can drag and drop any component in the page.
Add caption
Now Let’s discuss more about some of the properties of a template like allowedTemplates, allowedPaths, allowedParents, allowedChildren.
  • allowedPaths:
    • This is a template level property so must be defined in the template level.
    • It's value will be the path under which this template will be visible for page creation in siteadmin.
Note :- This property is required only for the top level page creation. If you don't provide this property then this template will not be visible in siteadmin. This property is also required if you don't add cq:allowedTemplates property at top level page jcr:content node.
  • cq:allowedTemplates:
    • This property is a page level property, so must be defined on the jcr:content node of the template.
    • It's value will be the path of templates those will be visible for page creation under current page in siteadmin.
    • This property is having the highest priority.
Note: First AEM check cq:allowedTemplates property that can be displayed under the page created using this template.
Then AEM check for allowedPaths property of these selected template group and check that path present in this property matches with the path of page, yes or not, if yes then this template will be displayed else not.
  • allowedParents:
    • This property is a template level property so must be defined at template node.
    • It's value will be the path of templates those can behave as the parent of this template at the time of page creation in siteadmin.
Note:This property is used to add another level of restriction i.e. if your templates satisfies both of above defined criteria or they are not present or defined empty then this property will be checked.

If this property exists then AEM will check the value of this property. This property can have the path of the templates that can behave as parent of this template.

cq:allowedTemplates (Parent Page) + allowedPaths (Parent  Template) + allowedParents (Child Template) = template to be displayed.
  • allowedChildren:
    • This property is a template level property so must be defined at template node.
    • It's value will be the path of the templates those are allowed or visible for page creation under this template in siteadmin.
Note: If above defined properties and this property are not empty then a new level of restrictions will be added for showing templates in siteadmin.

cq:allowedTemplates (Parent Page) + allowedPaths (Parent  Template) + allowedParents (Child Template) + allowedChildren (Parent Template) = template to be displayed.

If you have any query or suggestion then kindly comment or mail us at

Hope it will help you guys !!

Thanks and Happy Learning.


  1. Thanks a lot for keep posting the learning articles. I do have a query on a difference b/w template type and structural component. What is the difference between them and which one is getting used when the template is getting created ?

  2. A IEEE project is an interrelated arrangement of exercises, having a positive beginning and end point and bringing about an interesting result in Engineering Colleges for a particular asset assignment working under a triple limitation - time, cost and execution. Final Year Project Domains for CSE In Engineering Colleges, final year IEEE Project Management requires the utilization of abilities and information to arrange, plan, plan, direct, control, screen, and assess a final year project for cse. The utilization of Project Management to accomplish authoritative objectives has expanded quickly and many engineering colleges have reacted with final year IEEE projects Project Centers in Chennai for CSE to help students in learning these remarkable abilities.

    Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
    Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

  3. This article content is really unique and amazing.This article really helpful and explained very well.So i am really thankful to you for sharing keep it up..
    web designing course in chennai

  4. can you explain how to add clientlibs to your base page component?