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:
- 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 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:
- 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.
Fig - Creation of Page Component |
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 |
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).
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.
Fig - Creation of Editable Template from Template-tyes |
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.
Fig - Creation of Template Level Policy |
Understand the structure of the template level policy on node levels.
Benefits of Template level policy:
Now Understand what is 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: Enable the template and you can create multiple pages for your website from a particular template.
Now you will see the templates when you create pages from that template.
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.
We are going to have the policy of a Layout container.
Fig - Option for creating the Component Level Policy |
Fig - Creation of Component Level Policy |
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 |
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.
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 sgaem.blog02@gmail.com
Hope it will help you guys !!
Thanks and Happy Learning.
Nice Article Saurabh!
ReplyDeleteGood Article ..
ReplyDeleteDoes it work in AEM 6.2 as well?
ReplyDeleteYes, 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.
DeleteHi Shivani,
DeleteI couldn't find the Configuration Browser in 6.2.
Could you please provide the same.
Thanks in advance,
Because it is not available in 6.2. Configuration browser was introduced in later versions
DeleteHi Saurabh, what is the different between initial content and structure?
ReplyDeleteHey Saurabh
ReplyDeleteI 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
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.
DeleteThanks Saurabh. Sharing this wonderful article,
ReplyDeleteKeep it up!!
SEO Company in Mumbai
Hi Saurabh, great article! Would you please show us how to add a paragraph system to an editable template?!
ReplyDeleteTo add paragraph system to editable template drop layout container
DeleteDoes 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?
ReplyDeleteIt works with static template too. In static template design dialog is equivalent to policy.
DeleteThanks for explaining in lucid manner.
ReplyDeleteGood article! One question is why there is no Page Design option in my template?
ReplyDeleteThis comment has been removed by the author.
ReplyDeletecan we edit the components which we have included in the initials node ?
ReplyDeleteIf 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?
ReplyDeleteGood Article
ReplyDeleteim not getting layout container and getting a error in console with message "Page design could not be loaded".
ReplyDeleteissue resolved ...
DeleteWhat was the issue and how it was resolved?
Deletehow you resolve this issue. I am also facing same issue
Deletei 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.
ReplyDeleteReally Helpful article.
ReplyDeletegood and very impressive article. please provide the difference between normal template and editable template
ReplyDeleteHi Shivani Garg/All,
ReplyDeleteI 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.
Yes Brijesh This is expected.
DeleteIt was really helpful. Thanks a lot.!!
ReplyDeletenice article.. but how to add initial content?
ReplyDeletehow to add components in the sturcture node so it will get displayed in pages created from same templates.
ReplyDeletebecause after setting policies and seecting components im not able to drag and drop them in same mode?
ReplyDeleteThis comment has been removed by the author.
ReplyDelete@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.
DeleteHaha~ thanks for clarifying.
DeleteI was wondering maybe there is some template functionality that we cannot find at other place, glad i've asked :)
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
ReplyDeleteThis is an awesome post. Really very informative and creative contents.
ReplyDeleteWordPress website development Chennai
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.
DeleteSpring 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
doubt on how policies page is working as resourcetype wcm/core/components/policies/mappings is not present.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHey,
ReplyDeleteGreat Article.
keep up the good work.
Digital Marketing Agency in Mumbai
SEO Company in Mumbai
Social Media Agency in Mumbai
Search Engine Marketing Company in Mumbai
Brand Management Company in Mumbai
Website Analytics Services in Mumbai
Digital Marketing Blogs
Nice Article
ReplyDeleteHi Shivani ,
ReplyDeleteVery 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.
check Page Policy
DeleteHello,
ReplyDeleteIs 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?
can I get source of these sessions ?
ReplyDeleterastgele görüntülü konuşma - kredi hesaplama - instagram video indir - instagram takipçi satın al - instagram takipçi satın al - tiktok takipçi satın al - instagram takipçi satın al - instagram beğeni satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - binance güvenilir mi - binance güvenilir mi - binance güvenilir mi - binance güvenilir mi - instagram beğeni satın al - instagram beğeni satın al - polen filtresi - google haritalara yer ekleme - btcturk güvenilir mi - binance hesap açma - kuşadası kiralık villa - tiktok izlenme satın al - instagram takipçi satın al - sms onay - paribu sahibi - binance sahibi - btcturk sahibi - paribu ne zaman kuruldu - binance ne zaman kuruldu - btcturk ne zaman kuruldu - youtube izlenme satın al - torrent oyun - google haritalara yer ekleme - altyapısız internet - bedava internet - no deposit bonus forex - erkek spor ayakkabı - webturkey.net - karfiltre.com - tiktok jeton hilesi - tiktok beğeni satın al - microsoft word indir - misli indir
ReplyDeleteyoutube abone satın al
ReplyDeletecami avizesi
cami avizeleri
avize cami
no deposit bonus forex 2021
takipçi satın al
takipçi satın al
takipçi satın al
takipcialdim.com/tiktok-takipci-satin-al/
instagram beğeni satın al
instagram beğeni satın al
btcturk
tiktok izlenme satın al
sms onay
youtube izlenme satın al
no deposit bonus forex 2021
tiktok jeton hilesi
tiktok beğeni satın al
binance
takipçi satın al
uc satın al
sms onay
sms onay
tiktok takipçi satın al
tiktok beğeni satın al
twitter takipçi satın al
trend topic satın al
youtube abone satın al
instagram beğeni satın al
tiktok beğeni satın al
twitter takipçi satın al
trend topic satın al
youtube abone satın al
takipcialdim.com/instagram-begeni-satin-al/
perde modelleri
instagram takipçi satın al
instagram takipçi satın al
takipçi satın al
instagram takipçi satın al
betboo
marsbahis
sultanbet
takipçi satın al
ReplyDeleteinstagram takipçi satın al
https://www.takipcikenti.com
marsbahis
ReplyDeletebetboo
sultanbet
marsbahis
betboo
sultanbet
ucuz takipçi
ReplyDeleteucuz takipçi
tiktok izlenme satın al
binance güvenilir mi
okex güvenilir mi
paribu güvenilir mi
bitexen güvenilir mi
coinbase güvenilir mi
instagram takipçi satın al
instagram takipçi satın alz
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
ReplyDeleteİ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
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,
ReplyDeletesphynx 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.
Hello Yorkies From Elvis Yorkshire Terrier - Specializing in Teacup Yorkies
ReplyDeleteWe 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
Nice & Informative Blog ! We offer welcome to yorkie puppies nearme. Check it out!...
ReplyDeletepuppies for sale near me
yorkie puppies with home training
where to buy Yorkie
Yorkie Female Puppies for sale
Yorkie puppies ready for their forever homes
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.
ReplyDeleteSIG SAUER P938 FOR SALE
ReplyDeleteSIG SAUER SP2022 FOR SALE
british shorthair kitten
ReplyDeletebritish shorthair for sale
british shorthair for sale near me
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.
ReplyDeleteragdoll 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/
At this time I am going away to do my breakfast, afterward having my breakfast coming over again to read further news
ReplyDeleteragdoll 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
Hey! are using WordPress for your blog platform?
ReplyDeleteI’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
Thanks for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your further
ReplyDeletewrite 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
Ahaa, its nice dialogue about this piece of writing at this place at this webpage,
ReplyDeleteI 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
SIG SAUER P320 FOR SALE
ReplyDeleteSIG SAUER P365 FOR SALE
Heltec indoor hotspot for sale
ReplyDeletecontrollino hotspot for sale
Helium miner for sale
ReplyDeleteRak hotspot miner V2 for sale
Cute Doberman puppies for sale
ReplyDeleteDoberman puppies near me
Doberman pincher in California for sale
ReplyDeleteDoberman puppies for adoption
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.
ReplyDeleteSIG SAUER PISTOL
ReplyDeleteSIG SAUER 1911 FOR SALE
태백출장샵
ReplyDelete공주출장샵
논산출장샵
계룡출장샵
보령출장샵
서산출장샵
아산출장샵
betmatik
ReplyDeletekralbet
betpark
tipobet
slot siteleri
kibris bahis siteleri
poker siteleri
bonus veren siteler
mobil ödeme bahis
4LO6
betmatik
ReplyDeletekralbet
betpark
tipobet
slot siteleri
kibris bahis siteleri
poker siteleri
bonus veren siteler
mobil ödeme bahis
K0EB