Sitecore 9 New Dynamic Placeholders

Counting Renderings In The Dynamic Placeholder

High Score Labs News • Sept 2, 2018

With Sitecore 9, new Dynamic Placeholders were introduced with new and important features. For example, we can control the html output for each nested rendering, we can also change the placeholders count and we can set maximum allowed placeholders count to limit the content editor assuming that we want to. Now, we can even count renderings inside the dynamic placeholder!

Let’s quickly review the main features of Sitecore 9 dynamic placeholders:

Sitecore.Mvc namespace is in use, webforms are supported;
“seed” parameter: starting value of a generated placeholder key suffix (0 by default). This should be useful when you need to have dynamic placeholders with the same key in the same rendering (as each nested rendering should have a different placeholder key).

For example: @Html.Sitecore().DynamicPlaceholder(“ph_nested”)

will generated similar placeholder keys starting from 0 suffix:

/ph-main/ph_nested -{5E1D2FF4-915D-4C9E-A3D2-91228805BA7D}-0

/ph-main/ph_nested -{5E1D2FF4-915D-4C9E-A3D2-91228805BA7D}-1

/ph-main/ph_nested -{5E1D2FF4-915D-4C9E-A3D2-91228805BA7D}-2

The next placeholder that is in the same rendering: @Html.Sitecore().DynamicPlaceholder(“ph_nested”, seed: 10)

will generate a similar placeholder keys starting from 10:

/ph-main/ph_nested -{5E1D2FF4-915D-4C9E-A3D2-91228805BA7D}-10

/ph-main/ph_nested -{5E1D2FF4-915D-4C9E-A3D2-91228805BA7D}-11

The “maxcount” parameter: the upper limit of the number of dynamically generated placeholders.
Example: @Html.Sitecore().DynamicPlaceholder(“ph_nested”, maxCount: 10)
The “count” parameter: specifies how many placeholders Sitecore renders. Must be a non-negative number. Example:
@Html.Sitecore().DynamicPlaceholder(“ph_nested”, count:10)

It is possible to override this parameter (you must make sure that the seed count is set with room for the count increase or set the MaxCount), so the content editor can change it in the rendering parameters using following key: ph_placeholderKey_count. So, our placeholder as shown above, will look like:

Now, lets imagine we want to create a slider control with banners using dynamic placeholders and we want to have banners navigation control below the slider, something looking similar to:

Image and text – those are the part of our banner rendering which will be nested in the dynamic placeholder of the slider control. The bottom navigation control (square buttons) will navigate to corresponding banner using JavaScript and the banner index, and each banner will have a wrapper “div” with a class which contains the banner index.

This is could be easily done using a dynamic placeholder with the DynamicPlaceholderDefinition type parameter, which has the OutputModifier Function parameter, which accepts initial rendering input (HtmlString) and rendering context (DynamicPlaceholderRenderContext) and returns final/updated HtmlString for the rendering. Example of our slider rendering:

@using Sitecore.Globalization

@using Sitecore.StringExtensions

@using Sitecore.Mvc

@using Sitecore.Mvc.Helpers

@using Sitecore.Mvc.Presentation

@inherits SliderViewModel

var phControlsCount = 0;

}

@Html.Sitecore().DynamicPlaceholder(new DynamicPlaceholderDefinition(“ph_nested”)

{

Count = 5,

Seed = 0,

OutputModifier = (input, context) =>

{

var html = input.ToHtmlString();

if (!string.IsNullOrWhiteSpace(html))

{

phControlsCount++;

return new HtmlString(@”<div class=””item-slider item-slider-{0}””>{1}</div>”.FormatWith(context.Index, html));

}

return input;

})

</div>

<nav>

@for (var index = 0; index < phControlsCount; index++)

{

}

</nav>

</div>

function NavigateSliderTo(bannerClass, link) {

e.preventDefault();

//Code to show banner with “bannerClass” and to set link to “active” state

}

</script>

The important thing is to count controls only in case of not empty html of it because we can have empty placeholders (let’s say we have count parameter set to 10, but only 7 banner renderings have been added, so in this case we having 3 empty placeholders). And just in case we need to use index inside our rendering, we can, for example, just replace some tokens inside our html with the context.Index value.

So, as you can see, the Sitecore 9 dynamic placeholders have been improved greatly and became much more useful and flexible for developer, especially when compared to older versions.