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

74 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
    3. Because it is not available in 6.2. Configuration browser was introduced in later versions

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

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

    ReplyDelete
  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?

    ReplyDelete
  28. can I get source of these sessions ?

    ReplyDelete
  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: www.ravje.com

    İ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

    ReplyDelete
  30. All kittens adopted from royaltykitten.com 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.

    ReplyDelete
  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

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

    ReplyDelete
  33. I love what you guys are usually up too. This sort of clever work and coverage! Keep up the excellent works guys I’ve you guys to my own blogroll.
    ragdoll kittens for sale near me


    Hi, of course this piece of writing is actually fastidious and I have learned lot
    of things from it concerning blogging. thanks.
    ragdoll kitten near me

    https://thegorgeousdoodles.com/
    https://www.fluffyhavanese.com/
    https://www.pomeranianpuppiesforsales.com/
    https://thegorgeousragdolls.com/

    ReplyDelete
  34. At this time I am going away to do my breakfast, afterward having my breakfast coming over again to read further news
    ragdoll cat for sale


    Usually I don’t read post on blogs, but I wish to say that this write-up very compelled me to try and do it!
    Your writing taste has been surprised me. Thank you, very nice article.
    ragdoll cats for sale

    Hi, I do think this is a great blog. I stumbledupon it �� I may come back once again since I saved as a favorite it.
    Money and freedom is the greatest way to change, may you be rich and continue
    to guide others.
    aussiedoodle for sale

    Wonderful article! That is the kind of info that are supposed to be shared around the net.
    Shame on the seek engines for now not positioning this publish upper!
    Come on over and discuss with my website . Thank
    you =)
    bernedoodles for sale

    What’s Going down i’m new to this, I stumbled upon this I have found It positively useful and it has aided me out loads.
    I hope to give a contribution & help different users like its aided me.
    Good job.
    goldendoodle for sale

    ReplyDelete
  35. Hey! are using WordPress for your blog platform?

    I’m new to the blog world but I’m trying to get started and create my own. Do you need any html coding
    expertise to make your own blog? Any help would be really appreciated!
    doodle puppies


    Thank you for the good writeup. It in reality was a enjoyment account it.

    Look complicated to far introduced agreeable from you!
    By the way, how could we communicate?
    aussiedoodle puppies for sale


    Good post. I certainly love this website.
    Continue the good work!
    bernedoodle puppies for sale


    Hey! I’m at work browsing your blog from my new iphone
    3gs! Just wanted to say I love reading through your blog
    and look forward to all your posts! Keep up the outstanding work!
    goldendoodle puppies for sale

    ReplyDelete
  36. Thanks for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your further
    write ups thanks once again
    pomeranian puppies for sales


    This information is invaluable. Where can I find out more?
    pomeranian for sale


    This is the right webpage for anyone who hopes to understand this topic.
    You realize a whole lot its almost hard to argue with you (not that I really would want to…HaHa).
    You definitely put a fresh spin on a topic that’s been discussed for a long
    time. Great stuff, just excellent!
    teacup pomeranian for sale near me


    It’s amazing to pay a quick visit this website and
    reading the views of all colleagues concerning this article,
    while I am also zealous of getting familiarity.
    pomeranians for sale near me


    I take pleasure in, result in I discovered exactly what I used to be taking a look
    for. You’ve ended my 4 day lengthy hunt! God Bless you man. Have a nice
    day. Bye
    pomeranian teacup for sale

    ReplyDelete
  37. Ahaa, its nice dialogue about this piece of writing at this place at this webpage,
    I have read all that, so at this time me also commenting here.
    havanese dogs for sale

    Hi, I do believe this is a great website. I stumbledupon it ;) I am going to revisit yet
    again since I book-marked it. Money and freedom is the greatest way to
    change, may you be rich and continue to help other people.
    havanese puppies for sale


    I used to be suggested this website by means of my cousin. I’m now not sure whether
    this submit is written by him as nobody else know such detailed approximately my problem.
    You’re incredible! Thanks!
    teacup havanese puppy


    Hi my family member! I want to say that this
    post is awesome, nice written and include almost all
    important infos. I’d like to peer more posts like this
    chocolate havanese puppy for sale


    Hello, constantly i used to check blog posts here early in the
    daylight, since i like to find out more and more.
    havanese puppy for sale

    ReplyDelete
  38. Very nice blog. Keep writing. Turkish evisa is a legalized entry Permit which is connected to the person’s passport that allows one to enter into Turkey for touristic purposes and many other purposes.

    ReplyDelete