March 15, 2020
Estimated Post Reading Time ~

Create AEM Templates - Everything about AEM Templates

Defining Templates
· A template is the basis of a page.
· A Template is like a stencil or a frame or blueprint which is used to create multiple pages with the same page structure.
· Template defines which components can be added on the created page.
· All the pages having the same template is going to have the same design.

Steps to create a template
Step 1. Open CRXDE Lite ( http://localhost:4502/crx/de)
Step 2. Go to your project folder or create one ( E.g. / apps/training )
Step 3. Create a folder to organize all templates ( E.g. templates )
Step 4. Right-click and select "create template "

Label: Name of the node
Title: Name of the template
ResourceType: Location of page component which will be used to render the page
Ranking: Order of the template which will be visible to the Author. 



Step 5 .Click Next and Enter allowedParents : /content(./*)?
Step 6. Click Next, Next & Finish.

A template node will be created of type cq:Template with some properties that we have added until Step 6.

Restrict usage of template

You may want to restrict usage of the template by author, For Example
· A product page should never be created as the home page.
· A homepage should never be created under the products page.
· A page can only be created under path /content/training/en/.

allowedPath : Path of a page that is allowed to be based on this template.
allowedParents : Path of a template that is allowed to be a parent of this template.
allowedChildren : Path of a template that is allowed to be a child of this template.

Some common regex for restrictions.

· /content : Restrict creation of page only under content node.
· /content(./*)? : Restrict creation under content node and it's child node
· /content/training: Restrict creation of page under /content/training node only, Template will not be available at /content node or for child nodes of training.
· /content/training (./*)? : Restrict creation of page under training node under content and child node.

Adding Thumbnail to Template
The Thumbnail of the template is defined by thumbnail.png node inside the template node.
To show a thumbnail for page/template, either you can create a new thumbnail node for template node and add images of different renditions OR you can easily generate a thumbnail for a page and use the node structure for the template.
Step 1. Select the page created by the template
Step 2. Click on view properties in Touch UI
Step 3. Go to the Thumbnail tab and upload an image or generate a preview from page content.

Go to CRXDe and go to the page which you have created, You will find the node named 'file' containing dam: thumbnails.



Step 4. Copy file node and paste it at /apps/training/templates/basicartile/jcr:content
Step 5. Rename file node to thumbnail.png so that AEM can recognize this node as a thumbnail as shown below.

Now create page wizard will show you a template with a thumbnail and the pages created with the template as well.



By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.