In my last article in this series we discussed about how to Setup a new CQ application/project. This article demonstrates how to create a custom page template in Adobe AEM 5.6 (aka CQ5).
A Template is a basis of a page and it defines which components can be used within the selected scope. Its the hierarchy of nodes that has the same structure as the page to be created, but without any actual content.
Templates point to a page component which read the information from the JCR repository. Building components that reads content from the JCR and rendering content on a page is one of the primary task in any CQ developer’s day to day job.
Here are the steps to create the Page template:
- Login to your CQ environment and go to CRXDE Lite (Ex: www.your-domain.com/crxde)
- Right click on /apps/templates folder and select Create –> ‘Create Template’
- Fill out the information in the dialog fields as shown in image below and then select ‘Next’
Label – Name of the template (node) as identified in JCR repository
Title – Template title as visible to the authors
Description – Description of the template to help authors identify the right template
Resource Type – the component page that will be assign to the Template and copied on all the pages using this Template. We will create this component in the next article.
Ranking – Order in which the template will appear in the list of templates. Ranking 1 will list the Template at the top - Enter “/content(/.*)? in the Allowed Paths input box and select next until you an option to save the changes.
CQ Template is successfully created.
Test your Template
Although we still need to create a component to render this page, we should still verify if the template is showing up for authors.
1. From your CQ Welcome page select ‘Websites’
2. Select the ‘Websites’ folder and then click ‘New’
3. Select New Page from the dropdown
4. You will notice that your Template “Two Column Black Body Template” appears on the top
So far we have discussed how to set up a new CQ application and how to create a CQ Page Template. Next we will create a component to render this page.
I created same as you said. But I didn’t get the template.
Please help me in sorting out this issue.
Ratna – So the template doesn’t show up for you when you try to create a new page?
Make sure you followed the steps.
Very Good Explanation………….Cheerssssssssss
Check whether there is a proper mapping of your Allowed Template attribute which is inside the content, with that of the Template path ie /apps/demo/templates/contentpage
I created the template. and it is working fine.
but the template is not visible in ‘TOOL’, it is only working in siteadmin..please help
Praveen,
I am looking to create a layout where every component of that layout is in fluid structure.
I want to mean – I can put the Hero image middle of the page and left navigation can be set as top bar to navigate.My other components should be like box or table which can settle in any device like Mobile,Tablet or a huge monitor without any distortion.
I know the Bootstrap or responsive design but not sure how can I add that one in Adobe CQ / AEM layout.
Please help me to build that kind of layout/page.
Will wait for your turnaround in that busy schedule.
Bests,
Anirban B