Reading time: 3 min read
What Is the Partial Design Dynamic Placeholder in Sitecore JSS?
When should you use it and how?
Start typing to search...
Specifically created for Sitecore Experience Edge or disconnected development setups, the PartialDesignDynamicPlaceholder is a Sitecore JSS React component that enables developers to define placeholders dynamically within a Sitecore layout. It supports Sitecore's editing and personalization features and allows child components to be dynamically included into a parent component's structure.
Let’s say you want to allow for authors to be able to add additional components, like buttons or cards to a component that exists within a Partial Design. Using the PartialDesignDynamicPlaceholder component within your, say, Navigation component, you can achieve this.
Let's consider a scenario where you have a Navigation component and you want to add a dynamic placeholder (navigation-placeholder) for additional components like buttons, text blocks, or other interactive elements.
import React from 'react';
import { PartialDesignDynamicPlaceholder, useComponentFactory } from '@sitecore-jss/sitecore-jss-react';
const Navigation = ({ rendering }) => {
const componentFactory = useComponentFactory();
return (
<nav className="site-navigation">
<ul>
{/* Dynamic placeholder for navigation items */}
<PartialDesignDynamicPlaceholder
name="navigation-placeholder"
rendering={rendering}
componentFactory={componentFactory}
/>
</ul>
</nav>
);
};
export default Navigation;
name: The unique name for the placeholder within the layout.rendering: The rendering context, usually passed down from the parent component or layout service.componentFactory: A function that resolves and renders the components configured in Sitecore for the placeholder.When creating extremely dynamic and customized layouts for Sitecore JSS projects, this method is really helpful.
Presently, the PartialDesignDynamicPlaceholder, component which can be found here inside GitHub, looks as follows:
import React from 'react';
import { Placeholder, ComponentRendering } from '@sitecore-jss/sitecore-jss-nextjs';
type DynamicPlaceholderProps = {
rendering: ComponentRendering;
};
const PartialDesignDynamicPlaceholder = (props: DynamicPlaceholderProps): JSX.Element => (
<Placeholder
name={props.rendering?.params?.sig || ''} // Dynamic name resolution
rendering={props.rendering}
/>
);
You can see here, where the name of the placeholder is assigned at runtime according to the signature identifier. We used to do this via code, and that method still works, but this is the preferred new and supported method for working with dynamic placeholders.
| Feature | Placeholder | PartialDesignDynamicPlaceholder |
|---|---|---|
| Purpose | Static placeholders tied to fixed names. | Dynamic placeholders driven by parameters or runtime conditions. |
| Flexibility | Limited to predefined placeholder names. | Allows dynamic placeholder names or logic-based name resolution. |
| Use Case | Simple layout scenarios. | Complex layouts with partial designs or personalization. |
| Parameter Dependency | Does not rely on parameters. | Often depends on rendering parameters (e.g., sig or other params). |
| Example Use Case | Rendering static regions like headers. | Rendering regions with dynamic content, like navigation menus. |
PartialDesignDynamicPlaceholder: