Sitecore 9 Dynamic Placeholders and Why We Need Them

Many of us have faced the issue of repeating content when trying to use same placeholder name, which at times can prove to be less than efficient. Sitecore 9 has filled this gap by introducing support for Dynamic Placeholders in the out-of-the-box installation, which is great news!

The Problem

In the below example we will reproduce the issue when using a standard Sitecore placeholder:

We have created:

1. Layout.cshtml - A layout file with three placeholders: Header, Main, and Footer
2. Sublayouts
   • Section - A sublayout view with the following code:
   • 1 Column - A sublayout view with the following code:
3. A Hero Image component - This is an example component—any other component would work the same way. It contains two fields: Title and Image.

Important Note: None of the above placeholders will allow us to add a rendering inside if we don't create a placeholder setting item for them under /sitecore/layout/Placeholder Settings.

To place two different Hero Images on the page in the 1 column sublayout, we would perform the following steps:

1. Run the page with the above Layout attached in the experience editor mode.
2. Click "Add here" to add "Section" rendering in "main" placeholder:
   
3. Add "1 Column" inside the "Section."
4. Finally, add the Hero Image component:
   

Now, if we want to reuse the 1 Column sublayout and add it inside the section below the column we've already added:

We will get the same component pre-populated which we added inside the first "1 Column," which is not what we want as we should be able to add any other component in it with a different datasource:

The presentation details look like this:

This restricts us from reusing the 1 Column sublayout because the placeholder used has the same name.

Using Dynamic Placeholders

We can solve the above issue either by creating separate placeholders and restricting users to add limited components or by using Dynamic Placeholders:

We can update our sublayouts to use Dynamic Placeholders:

1. Section.cshtml:
2. 1 Column.cshtml:

The above DynamicPlaceholder method can be found in the SitecoreHelper class which is part of Sitecore.Mvc assembly.

It has following override parameters:

1. Name of placeholder
2. Count: The number of times we want to render the placeholder. (The sublayout html will be created the number of times we give here). It will be useful for creating 2, 3, 4 etc. column sublayouts.
3. Max count: The maximum number of times a content author can use the placeholder.
4. Seed count: The starting number that the suffix will use.

Experience editor will now allow us to add a different component:

After adding the second hero image, the page now has two 1 column sublayouts inside section with different hero images:

If we look at the presentation details from the content editor:

Each Hero Image rendering has a different unique placeholder.

We hope that you found this article useful for your future Sitecore development. Enjoy using Sitecore 9!

— Chaitanya Marwah