ÃÛ¶¹ÊÓƵ

DocumentationAEM 6.5User Guide

Page Templates - Static page-templates-static

Last update: Wed Apr 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer

A Template is used to create a Page and defines which components can be used within the selected scope. A template is a hierarchy of nodes that has the same structure as the page to be created, but without any actual content.

Each Template presents you with a selection of components available for use.

  • Templates are built up of Components;
  • Components use, and allow access to, Widgets and these are used to render the Content.
NOTE
Editable templates are also available and are the recommended type of templates for most flexibility and the newest features.

Properties and Child Nodes of a Template properties-and-child-nodes-of-a-template

A template is a node of type cq:Template and has the following properties and child nodes:

Name
Type
Description
.
cq:Template
Current template. A template is of node type cq:Template.
allowedChildren
String[]
Path of a template that is allowed to be a child of this template.
allowedParents
String[]
Path of a template that is allowed to be a parent of this template.
allowedPaths
String[]
Path of a page that is allowed to be based on this template.
jcr:created
Date
Date of creation of the template.
jcr:description
String
Description of the template.
jcr:title
String
Title of the template.
ranking
Long
Rank of the template. Used to display the template in the User Interface.
jcr:content
cq:PageContent
Node containing the content of the template.
thumbnail.png
nt:file
Thumbnail of the template.
icon.png
nt:file
Icon of the template.

A template is the basis of a page.

To create a page, the template must be copied (node-tree /apps/<myapp>/template/<mytemplate>) to the corresponding position in the site-tree: this is what happens if a page is created using the Websites tab.

This copy action also gives the page its initial content (usually Top-Level Content only) and the property sling:resourceType, the path to the page component that is used to render the page (everything in the child node jcr:content).

How Templates are structured how-templates-are-structured

There are two aspects to be considered:

  • the structure of the template itself
  • the structure of the content produced when a template is used

The structure of a Template the-structure-of-a-template

A Template is created under a node of type cq:Template.

screen_shot_2012-02-13at63646pm

Various properties can be set, in particular:

  • jcr:title - title for the template; appears in the dialog when creating a page.
  • jcr:description - description for the template; appears in the dialog when creating a page.

This node contains a jcr:content (cq:PageContent) node which is used as the basis for the content node of resulting pages; this references, using sling:resourceType, the component to be used for rendering the actual content of a new page.

screen_shot_2012-02-13at64010pm

This component is used to define the structure and design of the content when a new page is created.

screen_shot_2012-02-13at64137pm

The content produced by a Template the-content-produced-by-a-template

Templates are used to create pages of type cq:Page (as mentioned earlier, a page is a special type of component). Each AEM Page has a structured node jcr:content. This:

  • is of type cq:PageContent
  • is a structured node-type holding a defined content-definition
  • has a property sling:resourceType to reference the component holding the sling scripts used for rendering the content

Default Templates default-templates

AEM comes with various default templates available out of the box. Sometimes, you may want to use the templates as is. In that case, you must ensure that the template is available for your web site.

For example, AEM comes with several templates including a contentpage and home page.

Title
Component
Location
Purpose
Home Page
homepage
geometrixx
The Geometrixx home page template.
Content Page
contentpage
geometrixx
The Geometrixx content page template.

Displaying Default Templates displaying-default-templates

To see a list of all templates in the repository, proceed as follows:

  1. In CRXDE Lite, open the Tools menu and click Query.

  2. In the Query tab

  3. As Type, select XPath.

  4. In the Query input field, enter following string:
    //element(*, cq:Template)

  5. Click Execute. The list is displayed in the result box.

Usually, you take an existing template and develop a new one for your own use. See Developing Page Templates for more information.

To enable an existing template for your website and you want it to be displayed in the Create Page dialog when creating a page right under Websites from the Websites console, set the allowedPaths property of the template node to: /content(/.&?lang=en#42;)?

How Template Designs are Applied how-template-designs-are-applied

When styles are defined in the UI using Design Mode, the design is persisted at the exact path of the content node for which the style is being defined.

CAUTION
ÃÛ¶¹ÊÓƵ recommends only applying designs through Design Mode.
Modifying designs in CRXDE Lite, for example, is not best practice and the application of such designs can vary from expected behavior.

If designs are only applied using Design Mode, then the following sections, Design Path Resolution, Decision Tree, and the Example are not applicable.

Design Path Resolution design-path-resolution

When rendering content based on a static template, AEM attempts to apply the most relevant design and styles to the content based on a traversal of the content hierarchy.

AEM determines the most relevant style for a content node in the following order:

  • If there is a design for the full and exact path of the content node (as when the design is defined in Design Mode), then use that design.
  • If there is a design for the content node of the parent, then use that design.
  • If there is a design for any node on the path of the content node, then use that design.

In the last two cases, if there is more than one applicable design, use the one closest to the content node.

Decision Tree decision-tree

This is a graphical representation of the Design Path Resolution logic.

design_path_resolution

Example example

Consider a simple content structure as follows, where a design could apply to any of the nodes:

/root/branch/leaf

The following table describes how AEM chooses a design.

Finding Design For
Designs Exist For
Design Chosen
Comment
leaf

root

branch

leaf

leaf
The most exact match is always taken.
leaf

root

branch

branch
Fall back to the closest match lower in the tree.
leaf
root
root
If all else fails, take what's remaining.
branch
branch
branch
branch

branch

leaf

branch
branch

root

branch

branch
branch

root

leaf

root

If there is not an exact match, take the one lower in the tree.

The assumption is that this will always be applicable, but further up the tree can be too specific.

Developing Page Templates developing-page-templates

AEM page templates are simply models used to create pages. They can contain as little, or as much, initial content as needed, their role being to create the correct initial node structures, with the required properties (primarily sling:resourceType) set to allow editing and rendering.

Creating a Template (based on an existing template) creating-a-new-template-based-on-an-existing-template

A new template can be created completely from scratch, but often an existing template is copied instead, and updated to save you time and effort. For example, the templates within Geometrixx can be used to get you started.

To create a template based on an existing template:

  1. Copy an existing template (preferably with a definition as close as possible to what you want to achieve) to a new node.

    Templates are stored in /apps/<website-name>/templates/<template-name>.

    note note
    NOTE
    The list of available templates depends on the location of the new page and the restrictions on placement specified in each template. See Template Availability.

  2. Change the jcr:title of the new template node to reflect its new role. You can also update the jcr:description if appropriate. Be sure to change the template availability of the page as appropriate.

    note note
    NOTE
    If you want your template to be displayed in the Create Page dialog when creating a page right under Websites from the Websites console, set the allowedPaths property of the template node to: /content(/.*)?

    chlimage_1-88

  3. Copy the component on which the template is based (this is indicated by the sling:resourceType property of the jcr:content node within the template) to create an instance.

    Components are stored in /apps/<website-name>/components/<component-name>.

  4. Update the jcr:title and jcr:description of the new component.

  5. Replace the thumbnail.png if you want a new thumbnail picture to be shown in the template selection list (size 128 x 98 px).

  6. Update the sling:resourceType of the template’s jcr:content node to reference the new component.

  7. Make additional changes to the functionality or design of the template, or its underlying component, or both.

    note note
    NOTE
    Changes made to the /apps/<website>/templates/<template-name> node affect the template instance (as in the selection list).
    Changes made to the /apps/<website>/components/<component-name> node affect the content page created when the template is used.

    You can now create a page within your website using the new template.

NOTE
The editor client library assumes the presence of the cq.shared namespace in content pages, and if it is absent, the JavaScript error Uncaught TypeError: Cannot read property 'shared' of undefined results.
All sample content pages contain cq.shared, so any content based on them automatically includes cq.shared. However, if you decide to create your own content pages from scratch without basing them on sample content, you must make sure to include the cq.shared namespace.
See Using Client-Side Libraries for further information.

Making an Existing Template Available making-an-existing-template-available

This example illustrates how to allow a template to be used for certain content paths. The templates that are available to the page author when creating pages are determined by the logic defined in Template Availability.

  1. In CRXDE Lite, navigate to the template you want to use for your page, for example, the Newsletter template.

  2. Change the allowedPaths property and other properties used for template availability. For example, allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? means that this template is allowed in any path under /content/geometrixx-outdoors.

    chlimage_1-89

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2