Ad Code

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
Fig - Configuration Browser Option 
2. Create Configuration, Title should be your project name and check on editable templates.
Fig - Create template folder under conf directory
3.It will create the basic hierarchy of templates in /conf directory.
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.
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.
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”.
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:
            sling:resourceType :myproject/components/page/page

6. Create structure node hierarchy exactly like you have created initial hierarchy under “empty-page”.
structure hierarchy:
            sling:resourceType :myproject/components/page/page
            cq:deviceGroups :/etc/mobile/groups/responsive
              sling:resourceType :wcm/foundation/components/responsivegrid
                      title: Smaller Screen
                      width{Long}: 650
                      title: Tablet
                      width{Long}: 1200

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

policies hierarchy:
            sling:resourceType : wcm/core/components/policies/mappings
            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.
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.
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.

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.
 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 

 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

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


  1. Does it work in AEM 6.2 as well?

    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.

    2. Hi Shivani,

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

      Thanks in advance,

    3. Because it is not available in 6.2. Configuration browser was introduced in later versions

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

  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?


    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.

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

    SEO Company in Mumbai

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

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

  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?

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

  7. Thanks for explaining in lucid manner.

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

  9. This comment has been removed by the author.

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

  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?

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

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

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

  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.

  14. Really Helpful article.

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

  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.

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

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

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

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

  21. This comment has been removed by the author.

    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.

    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 :)

  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

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

    1. A IEEE project is an interrelated arrangement of exercises, having a positive beginning and end point and bringing about an interesting result in Engineering Colleges for a particular asset assignment working under a triple limitation - time, cost and execution. Final Year Project Domains for CSE In Engineering Colleges, final year IEEE Project Management requires the utilization of abilities and information to arrange, plan, plan, direct, control, screen, and assess a final year project for cse. The utilization of Project Management to accomplish authoritative objectives has expanded quickly and many engineering colleges have reacted with final year IEEE projects Project Centers in Chennai for CSE to help students in learning these remarkable abilities.

      Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
      Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

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

  25. This comment has been removed by the author.

  26. Hi Shivani ,

    Very nice article.
    one problem I am facing in aem 6.5 is that unable to find page design in order to set template level policies . Will you please let me if there is any changes for 6.5 version.

  27. Hello,
    Is there any way to restrict not to drag and drop a component more than once in a Layout container? IS this this something achieved through a policies?

  28. can I get source of these sessions ?

  29. Ucuz, kaliteli ve organik sosyal medya hizmetleri satın almak için Ravje Medyayı tercih edebilir ve sosyal medya hesaplarını hızla büyütebilirsin. Ravje Medya ile sosyal medya hesaplarını organik ve gerçek kişiler ile geliştirebilir, kişisel ya da ticari hesapların için Ravje Medyayı tercih edebilirsin. Ravje Medya internet sitesine giriş yapmak için hemen tıkla:

    İnstagram takipçi satın almak için Ravje Medya hizmetlerini tercih edebilir, güvenilir ve gerçek takipçilere Ravje Medya ile ulaşabilirsin. İnstagram takipçi satın almak artık Ravje Medya ile oldukça güvenilir. Hemen instagram takipçi satın almak için Ravje Medyanın ilgili sayfasını ziyaret et: instagram takipçi satın al

    Tiktok takipçi satın al istiyorsan tercihini Ravje Medya yap! Ravje Medya uzman kadrosu ve profesyonel ekibi ile sizlere Tiktok takipçi satın alma hizmetide sunmaktadır. Tiktok takipçi satın almak için hemen tıkla: tiktok takipçi satın al

    İnstagram beğeni satın almak için Ravje medya instagram beğeni satın al sayfasına giriş yap, hızlı ve kaliteli instagram beğeni satın al: instagram beğeni satın al

    Youtube izlenme satın al sayfası ile hemen youtube izlenme satın al! Ravje medya kalitesi ile hemen youtube izlenme satın almak için tıklayın: youtube izlenme satın al

    Twitter takipçi satın almak istiyorsan Ravje medya twitter takipçi satın al sayfasına tıkla, Ravje medya güvencesi ile organik twitter takipçi satın al: twitter takipçi satın al

  30. All kittens adopted from Sphynx Cattery come with current vaccinations, dewormings, written sales contract, Two year health guarantee, health record, Spayed or Neutered, 30 days of free pet insurance for your kitten,
    sphynx cats for sale, sphynx kittens for sale, hairless kitten for sale, hairless cats for sale, and a kitten care package which includes food, litter and several surprises for you and your kitten. sphynx cat for sale near me, sphynx kitten for sale, hairless cats for sale near me, hairless kitten for sale, hairless cats for sale Kittens are Generally ready to leave between 10 to 11 weeks old.
    Sphynx do not develop as quickly as cats with hair.

  31. Hello Yorkies From Elvis Yorkshire Terrier - Specializing in Teacup Yorkies
    We are small breeders whose goal is to produce healthy, high quality little teacup size Yorkie puppies for sale. In order to have puppies for sale most of the time we have teamed up with a couple of other Yorkie breeders that have the same goals in mine. In fact we have some of their Yorkie breeders and they have some of our breeders.
    yorkies for sale, teacup yorkie puppies for sale, Yorkie puppies for sale

  32. f you are looking for a new furry friend, british shorthair kitten may be a perfect choice. british shorthair for sale near me have been around since the 1800s and were originally bred in England to hunt rats. These days they are more likely found as pets than on the job, but their hunting instincts still remain strong!  british shorthair cat for sale can come in many different colors so no matter what your preference is you will find a British Shorthair that matches it perfectly.