How to Create Dynamic Placeholders With Partial Designs in Sitecore XM Cloud

Empower your Partial Designs with allowing your components to use dynamic placeholders

July 2, 2024

By John Flores

Creating Flexible Page Designs With Dynamic Content

When we create our Page Designs we sometimes want to leave some room to allow inserting dynamic content. Normally, when you have all your components set in your Partial Designs and with all data sources filled, it keep everything inside the Partial Designs static. This leaves no room for inserting components on to these components. Here are some scenarios this will apply to.

  • A page design that has a component that showcases certain pages, but the highlighted pages might differ per page.
  • A blog page that is designed a certain way which can be solved by adding in a custom container component.

Update Your Component in the Partial Designs

One strategy of allowing dynamic components on your Partial Designs is by adding a placeholder on one of the components in your Partial Designs. Don’t forget to leave it empty, because if you also added a component in the placeholder inside the Partial Design then you won’t be able to add another one inside.

Diagram showing page design flow to partial design and components.

Allow Components to be Added in Your Component

There’s nothing really out of the ordinary here. You can also use an existing component you have that fits the criteria you need. What you need to make sure is that there are no components inside the placeholder.

const Default = ({ rendering, params }: ExampleComponentProps) => {
  const phKey = `fullwidth-${params.DynamicPlaceholderId}`;

return ( <div> <Placeholder name={phKey} rendering={rendering} /> </div> ); };

Update Your Partial Design

Next, make sure to add your component inside the Partial Designs. If you are just modifying an existing component that is already in your Partial Design then you can skip this. If you aren’t that familiar with Page designs and Partial designs then you can navigate inside your Headless Site item then Presentation item.

Screenshot of a navigation menu showing presentation settings and options.

When you create a Page design, you will see in the Designing section that you can select multiple Partial designs.

Screenshot of partial designs selection interface in a design tool.

Then when you create your partial designs, you will add in your components inside it’s Layout details.

Check the Experience Editor

When you open your page in any of the editors you will see an empty placeholder ready for components to be inserted into it. Below is an example of it in the Experience Editor where fullwidth is the placeholder.

Interface showing the option to add a component with a red arrow pointing.

And the example below is when you open it inside Pages Editor.

Screenshot of a full-width component in design mode with a plus icon.

How Important Are Dynamic Placeholders?

This strategy allows new ways of dealing with laying out your different page designs. It’s pretty useful especially when you need Page Designs that need certain components that have dynamic data sources in one of it’s components. You can check out other ways of handling dynamic content or a flexible way of setting up your pages by using Page Branches.



John Headshot

John Flores

Front-End Developer

John is a Senior Front-End Developer who is passionate about design and development. Outside of work, John has wide range of hobbies, from his plant collection, being a dog daddy, and a foodie.