Saturday, September 2, 2017

Dynamic (Editable) Templates in AEM 6.3 : Part-1


Hello Everyone,
It’s been a long time, this topic is been on my todo list and finally on my reader's demand, I am writing about this topic. So the concept of dynamic templates being introduced in AEM 6.2 and when AEM 6.3 released, it brings some more improvements in this feature.
Now Creation of templates is not only the developer’s job. AEM has a new role of template-authors and these authors can create templates dynamically at any time as per the requirement.
The more we go in deep, the more things we will find out in this concept.So we will start from the very basics to advance and will learn how template editors work?

Steps to create Dynamic Templates
1. Go to Tools -> General -> Configuration Browser
cofiguration.PNG
Fig - Configuration Browser Option 
2. Create Configuration, Title should be your project name and check on editable templates.
createConfig.PNG
Fig - Create template folder under conf directory
3.It will create the basic hierarchy of templates in /conf directory.
directory.PNG
Fig - Hierarchy of editable template under 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:
  1. Template Level Policy: This policy is used to define client side libraries of all the pages, created from a particular template.
  2. 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 template author creates all its templates at the run time.
There are three parts of 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:
  1. The structure allows you to define the structure of the template.
  2. The components defined in the template level can’t be removed from the resulting page.
  3. If you want that template authors can add and remove components, add a paragraph system to the template.
  4. 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.
page.PNG
Fig - Creation of Page Component
2. No need to create page.html because it will be getting fetched from
sling:resourceSuperType (core/wcm/components/page/v1/page).

Now create a base template-type
1. Creation of a template-type is a job of 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.
template.PNG
Fig - Creation of template-types
3. Create a node named “jcr:content” of type “cq:pageContent” under “empty-page”  having “jcr:title” and “jcr:description”.
emptty page.PNG
Fig - add basic property in template-type

4. Create “initial” of type “cq:page” inside “empty-page”.
initial.PNG
Fig - Creation of Initial Hierarchy of Template-types

5. Create a Node “jcr:content” of type cq:pageContent under initial node and add a property "sling:resourceType" pointing to a page Component (myproject/components/page/page).
initial properties.PNG
Fig - Adding the page component as a rsource type in intial structure of template-types

initial hierarchy:
    +initial(cq:Page)
       +--jcr:content(cq:PageContent)
            sling:resourceType :myproject/components/page/page

6. Create structure node hierarchy exactly like you have created initial hierarchy under “empty-page”.
structure hierarchy:
   +structure(cq:Page)
       +--jcr:content(cq:PageContent)
            sling:resourceType :myproject/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 “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

8. Create a image of name “thumbnail.png” to create a thumbnail of template-type. Now I am ready with the base template type and the role of template author has been started.
How Template author Creates Dynamic Templates?
1. Go to Templates-> Go to your project-> Create-> Choose empty template.
template choose.PNG
Fig - Creation of Editable Template from Template-tyes
2. Name the template(i.e., Base Page Template) and Open the template.

3. There will be a responsive grid available.
image.PNG
Fig - Responsive Grid (Layout - Container) in the Editable Template

Demonstration video of Creating a template-type, editable template and create pages from it:


Now Understand what is Template Level Policy?
Template level policy allow you to define specific client-side-libraries for a particular template.
1.Go to the template Page Design.
pageDesign.PNG
Fig - Select the Page Design option for creating the template level policy in Editable template 

2.You can see the dialog over template author can add client side libraries at the run time by creating a template level policy.
page policy.PNG
Fig -  Creation of Template Level Policy 

Understand the structure of the template level policy on node levels.

templates.PNG
Fig  - Flow and Structure of Template level policy

Benefits of Template level policy:
  • Now there is no need to include or hard code client libraries in the page component.
  • Template authors can dynamically add or remove client side libraries as per the requirements.

Now Understand what is Component Level Policy?
We are going to have the policy of a Layout container.
parsys policy.PNG
 Fig - Option for creating the Component Level Policy
layout container.PNG
 Fig - Creation of  Component Level Policy

So, In layout level Policy, you can create a policy and allowed component for a particular layout container. Only the selected components in the policy will be able to use by page authors for that specific container.
Note:Configuring a policy is mandatory for container components as it enables you to define components that will be available in the container.
Note: If we want to provide flexibility to page authors to drag components in the container, then don’t forget to unlock parsys.
mapping.PNG
 Fig - Flow and Structure of Component Level Policy
Note: Enable the template and you can create multiple pages for your website from a particular template.
But there is a need to allow template under a hierarchy,where you want to create pages from that template.
Create a page without a template(you need to create page manually) and add a property in page properties dialog.
page properties.PNG
 Fig - Allowed Template for creating the page 

page.PNG
 Fig - Page Creation from editable template

Now you will see the templates when you create pages from that template.
Demonstration video of template level policy and component level policy:



If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!
Thanks and Happy Learning.

40 comments:

  1. Does it work in AEM 6.2 as well?

    ReplyDelete
    Replies
    1. Yes, the complete functionality is same. You might get changes in the consoles, from where you need to find templates console and configuration browser console. Other than that, everything is same.

      Delete
    2. Hi Shivani,

      I couldn't find the Configuration Browser in 6.2.
      Could you please provide the same.

      Thanks in advance,

      Delete
  2. Hi Saurabh, what is the different between initial content and structure?

    ReplyDelete
  3. Hey Saurabh

    I am having issues getting my own components (under /apps/OUR_PROJECT_HERE/components) to show up in the components list. I am having no components show up in the list. Do you have an idea why this is happinging?

    Greetings
    Jeroen

    ReplyDelete
    Replies
    1. Assuming, you are facing this issue regarding template editor, you need to set a policy at template level and then unlock the parsys to show the list of component on the pages.

      Delete
  4. Thanks Saurabh. Sharing this wonderful article,
    Keep it up!!

    SEO Company in Mumbai

    ReplyDelete
  5. Hi Saurabh, great article! Would you please show us how to add a paragraph system to an editable template?!

    ReplyDelete
    Replies
    1. To add paragraph system to editable template drop layout container

      Delete
  6. Does the Core WCM Components only work on Editable Templates? Can we use the latest core wcm components v2.0.6 in a static template without creating policies , config etc?

    ReplyDelete
    Replies
    1. It works with static template too. In static template design dialog is equivalent to policy.

      Delete
  7. Thanks for explaining in lucid manner.

    ReplyDelete
  8. Good article! One question is why there is no Page Design option in my template?

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. can we edit the components which we have included in the initials node ?

    ReplyDelete
  11. If the project not using AEM responsive grid system? Is it a good idea still to use editable templates? In that case how the layout section will be handled?

    ReplyDelete
  12. im not getting layout container and getting a error in console with message "Page design could not be loaded".

    ReplyDelete
    Replies
    1. What was the issue and how it was resolved?

      Delete
    2. how you resolve this issue. I am also facing same issue

      Delete
  13. i am not able to create a page from template as i've given the path to the templates folder followed by /*.still im able to create page under that page.

    ReplyDelete
  14. Really Helpful article.

    ReplyDelete
  15. good and very impressive article. please provide the difference between normal template and editable template

    ReplyDelete
  16. Hi Shivani Garg/All,

    I am facing one issue that while creating template and editing it how to include initial content. I tried copy pasting initial node from section page template of we-retail but it didn't work. How to include initial content.
    Second is the observation that suppose i have initial content in my editable template using that i created few page. Later i added few component in my initial content in editable template. Now i created new page the new component added is visible in new page but not in previously created pages. So is it the expected behaviour.

    ReplyDelete
  17. It was really helpful. Thanks a lot.!!

    ReplyDelete
  18. nice article.. but how to add initial content?

    ReplyDelete
  19. how to add components in the sturcture node so it will get displayed in pages created from same templates.

    ReplyDelete
  20. because after setting policies and seecting components im not able to drag and drop them in same mode?

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. @Eason Glad to know that you like this post.I am using classic UI may be because of my old bad habits of using siteadmin.

      Delete
    2. Haha~ thanks for clarifying.

      I was wondering maybe there is some template functionality that we cannot find at other place, glad i've asked :)

      Delete
  22. Great job. If you want to know more about templates you should visit this site where there are many different categories including dentistry website templates

    ReplyDelete
  23. This is an awesome post. Really very informative and creative contents.
    WordPress website development Chennai

    ReplyDelete
  24. doubt on how policies page is working as resourcetype wcm/core/components/policies/mappings is not present.

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete