How to Use Dynamic Placeholders in Sitecore: A Simple Guide

Sitecore is a powerful tool for managing websites, and one of the features it offers is dynamic placeholders. Dynamic placeholders let you add components to different parts of a page in a flexible way. This means you can reuse the same component in many places but still have control over where they appear and how they behave.

In this post, I’ll explain how to use dynamic placeholders in Sitecore with a real example. We’ll walk through how to add a share button inside an article banner using dynamic placeholders.

The Task

Imagine you have an article banner on a webpage, and this banner already uses a placeholder called headless-main. Now, you want to add a share button inside this banner, but the share button needs to be flexible, so you want to use something like share-1-{*} as a dynamic placeholder key.

Here’s what we want to do:

1. Add a share button inside the article banner.
2. Use a dynamic placeholder key like share-1-{*} for flexibility.
3. Understand how dynamic placeholders work in Sitecore and how to set them up correctly.

Step 1: Set Up the Dynamic Placeholder for the Article Banner

The first thing you need to do is make sure the article banner component can accept a dynamic placeholder. This is where the share button will go.

Here’s how you do it:

• In the Presentation Details of the article banner, you should have a placeholder like this:

<placeholder name="column-1-{*}" />

This tells Sitecore that this part of the page is flexible. The {*} part means the placeholder can change based on different conditions, like where the share button should go. You can have multiple instances like column-1-1, column-1-2, etc.

Step 2: Add the Share Button with Dynamic Placeholders

Next, let’s add the share button inside the article banner using the dynamic placeholder.

The key thing here is that you want the share button to be placed in a dynamic placeholder, and Sitecore will handle where it goes. For example:

• For the first share button: headless-main/share-1-1
• For the second share button: headless-main/share-2-2

The {*} in the placeholder key allows you to add as many share buttons as you need, and Sitecore will automatically adjust.

Step 3: Implementing the Code for Dynamic Placeholders

To make sure everything works smoothly, you need to write some code to handle these dynamic placeholders. Here’s an example of how you might do it using React (if you’re working with Sitecore JSS):

import React from 'react';
import { Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';

export const Default = (props) => {
  const enabledPlaceholders = props.params.EnabledPlaceholders.split(',');

  return (
    <div className={`row component column-splitter`}>
      {enabledPlaceholders.map((ph, index) => {
        const phKey = `column-${ph}-{*}`;
        return (
          <div key={index}>
            <div className="row">
              <Placeholder key={index} name={phKey} rendering={props.rendering} />
            </div>
          </div>
        );
      })}
    </div>
  );
};

What this code does:

• enabledPlaceholders: This is a list of placeholders, like 1,2. This lets you define which placeholders should be shown.
• Rendering Placeholders: The Placeholder component places the share button wherever the dynamic key (column-${ph}-{*}) tells it to go.

For example, if EnabledPlaceholders="1,2", it will render two share buttons with unique placeholder keys like column-1-{*} and column-2-{*}.

Step 4: Configuring the Share Button in Sitecore

Now that your component is set up, you need to tell Sitecore where to place the share button. This is done in the Presentation Details of your component.

For example, if your dynamic placeholder key is share-1-{*}, the path for the share button would be:

• For dynamicPlaceholderKey = 1, the path will be: headless-main/share-1-1
• For dynamicPlaceholderKey = 2, the path will be: headless-main/share-2-2

This way, Sitecore knows where to place the share button and can create as many of them as needed.

---

Best Practices and Tips

1. Unique Placeholder Keys: Always make sure each dynamic placeholder key is unique. This prevents any confusion about where components should go.
2. Use EnabledPlaceholders: This helps you control which placeholders are shown. You can easily add more placeholders when you need them.
3. Avoid Hardcoding Placeholder Names: It’s a good idea to avoid setting static placeholder names. Using dynamic placeholders makes your site flexible and easier to scale.
4. Testing: Make sure to check the page in your browser to see that the placeholders are being rendered correctly.

---

Conclusion

Dynamic placeholders in Sitecore are a powerful way to make your components flexible and reusable. In this blog post, I’ve shown you how to add a share button inside an article banner using dynamic placeholders. By following these simple steps, you can set up your own flexible and reusable components on any Sitecore-powered website.

If you have any questions or need help with something, feel free to leave a comment below.

Happy coding!