Dusty Eves

dusty.eves@techno-babble.net

Sitecore Architect with Paragon Consulting

Intro to Sitecore Stenciling

Introduction

A good Sitecore implementation puts tremendous power at the fingertips of an organizations marketing team.  Long behind us are the days of needing the IT department for every change that needs to be placed on a website, and now we’re putting that power in the hands of markets with very rich user experiences.  Those rich user experiences, however, do not come without a price.  Rich experiences tend involve complex implementations with high degrees of abstraction. The complexity of those implementations and abstracts create a lot of flexibility in the platform they create a burden on content authors to understand what all the moving pieces are.  Thirty years of CMS systems have treated the page as the central concept because this is often the best way for an author to think of their content

With the practice of Stenciling we can lower the burden to our content authors while maintaining the abstractions necessary for flexible and content empowering implementation.

What is Stenciling?

Stenciling is best defined as the practice of providing initialization states for pages and components representative of the content strategy or artistic vision.  Stencils exist at both the component level and the page level.  The easiest way to explain stenciling is with an example.  Starting with a simple sample, lets take the component below.

Intro ComponentHere we have a fairly typical page intro component with a Title, Copy Text, Image, and Call To Action.  Not difficult to develop and viewing the component with content it seems quite self explanatory.  But what does the component look like in its instantiation state in the Experience Editor without any stenciling effort?

Empty Intro ComponentWithout having seen the component with content it isn’t immediately obvious how the component is supposed to come together.  Not to mention, while the blurred background is aesthetically effective with content, without it looking at it actually gives the viewer a headache.  The goal with stenciling is to provide enough content at initialization that functionality is implied or otherwise obvious.

Intro_Module_StencilCreating Simple Component Stencils

Setting up a component stencil requires a two simple steps.  The first is representation of the initialization state of the data.  The second is assigning the representation of the data as the Data Source Template to the rendering.

Stencil Branch

Setting the data source template is straight forward and tends to be standard fare within the context of stenciling or otherwise.  Representing the data, however, can be done one of two ways.  The first is by populating the the standard values of the template, the second is a branch template.  Generally I recommend branch templates over standard values for a couple of reason.  The first reason is it eliminates the need for a distinct template for each rendering.  In our example above, we have a TitleCopyImageCTA template.  This is a pattern that many components on our site are likely to follow.  An inheritance chain can do this as well, but if you’re using TDS to auto-generate template mapping classes you end up with a lot of code artifacts that you don’t need.  The second reason is that more complex stencils require branches and consistently using branches allows organizing our stencils into a single location.  The final reason is that it potentially allows for creation of multiple instantiation states for the same component.

Conclusion

As you can see in the comps the results speak for themselves.  Stenciled components imply a great deal about their functionality via their instantiation state making them much more intuitive and self documenting.  This gain is even more pronounced with complex components.

Like what you see? Something I missed? Have an even cooler way to do the same thing?!?! Let me know in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *