AEM Authoring Toolkit

Find more on AEM Experience Fragments

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 an experience fragment template based on a custom template type and policy we will create.

Create an experience fragment template

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 experience fragment template.

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 experience fragment 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 experience fragment template.

Template type

When you create an experience fragment template, you need to specify a template type:

  • Template types function as templates for templates. When you create an experience fragment 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 an experience fragment template.
    • Once the copy has occurred, the only connection between the experience fragment 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 experience fragment template. This content can then be edited by page authors.

structure/.content.xml defines components and content for your experience fragment 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

Experience Fragment Template

Having created the template type, we can create an experience fragment 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 experience fragment template:

  1. Return back to http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/site-com
  2. Select your newly created experience fragment 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 experience fragment templates where we dive into even more detail.

Author: Iryna Ason

How can we help you?
Contact Us