Dusty Eves

dusty.eves@techno-babble.net

Sitecore Architect with Paragon Consulting

Sitecore Item Renderings Part 2

A common pattern for multi-item components in Sitecore is to provide a rendering component a data source of a folder and iterate through each item in the folder to build the rendering.  The example below is a common use for this pattern:

IR2-Typical-Multi-Item-Rendering

Given the above setup, our view simply loops through each item:

@inherits GlassView<QuoteSetViewModel>
<div class="block">
    <div class="holder">
        <div class="frame">
            @foreach (var quote in Model)
            {
                @Html.Partial("/Views/Quotes.cshtml", quote, new ViewDataDictionary())
            } 
        </div>
    </div>
</div>

This pattern works well for a lot of use cases, particularly when each of the containing items is to be rendered in the same way, such as carousels, image lists, ect.  Through the use of item renderings we can use this IA pattern to include content types that do not all require the same rendering.

Programatic Item Renderings

Taking as an example below.  We have a page Sidebar of which the items within are unlikely to rendered in the same manner.

IR2-Item-Rendering-SetupAbove we see what our IA looks like.  In our example, Sidebar is a view rendering that will marshal it’s contents.  Our view looks like this:

@model Sitecore.Data.Items.Item
@using (Html.BeginEditFrame(Constants.WebEditFrames.GENERIC_INSERT)
{
	<div class='sidebar'>
		foreach (Item _item in Model.Children)
		{
			<section>
			using (Html.BeginEditFrame(Constants.WebEditFrames.DELETE_AND_SORT, _item.Paths.Path))
			{
				@Html.Sitecore().ItemRendering(_item);
			}
			</section>
		}
	</div>
}

Advantages

As you can see from the above, item renderings are quite straight forward.  This can be easily done by setting up an individual rendering for each of the items in Sidebar folder and setting the data source, but the item rendering approach offers a couple of distinct advantages.  The first is that it simplifies our presentation details as we’ve a single rendering responsible for our entire sidebar.  The other advantage comes in the author experience.  In a typical setup a content author adding a new item to the sidebar in the Experience Editor would have three steps to go through: Add a new rendering, set or create the data source, and populate the component.  Noting the edit frames in the view above the content author needs only add a new item to the sidebar folder.

Conclusions

While certainly not a replacement for the more common rendering types, in certain situations item renderings has some advantages and is worth having in one’s proverbial tool belt.