AEM Experience Fragments: Templates

An experience fragment (XF) Is based on a template to define structure and components. Only editable templates can be used; static templates are not fully compatible. We will create such a template based on a custom template type and policy we will create.

The diagram below shows how templates, content, and components interrelate:

Rendering Component

AEM components are used to hold, format, and render the content made available on your webpages. We will need to create a new component for XF in order to be able to use our custom components, etc. inside an XF.

Our new “Experience Fragment” component extends the out-of-the-box cq/experience-fragments/components/xfpage component. sling:resourceSuperType is used to inherit the core functionality of the Image component without having to copy and paste.

We added a new tab with one checkbox in _cq_dialog.

Policy

The content (or design) policies define the design properties of a component, like the components available or minimum/maximum dimensions. These are applicable to the template (and pages created with the template). Content policies can be created and selected in the template editor of the touch-optimized UI. Let’s create a new policy to be able to add our custom components to the XF.

Template type

When creating a new template you need to specify a template type.

Template types function as templates for templates. When creating a new template the structure and initial content of the selected template type is used to create the new template.

• The template type is copied to create the template.
• Once the copy has occurred, the only connection between the template and the template type is a static reference for information purposes.

Template types allow you to define:

• The resource type of the page component.
• The policy of the root node, which defines the components allowed in the template editor.
• Optionally (but recommended), the breakpoints for the responsive grid and setup of the mobile emulator. This is optional, because the configuration could also be defined on the root page of the site.

Our new template type will be stored under /conf/site-com/settings/wcm/template-types.

thumbnail.png is the image that will represent your template.

There are four .content.xml files. Here is the one at the topmost level.

initial/.content.xml defines content that will appear when a page is first created based on the template. This content can then be edited by page authors.

structure/.content.xml defines components and content for your template. Components defined in the template structure cannot be moved or deleted on a page based on the template.

In policies/.content.xml we describe policy mappings for nodes:

1. jcr:content is an empty policy
2. root is our custom components policy

Template

Having created the template type we can create a template itself:

1. Go to http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf
2. Select your project folder, “Site.com”
3. Click “Create”
4. Select your newly created template type, “Site.com Empty Experience Fragment”
5. Enter title and description
6. Click “Create”

After that we will need to enable the template:

1. Return back to http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/site-com
2. Select your newly created template
3. Click “Enable”

After we created a template we need to allow it under /content/experience-fragments:

1. Go to CRX DE http://localhost:4502/crx/de/index.jsp
2. Select /content/experience-fragments
3. Find a property cq:allowedTemplates
4. Add our template template here: /conf/site-com/settings/wcm/templates.*

Stay tuned for our next post on XF where we dive into even more detail.

Find more on AEM Experience Fragments

Originally published at https://exadel.com on April 17, 2020.