Dynamic (Editable) Templates in AEM6.3

Now with the new feature of Editable Template, the template can now be created from the author end as well. Which was earlier only the developer’s task.

So let's start our journey in the creation of editable templates from basic to advance.

CREATING A DYNAMIC TEMPLATE:
GO TO TOOLS -> GENERAL -> CONFIGURATION BROWSER

The title should be your project name and check on editable templates.

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


There are three parts of template editor:
templates Here all the dynamic templates are contained which are created by template authors.

policies: There are two types of policies:

• Template Level Policy: This policy is used to define client-side libraries of all the pages, created from a particular template.
• Component Level Policy: These policies are used to define components for a particular responsive grid (parsys)for all the pages created from the template.

template-types: This is a base template on the basis of which the template author creates all its templates at the run time.

There are three parts to a template:

• initial: Initial Content mode is used to define content that will appear when a page is first created based on the template. The initial content can then be edited and removed by page authors.
• policies: Here a particular template is linked to a policy by using cq:policy property.
• 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 a paragraph system to the template. Components can be locked and unlocked to allow you to define initial content.

To start working on dynamic templates, we need to create a page Component.
1. Go to the project hierarchy, and click on Create Component.

2. No need to create page.html because it will be getting fetched from sling:resourceSuperType (core/wcm/components/page/v1/page).

Creating a base template-type:
1. template-type is created by a developer which helps template authors to create it’s dynamic (editable) templates.

2. Go to /conf/my-project/settings/wcm/template-types.Create a node “empty-page” of type cq:Template.

3. Create a node named “jcr:content” of type “cq:pageContent” under “empty-page” having “jcr:title” and “jcr:description”.

4. Create “initial” of type “cq:page” inside “empty-page”.

5. Create a Node “jcr:content” of type cq:pageContent under initial node and add a property “sling:resourceType” pointing to a page Component (mydynamicproject/components/page/page).
initial hierarchy: +initial(cq:Page) +--jcr:content(cq:PageContent) sling:resourceType :mydynamicproject/components/page/page

6. Create a structure node hierarchy exactly like you have created an initial hierarchy under “dynamic-empty-page”.

structure hierarchy: 

 +structure(cq:Page) 

     +--jcr:content(cq:PageContent) 

         sling:resourceType :mydynamicproject/components/page/page 

         cq:deviceGroups :/etc/mobile/groups/responsive 

         +--root(nt:unstructured) 

         sling:resourceType :wcm/foundation/components/responsivegrid 

         +--cq:responsive 

             +--breakpoints 

                 +--phone 

                 title: Smaller Screen 

                 width{Long}: 650 

             +--tablet 

                 title: Tablet 

                 width{Long}: 1200

7. Now create policies hierarchy under “dynamic-empty-page”.

policies hierarchy: 

+policies(cq:Page) 

+--jcr:content 

sling:resourceType : wcm/core/components/policies/mappings 

+--root(cq:PageContent) 

sling:resourceType : wcm/core/components/policies/mapping

CREATING THE DYNAMIC TEMPLATE :
1. Go to Templates-> Go to your project-> Create-> Choose an empty template.