Replace multilists with dynamic placeholders

Often times when i find myself using a multilist, or any other multiple sitecore item link field, i have a hard time translating that into a good page editor experiance.  That’s what lead me to discover dynamic placeholders.

why dynamic placeholders?

Default out of the box sitecore doesn’t allow two placeholders that are at the same level with the same key.  Say you have a “Highlight” component that you want to have two separate locations in your layout. If you use the same placeholder key for both locations and add a single component to each location after you save it will put both components onto the first placeholder it comes to, completely ignoring the second placeholder.

Setting up dynamic placeholders

That’s where dynamic placeholders come in. This stack overflow post does a great job explaining how to set it up for sitecore MVC.

example scenario

So how does this help us with our multilist problem?  Imagine you have a “Highlight List” component that consists of a heading and a dynamic number of highlights, and you want two of these components on your page.  Traditionally we’d set up a content folder in sitecore and fill it with “Highlight Item”s then use a multilist on the component datasource to select the items to display for the component.  However your page editor options are limited when you do this, usually the best you can do is allow the editors to modify the Highlight Item’s fields once their on the page and use a “field editor” custom experience button to modify the multilist.  At this point we lost our ability to A/B test or personalize individual highlights.

dynamic placeholder solution

This is where dynamic placeholders comes in.  We can set up our “Highlights” and “Highlight Item” as two separate components.

NOTE: i’m using Kam Figy’s Synthesis sitecore mapping engine, which if you haven’t seen before you should totally check out, it’s some pretty power stuff. The Sitecore concepts remain the same however.

Here is our “Highlights” Component

<div class="block-col">
	<h2>@Html.TextFor(m => m.Heading)</h2>

	<ul class="feed-list">
		@Html.Sitecore().DynamicPlaceholder("ValuesListItem")
	</ul>
</div>

And our “Highlight Item” Component

<li>
	<figure>
		@Html.ImageFor(m=>m.Image)
		<figcaption>@Html.TextFor(m=>m.Description)</figcaption>
	</figure>
</li>

now this allows us to set up our components like so:

dynamicPlaceholderDemo

Now we have the capability to naturally and logically control the highlights using the “add component” features of the page editor.  Also we get the full suite of XDB features like A/B testing and personalization.