Relationship of Template Types & Templates to Page Components

Definitions

---

Use Case: Custom Pages

Every site usually needs different kinds of pages: a marketing landing page, a news article, and a generic content page. Each one should have its own layout, allowed components, and page properties.

AEM starts with template types that allow developers to define those base setups (page component, structure, policies). Using those, authors create instances called templates that show up in the Create Page Wizard.

Most websites have a goal of consistency across their pages, and templates allow this by having repeatable page layouts with rules baked in (instead of authors free-styling every page). Relationships between the two can become confusing quickly.

That’s where I hope to assist you in clarifying the workflow!

---

Create a Template Type

There are a couple different directories for templates.

Adobe’s OOTB templates /libs - this is what you should extend or overlay:

/libs/settings/wcm/template-types

In most projects, you’ll create at least one custom template type. These live in project specific template type locations:

1. /apps - /apps/settings/wcm/template-types

2. /conf - /conf//settings/wcm/template-types

If your project is fresh, it may not have any of these yet. Choose a location for your templates and related code that makes sense and matches the archetype of your project.

Here is a view of the Touch UI. Choose a type..

Then, you will see this screen. Name your Template.

If nothing shows up after clicking the Create button in the Templates console, it is either:

• No templates have been created yet. Define them under /conf/ /settings/wcm/template-types . Follow the next steps below to see how I create/define my template.

• Templates aren’t wired correctly in your chosen directory, or they’ve not been allowed for this folder.

  See the #Troubleshooting section on this page for more help on how to fix these!!

While I was writing this blog, I didn’t have any templates listed and saw the above error! This was because I hadn’t created any in the code yet. So I will walk through how to do that next.

---

Creating a Page Template

In the code editor, I will go to the above directory and create a structure that looks like this:

You’ll notice that I have created a few template types here. Among these are page, page-v2, and an empty-experience-fragment. After running a fresh maven build and if the structure is correct, the template types will then pop up on the Create Template Touch UI screen. I will no longer see the Error message that I am unable to create a template!

---

Structure vs. Initial Content

Touch UI view:

Code View:

Structure: Locked components in a template that authors can’t move or delete (header, footer, fixed containers, etc.).

Initial Content: Default content that’s copied to new pages when they’re created. Authors can change or delete this on each page.

---

Template Type vs. Template vs. Page Component

What’s the difference? Let’s go over each in detail and talk about how they interact with each other.

Template Type:

Inside the template type’s jcr:content, the sling:resourceType property points to your page component (/apps/.../components/page). That’s how AEM knows which page component to use for any template created from that type.

• It is the base of the template.

• Can live in the code at:
  • Default - this is what you should extend or overlay

    /apps/settings/wcm/template-types

  • /conf

    /conf/<your-site>/settings/wcm/template-types

• Can be viewed in Touch UI at:
  • http://localhost:4502/libs/wcm/core/content/sites/createtemplatewizard.html/conf/YOUR_SITE

• Allows AEM Authors to create NEW templates based on the structure, initial content, and policies laid out in the template type code.

• Do template types have to be visible to authors? No — you can hide them if you don’t want authors creating new templates.

• If you do not have the proper structure in your template type’s top content.xml file, it will not show up on the selection screen when you navigate to the Touch UI address.

  Note: Template types don’t have to be exposed in the Touch UI. If authors should not be creating new templates from a certain type, lock them down with permissions or keep those template types in a folder only your template-author group can access.

  Template:

• An instantiated Template Type.

• Templates live under /conf , possible directory:

  /conf/<your-site>/settings/wcm/templates

• Can be viewed in the Touch UI at:
  • http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/YOUR_SITE

Who manages templates is a project decision. Some teams let template authors own them entirely in AEM, others keep template definitions in code.

• Templates can be managed by authors alone, therefore templates do not need to be included in the code! Authors can create templates themselves by navigating to Sites view → Create button from the Touch UI.

• Another choice is to have developers control template code instead of the site authors. If this structure is chosen, the template code files would live at the above location in /conf.

• Note: Be aware that if developers do not have templates in the code/repository, the project will not have source control for the instantiated template type (template).

  Page Components

• In most projects, page components are where the site clientlibs and other necessary code for global behavior of the page are loaded.

• Page components live with the rest of the project’s components under /apps (or ui.apps depending on the project structure).

• If you have page-wide behavior (like a global ‘Back to Top’ button that’s always present, analytics code, tagging, etc.), this is where you’d include it.

• It’s common practice to have site-wide CSS and JS clientlibs included on the page component.

  ---

  Policies

I won’t go too deep into policies on this blog, but policies also should be created next to where the template types and templates are stored within the repository.

/conf//settings/wcm/policies

Template types and templates defines which policy paths are used for each component, but the policy rules themselves are defined within this subtree. These rules control a myriad of things like allowed components, design options, etc.

Policies can also be edited/modified within the Touch UI!

---

Tying It All Together

Page → Template → Template Type

Every page under /content has a jcr:content node that usually contains:

• cq:template → path to the template
  • e.g. /conf//settings/wcm/templates/article-page

• cq:templateType (optional) → path to the template type
  • e.g. /conf//settings/wcm/template-types/article-template-type

    A page points to a Template, and the Template points back to a Template Type

    ---

    Troubleshooting

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
    xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Template">
    <jcr:content
        cq:templateType="/conf/your-site/settings/wcm/template-types/page"
        jcr:primaryType="cq:PageContent"
        jcr:title="Example Page"
        jcr:description="Example Page Template"
        status="enabled"/>
</jcr:root>