Dynamic (Editable) Templates in AEM 6.4

Back in the days – when I started getting myself into AEM (6.2 at the time) – templates were already a very important tool in the day-to-day work. Yet, I never fully understood the process of creating and managing a template, nor was I aware of how these (templates) affected the entire work environment.

With the release of AEM 6.3, improvements in this topic were tremendous. And now, with AEM 6.4 out of the oven, the improvements continue to stack up on top of their predecessors. For instance, we now have a lot of help for working with templates and with template-types. These 2 steps are very intuitive and easy to understand and learn.

The 2-level policy system is very useful for developers and super users alike, allowing them to do the following in a very easy way:
Create policies for template level;
Add client libraries, global rules, and component policies;
Modify the behavior of specific components into a particular template (and not into the entire project).

Wondering how to work with these new features? Glad you asked

Working With the New Features
Go to Tools / General -> Configuration Browser.
Create Configuration, fill the Title value with the name of your project, and check the ‘Editable Template’ option.

Here’s the generated structure:


Three Main concepts of Templating:
Templates: All dynamic templates created by Authors.
Policies: There are two types of policies:
Template-Level Policies: 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.

Each Template has three parts:
Initial: The Initial Content of the page created – based on the template. This content could be edited or removed by the Author.
Policies: Linking with a policy by cq:policy

Structure:
Define the template structure.
The component can’t be removed at this point.
If we want to add more components, we need to add a parsys.
The components could be blocked or unblocked in order to define the initial content

Working with Templates
Go to the Components folder of our project and create a folder (if it doesn’t already exist) with the name ‘page’.

Inside the new folder, create a new Page component with the following information:


There’s no need to create page.html because we have the supertype (core/wcm/components/page/v1/page )

Creating a new Base-Template
With the help of template-type, Authors can create their dynamic templates.
Go to /conf/my-project/settings/wcm/template-types. [Here’s where the node (“empty-page”) with type cq:Template is created].
Under the empty-page node, a new node is created with name jcr:content with type cq:pageContent and jcr:title, jcr:description as properties.
Initial node is created with type cq:page under empty-page
jcr:content is created under initial node and we link the sling:resourceType property to the component page created in step 1. For instance: myproject/components/page/page.
A new node is created by the name structure under empty-page as we did with initial

Here’s the structure:

policies node is created under empty-page node.

Here’s the structure:

The last step is to upload the thumbnail image into the template. It must be under the empty-page node with name png

Creating Dynamic Template
Go to Templates / Myproject / Create / Choose your template.
Add the name of the template in a mnemotechnical way and then open it.
It should contain a parsys for drag and drop components.

Template Policy
Allow defining specific client-side libraries for each template.
Define the clientLib with the propertyType: ClientLibraryFolder.
Create 2 file. js.txt and test.js
Make the reference to the file.

→ js.txt


→ test.js


– In Page Policy inside the template.


In the dialog, we can define one or more policies for the templates.

In the Client-Side Libraries field, set the name of the categories defined in the properties of the categories in clientlibraries to add.
In the example, it should show an alert message defined in the test.js file if it is well configured.


Structure at a node’s level
Inside the conf folder within our project, select the jcr:content and look for the sling:resourceType


Inside the Policy node jcr:content


Inside the Policy node


Benefits of Template Level Policy
No need to add unnecessary calls to libraries.
The authors can add or remove clientLibs.

Level Policy Component
This allows working on a parsys within a template.

These are the steps to configure it:
In the template select the parsys, click in the parsys, and select the first button.
Then this dialog is shown:
– On the right, we have the components grouped to select and make then enabled to be used in the parsys.
– Also if we want more flexibility we could unlock in the parsys, in order to do this click on the second button of the image in step 1.

Structure at a Node’s level
In conf → myProject → settings → wcm → template-types → myTemplate → structure, we find jcr;content node which has the root node representing the parsys of the page. Take a look at resourceType: it needs to be responsiveGrid.

Inside template empty-page in structure → jcr:content → root we can see the resource type generated for the policy.


Also, the policy:


Final Step

Finally, we’ll use the template once enabled.



In order to enable the template, first, click on the template and chose the option Enable.

So now we can use the template created with the policies configured for the pages.

Configure Page Emulator
It’s possible that the emulator won’t be shown after the creation of the page with the dynamic base template. In that case, we need to make some configuration in the Felix console.

Search for “com.day.cq.wcm.mobile.com.impl.MobileEmulatorProvider” and add the path of the page.


Make sure that that the template-types node has the property cq:deviceGroups.

It could be possible that the configuration will not be ready, having the icon visible and the responsive layout not working. In this case, we need to search for the grid.less file (this file makes the resize).

In the Response Grid policy, we have a tab that allows us to see and define which default component.


In Default Components, we define the Mime Type associated, so, when we drag and drop the component inside the droppable zone of the page, AEM identifies this mime type.

To add a new Mime Type, click on Add mapping or select one in the drop-down menu.

Template Editor Design Dialog
The design Dialog values are stored in the Template level and will be visible in all the pages created with this template.

The configurations of a component with design dialog could be configured in its policy.


Here we could set the paragraph formats for the pages created with this template.

After adding a new policy we have the structure generated for title and text component:

conf → myProject → settings → wcm → policies


Hide Conditions
If we want to hide some properties from the dialog, we could use the Hide conditions.

Here we have an example for List component.


Inside the policy dialog, we could edit and create the policies. In this case, we enable only the tag option in the drop-down menu.


This configuration will be shown in the template of the page created if it is unlocked.


Finally, these are the options created in the drop-down:
Before:


After:


Conclusions
The new versions for AEM 6.3 and 6.4 are much more intuitive and easier to understand for those new to the Templates world. In the same way, they’re incredibly easier to manage for the experienced developers, making this a very good improvement within the last 2 versions.

Being an AEM developer, I appreciate this improvement because the creation process for a template it’s easy and very intuitive. At the same time, I think this process improves the productivity and understanding of the overall process, making the general tasks over the templates and over the components intuitive to work with.

I find especially useful the template level policy system, having the possibility of adding general libraries to a policy and reusing the policy another template that shares the same needs.