App Templates and Components

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.

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

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.

Once you have the basic understanding of Templates and Components, See the following resources:

• Creating and Adding Templates and Components
• Using Content Properties to Export Content
• Best Practices
• Developing AEM Mobile Content Services

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

• Mobile with Content Sync
• Testing Mobile Apps