Musings on SharePoint, Adobe CQ, ECM, and more…

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.

Praveen Modi

Praveen works at Razorfish which is one of the largest digital advertising agency in the world. His mantra for life is "You are never too old to set another goal or to dream a new dream". He lives in sunny Austin, TX with his beautiful wife Nidhi and son Aariv.

7 Comments

  1. Ratna Kumar Kotla

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

  2. Ratna Kumar Kotla

    Please help me in sorting out this issue.

  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.

  4. Kama

    Very Good Explanation………….Cheerssssssssss

  5. Kamal

    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

  6. daksh

    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

  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.

    Bests,
    Anirban B

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.