Create a Template in Adobe CQ5

In this article we will talk about How to create a template in adobe cq5 using CRXDE Lite.

First lets understand what is a template in Adobe CQ5 :-

Template is basically a blueprint for creating a page and describes what are the components that can be used within the page. It has the same hierarchy as page but with no content. For creating a page we need a template. Creating components and render them on a page is the most common task that a CQ developer does in his day to day job. Lets see how to create a template.

Note:- This is traditional way of creating templates in classic UI, which is deprecated after AEM 6.x. Please create template using Touch UI, if you are using version later then AEM 6.0. 

Steps to create a Template:-
  • Login to CQ environment and go to CRXDE Lite (Ex: www.domain.com/crxde)
  • Create a Template folder under /apps/<site-id>/
  1. Create Folder window is displayed.
  2. Enter templates in the name field.
  3. Click on ok button to create the folder.

1create-template-adobe-cq5-aemcq5tutorials

  • Right click on /apps/<site-id>/templates folder then select Create –> Create Template

3create-template-adobe-cq5-aemcq5tutorials

  • Enter the required details for the template as shown in below figure, and then click on next.
  • The property sling:resourceType  cq:Template will be created on the Templates jcr:content node.Enter the following information into the Create Template dialog box:
    • Label: A node for template will be created in crx repository with this name.
    • Title: The title that is assigned to the template. This will be displayed when we create a page using template in Site Admin.
    • Description: The description that is assigned to the template.
    • Resource Type: The component’s path that is assigned to the template and copied to implementing pages. Enter <site-id>/components/page/contentpage.Resource type basically tells that this template will be used to create an Adaptive Form or Adaptive Document or a Site Page.
      For creating an Adaptive Form Enter: Resource Type -fd/af/templates and Allowed Path – /content/forms/af(/.*)?  
      For creating an Adaptive Document Enter: Resource Type -fd/af/templates and Allowed Path – /content/forms/af(/.*)?
      For creating a Site Page Enter: Resource Type -<path of page> and Allowed Path – /content(/.*)? or if it is place under apps /apps(/.*)?
    • Ranking: The order (ascending) in which this template will appear in relation to other templates while creating a page in Site Admin. Setting this value to 1 ensures that the template appears first in the list.

4create-template-adobe-cq5-aemcq5tutorials

  • Select Next for “Allowed Paths”.
  • Enter the following value: /content(/.*)?
    Note:- /content(/.*)? 
    means that we can access our template, anywhere placed inside content folder, if we want to access template from apps folder change path to /apps(/.*)?. 

5create-template-adobe-cq5-aemcq5tutorials

  • If you forget to enter allowedPaths after clicking on OK. You can create the following property on your template node:
    Name: allowedPaths    Type: String[] (String Array)     Value: /content(/.*)?
  • Click on the Next button.

6create-template-adobe-cq5-aemcq5tutorials

  • Click on the Next button.

7create-template-adobe-cq5-aemcq5tutorials

  • Click on the Ok button.
  •  Click on Save All button. Your CQ Template is created successfully as shown below.

8create-template-adobe-cq5-aemcq5tutorials

 Note :- The Order of evaluation at the time of page creation is(with cq:allowedTemplate as highest priority):-

  • cq:allowedTemplates
  • allowedPaths (deprecated)
  • allowedParents
  • allowedChildren

CQ:AllowedTemplates:- We add this property at root or website(jcr:content of website root page) level to restrict which are the allowed template for this website. It is a multi array field to support multiple paths from where it can pick templates.

allowedPaths:- It is also similar to CQ: AllowedTemplates but it is deprecated and if we use both allowedPaths and allowedTemplates then allowedTemplates gets priority.

Lets understand allowedParents and allowed Children using an example:- Following example describes can we create a Template T under a Page P or not.

template-resolution-order

Testing your Template

Although we still need to create a component to render this page, we can still verify that the template is showing up or not.

Approach 1:

  • From your CQ Welcome page select Websites.
  • Select the ‘Websites’ folder and then click New.
  • Select New Page from the dropdown.
  • You will notice that your Template appears on the top.

Approach 2:

  • Go to Adobe Manager ex: www.domain.com/projects.(EX: www.localhost:4502/projects)
  • Go to Sites and select Create Page from Top Navigation Bar.
  • On the next screen it will ask to select template, you can verify your template here.

Also See CQ Best Practices to Follow and Project Structure.

Spread the love
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *

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