How to create a Template in Adobe CQ5/ AEM

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

First let's understand what is a template in Adobe CQ5:-

The 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. Let's see how to create a template.

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 a Folder window is displayed.

2.    Enter templates in the name field.

3.    Click on the ok button to create the folder.

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

·       Enter the required details for the template as shown in the 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 the template will be created in the crx repository with this name.

§  Title: The title that is assigned to the template. This will be displayed when we create a page using a 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.

·       Select Next for “Allowed Paths”.

·       Enter the following value: /content(/.*)?
Note:- /content(/.*)? means that we can access our template, anywhere placed inside the content folder, if we want to access template from apps folder change path to /apps(/.*)?. 

·       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.

·       Click on the Next button.

·       Click on the Ok button.

·        Click on Save All button. Your CQ Template is created successfully as shown below.

 Note:- The Order of evaluation at the time of page creation is(with cq:allowedTemplate as the 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.

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

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 a template, you can verify your template here.