Editable Templates in AEM 6.5

Editable templates have been introduced in AEM 6.2 and since then with each next version they are constantly improving. They allow authors to create and edit templates. Template authors can create and configure templates without the help of the development team. To be able to create and edit templates the authors must be members of the template-authors group.

Here are some of the benefits of using editable templates:

• editable templates provide flexibility to define content policies to persist in design properties. There is no need for design mode which requires extra permission to give author to set design properties along with a replication of design page after making any design changes
• it maintains a dynamic connection between pages and template which gives power to template authors to change template structure along with locked content which will be reflected across all pages based on the editable template
• this doesn’t require any extra training for authors to create a new page based on an editable template. Authors can similarly create a new page as they create with static templates
• can be created and edited by your authors
• after the new page is created, a dynamic connection is maintained between the page and the template. This means that changes to the template structure are reflected on any pages created with that template (changes to the initial content will bot be reflected)
• uses content policies (edited from the template author) to persist the design properties (does not use Design mode within the page editor)
• are stored under /conf

Here are the tasks that the template author can do with the help of the AEM’s template editor:

• create a new template or copy an existing template
• manage the life cycle of the template
• add components to the template and position them on a responsive grid
• pre-configure the components using policies
• define which components can be edited on pages created with the template

Create editable templates from the configuration browser
Go to Tools -> General -> Configuration Browser

It will create the basic hierarchy of templates in /conf directory.

There are three parts of template editor:

• templates: all dynamic (editable) templates created by authors
• policies: there are two types of policies

– template level policy: used for adding policies to the template
– component level policy: used for adding policies to the component level
template-types: base templates for the creation of new templates in runtime

There are three parts of a template:

1. initial: the initial content of the page created – based on the template. This content could be edited or removed by the author
2. policies: here a particular template is linked to a policy by using cq:policy property
3. structure:

– the structure allows you to define the structure of the template
– the components defined in the template level can’t be removed from the resulting page
– if you want that template authors can add and remove components, add parsys to the template
– components can be locked and unlocked to allow you to define initial content

How to create base template-type
To start working on editable templates, we need to create a page component. Navigate to /apps/47northlabs-sample-project/components/page and click on create component.

Next would be to create a template-type which helps the authors to create its editable templates. (Please note that the configuration is available on GitLab).

How can authors create editable templates
Next step would be to create the editable template. That can be done from Tools -> General -> Templates -> 47northlabs-sample-project -> Choose empty template.

Add template title, description and open the template. There should be a responsive grid available.

Configure policies
With defining policies, authors will be able to configure different components on the page for regular authors to place on the page. Since there is no defined policy on the template, no component is assigned to this template. Click on the first (Policy) icon will take the author to a new screen where the author can define what components can put on this template.

Create a new policy.

Once done, components will be available on the page to drag & drop on the page.

Enable template
Once template authors are done with creating templates, authors must enable templates to make them available in sites section where regular authors can select templates to create pages.

Create editable templates from code
Another possibility is to We can create a sample project based on Adobe Archetype using the following command:

mvn archetype:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=19

The generated sample project already contains content-page editable template by default. We are going to create three additional editable templates i.e.

• home-page
• landing-page
• language-page

We are going to add some components as default in the templates, and few pages in ui.content project. The general idea is to have some test content and to play around with some corner cases. Let’s start.

The demo content is like on the image below.

We have four editable templates available. With property cq:allowedTemplates we control the available templates that can be used to create child pages under a given page. For example, for the content-page we want to make available only the landing-page, so the initial content will look like:

<jcr:content    ...    cq:allowedTemplates="[conf/aem-editable-templates-

    demo/settings/wcm/templates/landing-page]">    ...
</jcr:content>

Similar, the initial content of the landing-page will have similar configuration:

<jcr:content    ...    cq:allowedTemplates="[conf/aem-editable-templates-  

    demo/settings/wcm/templates/content-page]">    ...
</jcr:content>

What happens in case we want to add a fancy new template which should be available only for a particular page types? These two solutions come to my mind:
write a groovy script that will update existing cq:allowedTemplates property of all the pages created for a given template with the new template
update the structure of the given template, so all the existing pages created with that template will be updated

With the second approach, for example, if we want to add that fancy page template to the content page template, we have to add the following configuration to the structural element of the content-page template:

<jcr:content
    ...    cq:allowedTemplates="[conf/aem-editable-templates-         

    demo/settings/wcm/templates/fancy-page]">    ...
</jcr:content>

Given this, it is important to point out the differences between initial content and structural elements of the template definition.

Initial Content

• is merged with the structure during page creation
• changes to the initial content will not be reflected in all pages created with the given template
• the jcr:content node is copied to any new page
• the root node holds a list of components that defines what will be available in the resulting page

Structure

• is merged with the initial content during page creation
• changes to the structure will be reflected in all pages created with the given template
• the cq:responsive node is responsible for the responsive layout
• the root node defines the available components in the resulting page

Conclusion
With an editable template, you give template authors the flexibility to create and modify the template as they want. It acts as a central place to manage everything about the template (structure, initial content, layout) and components used in the template. If you are migrating to use an editable template, make sure you accessed the requirements for not only the template but also the components.

The code from this blog post is available on GitLab.

Source: https://www.north-47.com/knowledge-base/editable-templates-in-aem-6-5/