Use dynamic placeholders in components

You can use dynamic placeholders to generate unique placeholder keys for every component on the page. In some cases, multiple placeholder keys are generated within a single component, for example, when you add columns to the Column Splitter component.

This walkthrough describes how to configure a component to use dynamic placeholders:

  1. Add the IsRenderingsWithDynamicPlaceholders property to the component item.

  2. Add the IDynamicPlaceholder base template to the Rendering Parameters template of the component you are interested in.

  3. In the placeholder settings item, define the placeholder key using a wildcard.

  4. Link the placeholder settings item to the component.

  5. In the component TSX file, set the placeholder key value to match how it is defined in the placeholder settings item.

Add the IsRenderingsWithDynamicPlaceholders property to the component

Add the IsRenderingsWithDynamicPlaceholders property to your component to enable the resolving of the dynamic placeholders and the components inside of them.

To add the IsRenderingsWithDynamicPlaceholders property to the component:

  1. In the content tree, navigate to /sitecore/Layout/Renderings/Feature/Headless Experience Accelerator and click the component you are interested in.

  2. In the Other properties field, enter the IsRenderingsWithDynamicPlaceholders property and set its value to true.

  3. Save your changes.

Add the IDynamicPlaceholder base template to the rendering parameters template

Adding the IDynamicPlaceholder base template to the rendering parameters template of a component gives it a new parameter named DynamicPlaceholderID. This parameter dynamically assigns IDs to the placeholder key.

To add the IDynamicPlaceholder base template:

  1. In the content tree, navigate to the Rendering Parameters folder and select the rendering parameters template.

    Note

    The folder's location can differ depending on your instance, but it is typically found in /sitecore/Templates/Feature.

  2. On the Content tab, navigate to /Templates/Foundation/Experience Accelerator/Dynamic Placeholders/Rendering Parameters.

  3. Double-click the IDynamicPlaceholder item to move it to the Selected section. The following screenshot shows the rendering parameters template of the built-in Container component.

    The IDynamicPlaceholder base template

Define the placeholder key using a wildcard

You use a wildcard to as part of the definition of the placeholder key. As a result, whenever an instance of the component is added to the placeholder, the DynamicPlaceholderID parameter generates a unique ID that dynamically replaces the wildcard used in the placeholder key value, for example myrendering-1, myrendering-2, and so on.

To define the placeholder key:

  1. In the content tree, navigate to the placeholder settings item of the component that you want to enable dynamic placeholders for. Depending on where your components are stored, the settings item might be in one of the following locations:

    • /sitecore/Layout/Placeholder Settings/Feature.

    • /sitecore/Layout/Placeholder Settings/Project.

    Note

    If the settings item does not already exist, create one and name it according to how the component is named.

  2. Click the settings item and, in the Placeholder Key field, enter the name of the component as defined in the component TSX file followed by -{*}, for example myrendering-{*}.

  3. Save your changes.

To be able to render the components inside the placeholder, link the placeholder settings item with the component through the Layout Service.

To link the placeholder settings item to the component:

  1. In the content tree, navigate to sitecore/Layout/Renderings/Feature, open the folder that holds the component, and then click the component.

  2. In the Layout Service Placeholders field, navigate to the placeholder settings item that you configured previously.

  3. Double-click the placeholder settings item to add it to the Selected pane.

Define the placeholder key in the component TSX file

In the component TSX file, when you define the placeholder component, you need to pass the name in the Placeholder Key field to the phKey constant. Instead of a wildcard, you need to use the dynamic placeholder ID from the rendering parameters.

Code example:

RequestResponse
const phKey = `myrendering-${props.params.DynamicPlaceholderId}`;
<Placeholder name={phKey} rendering={props.rendering} />

Do you have some feedback for us?

If you have suggestions for improving this article,