ÃÛ¶¹ÊÓƵ

App Templates and Components app-templates-and-components

NOTE
ÃÛ¶¹ÊÓƵ recommends using the SPA Editor for projects that require single page application framework-based client-side rendering (for example, 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 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
To learn how to develop your ÃÛ¶¹ÊÓƵ Experience Manager (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 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 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.

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:

Additional Resources additional-resources

To learn about additional topics on mobile apps, see the links below:

recommendation-more-help
2eeeb575-8007-40cc-a72d-206fbc4ddd4b