Hello Everyone,
As AEM is growing really well, A lot of people are learning AEM. So to help beginners,
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.
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.
Group: The component Group for the Page Components are always “hidden” as
The value /content(/.*)? means that we can access this template from anywhere under the “/content” folder.
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 |
- 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.
- 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.
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.
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.
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.
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 ?
ReplyDeleteThis 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..
ReplyDeleteweb designing course in chennai
Tq you for giving note
ReplyDeletegood one for beginners.
ReplyDeleteMany thanks
can you explain how to add clientlibs to your base page component?
ReplyDelete