What Is the Partial Design Dynamic Placeholder in Sitecore JSS?

What Is a PartialDesignDynamicPlaceholder?

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.

Use Case

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.

Basic Example of Usage

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;

Explanation of Key Props

• 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.

Key Benefits of the PartialDesignDynamicPlaceholder Component

• Dynamic Composition: It enables reusable and adaptable components to Sitecore setups.
• Sitecore Editing Support: Experience Editor is completely compatible for inline editing and customization.
• Scalability: Allows components to be added to particular page parts without requiring hardcoding.

When creating extremely dynamic and customized layouts for Sitecore JSS projects, this method is really helpful.

Let’s Look Under the Hood

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.

Key Differences Between Placeholder and PartialDesignDynamicPlaceholder

When to Use Which

• Use `<Placeholder>`:
  • When you have a simple, static placeholder.
  • Placeholder name is fixed and matches the Sitecore layout definition.
  • Example: Standard header or footer placeholders.
• Use PartialDesignDynamicPlaceholder:
  • When the placeholder name is dynamic or depends on rendering parameters.
  • For rendering placeholders within partial designs, enabling more flexibility and personalization.
  • Example: Navigation menus, dynamic layouts, or user-specific content regions.