Working with Placeholders in Sitecore XM Cloud

Placeholders in Sitecore allow us to define areas within a layout where components can be inserted. They are essential for building flexible, reusable, and modular page layouts. In this guide, we will explore how to work with two types of placeholders: normal placeholders and dynamic placeholders, along with how to configure them in the Sitecore CMS.

In Sitecore, to create both types of placeholders you need to go to the following path:

/sitecore/layout/Placeholder Settings

And in there create your placeholder.
In case it's a Normal Placeholder, not dynamic, you just assign a placeholder key with the following format:

As you can see in the image you need to set the placeholder key and the Allowed Controls, or renderings, that can go into that placeholder.

Same applies to Dynamic Placeholder, but we need to add something more to the placeholder key

As you can see in the image we need that {*} identifier to specify that thi is, in fact, a dynamic placeholder.

Normal Placeholders

A normal placeholder is a static region defined within a layout or component where a specific set of components can be added. These are typically used when you know exactly where a component should be placed in a page or layout.

Adding your placeholder in the code

In your rendering you can add the following jss component

<Placeholder name="placeholder-key" rendering={rendering} />

The rendering prop we're sending comes from ComponentProps, you can extend your rendering type with that and specify it when destructuring your Type in the Rendering declaration

const Rendering = ({
  fields,
  params,
  rendering,
}: FlexibleContainerProps)

Dynamic Placeholders

A dynamic placeholder is more flexible and can handle scenarios where multiple instances of the same placeholder are needed on the page. These placeholders are particularly useful when rendering repeated or nested components.

Adding a dynamic placeholder

In your rendering add the following component:

<Placeholder name="placeholder-key-{*}" rendering={rendering} />

As you can see, we also added the identifier for dynamic placeholders.

Conclusion

By leveraging both normal and dynamic placeholders, you can build flexible, reusable layouts that allow for dynamic content insertion. Whether you need a static area for content or a more flexible, repeating region, placeholders provide the flexibility needed to build scalable and maintainable websites on Sitecore XM Cloud. Configuring placeholders in the CMS ensures that the right components can be inserted into the correct areas, providing control over the page structure.