// you’re reading...

#Adobe AEM

CQ5 Development – How to Build a CQ5 Page Template

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:

    1. Login to your CQ environment and go to CRXDE Lite (Ex: www.your-domain.com/crxde)
    2. Right click on /apps/templates folder and select Create –> ‘Create Template’
    3. Fill out the information in the dialog fields as shown in image below and then select ‘Next’Create CQ Page Template

      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

    4. Enter “/content(/.*)? in the Allowed Paths input box and select next until you an option to save the changes.Create CQ Page Template

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

Create CQ Page Template

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.

CQ5 Development – How to Build a CQ5 Page Template

You might be interested in:


7 comments for “CQ5 Development – How to Build a CQ5 Page Template”

  1. I created same as you said. But I didn’t get the template.

    Posted by Ratna Kumar Kotla | January 20, 2014, 11:44 am
  2. Please help me in sorting out this issue.

    Posted by Ratna Kumar Kotla | January 20, 2014, 11:45 am
  3. Ratna – So the template doesn’t show up for you when you try to create a new page?

    Make sure you followed the steps.

    Posted by Praveen Modi | January 24, 2014, 12:28 am
  4. Very Good Explanation………….Cheerssssssssss

    Posted by Kama | November 19, 2014, 11:01 am
  5. 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

    Posted by Kamal | November 19, 2014, 11:06 am
  6. 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

    Posted by daksh | December 15, 2014, 4:01 am
  7. 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.

    Anirban B

    Posted by Anirban | September 14, 2015, 7:13 am

Post a comment

AWS Certified Solutions Architect
    Locations of visitors to this page
View Praveen Modi's profile on LinkedIn

Recent Comments

    Warning: Use of undefined constant comments - assumed 'comments' (this will throw an Error in a future version of PHP) in /home/customer/www/praveenmodi.com/public_html/wp-content/plugins/get-recent-comments/get-recent-comments.php on line 928

    Warning: Use of undefined constant trackbacks - assumed 'trackbacks' (this will throw an Error in a future version of PHP) in /home/customer/www/praveenmodi.com/public_html/wp-content/plugins/get-recent-comments/get-recent-comments.php on line 929