Basic Template Inheritance Tutorial for Adobe CQ5

In coming to an engagement where I am helping one of the world’s most iconic fund raisers migrate from an aging and unwieldy Vignette integration to Adobe CQ5, one of their biggest concerns is with template creation and construction which for them is one of their primary pain points. While this might be an onerous task in Vignette, I don’t find the same to be true with CQ5, especially once you get your integration started and have a couple of master templates to inherit from. Having spent the day on the ground with the customer and the evening with a couple of new to CQ5 consultants, explaining how template inheritance work, I felt like capturing my thoughts and illustrating how quickly and easily a child template could be created. To start with, assume we have a basic parent template already created, with a fairly basic layout that is probably pretty common to many websites out there; a header, footer, left column navigation, a center content body and a right rail. Our parent template content component probably looks something like this:
homepage_main
content.jsp – includes some basic HTML & includes of the rest of the template content

header.jsp – includes the html to render out top banner and site wide links
footer.jsp – includes html to render typical boiler plate at the bottom of the page
leftnav.jsp – includes the html or an include of the navigation component
contentbody.jsp – lets make this simple for now, just an include of a parsys
rightrail.jsp – same as contentbody, just a parsys
Now a page of type homepage_main is going to be pretty plain, with 2 separate content areas for authors to drop content in a free form manor that has become one of the key differentiators of CQ5. Now this is a fairly simple template that any even remotely practiced CQ5 developer could create in say, an hour or two, depending on how convoluted the front end code is. Now is where the inheritance model of CQ5 really comes into play and really empowers the developer to create additional new templates quickly. The requirements for the system state that a specific marketing tout appear at the top of the right rail on a significant percentage of the pages. So, quickly create a new template …

Create a new template called childpage under apps//component/page
Provide a name for this template, assign it properties for allowedParents, allowedChildren and then set up the sling:resourceSuperType
For the sling:resourceSuperType, set the value to apps//component/page/homepage_main

For simplicity sake, just grab the rightrail.jsp from homepage_main and add either the code for your marketing tout or an include of the appropriate component. You can either replace the parsys or leave it there under the marketing tout for further content.

Under apps//component/template create the template component of the same name and set the sling:resourceType on the _jcr_content node to point to your new page component These last 5 steps shouldn’t cost you more than 10-15 minutes and you’ve created a consistent look for a large group of pages, you’ve saved your content authors a ton of time going from page to page adding the marketing tout to the parsys and you’ve ensured that the content is right 100% of the time.

Now, lets say that we need a page type with a marketing tout and a specific title component above the parsys that displays the page’s jcrTitle. So repeat steps 1-5, but now set the sling:resourceSuperType to point to childpage. Instead of grabbing the rightrail.jsp, copy the contentbody.jsp and edit it to include your title component. And that’s it, you’ve created a page template in a modest amount of time and created its child and grandchild templates in a trivial amount of time. I hope this tutorial simplifies and demystifies the concepts of template creation and inheritance for all of you out there. As always, if you have questions or comments, feel free to contact me.

Keywords: WEM WCM WXM Adobe CQ5 CQ5.5 Java