App Templates and Components

CAUTION

AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

NOTE

Adobe recommends using the SPA Editor for projects that require single page application framework-based client-side rendering (e.g. React). Learn more.

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 will present 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

To learn how to develop your AEM application using CRXDE Lite, see Developing with CRXDE Lite.

A template is the basis of a page.

To create a page, the template must be copied (node-tree /apps/<myapp>/templates/<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).

Structure of a Template

There are two aspects to be considered:

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

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

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

NOTE

To learn the basics for templates and components in AEM, see the resources below:

After you have the basic understanding of Templates and Components, see the following resources: