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

Group: 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 sgaem.blog02@gmail.com

Hope it will help you guys !!

Thanks and Happy Learning.