Dot Peekser Logo

#Sitecore#Headless SXA#Placeholder#Placeholder settings

Sitecore headless SXA restrict placeholders

by Tobias Demski on

We all already know how to restrict the available renderings for a specific (dynamic) placeholder in the classic MVC way. Maybe you also know how to configure the placeholder settings in the MVC SXA way, but since headless SXA, Sitecore changed a bit of how to configure it now.

A short flashback

Using MVC to create a "Accordion" component with a dynamic placeholder.

The MVC way

⁠HTML: @Html.Sitecore().DynamicPlaceholder("accordion")
⁠Create a placeholder settings item with the key: accordion

The MVC SXA way

⁠HTML: @Html.Sitecore().DynamicPlaceholder("accordion")
⁠Create a placeholder settings item with the key: accordion*
Accordion Rendering Item "Other properties": "IsRenderingsWithDynamicPlaceholders: true"

Today

Using headless SXA with nextjs. Creating a "Accordion" component with a dynamic placeholder.

The headless SXA way:
⁠Nextjs snippet:

[tsx]: accordion.tsx
const phKey = "accordion-{*}";
<Placeholder name={phKey} rendering={props.rendering} />

Create a placeholder settings item with the key: accordion-{*}
⁠⁠
Create an Accordion Rendering Parameters Template and inherit from IDynamicPlaceholder
⁠Reference your placeholder setting in the field Layout Service Placeholders from your accordion rendering item.

You can read about the headless SXA configuration here: Walkthrough: Configure your renderings to use dynamic placeholders

After following this step for the headless SXA you should see the restriction in Pages if you try to drag & drop a component with is not allowed for the placeholder.

Theoretically

I tried exactly the steps I described and it didnt work for me. After investigation for a bit and asking in slack I got an answer from @codeden. He gave me the hint to try the MVC SXA way for the placeholder setting item key. After creating an additional placeholder setting under /sitecore/content/MY_TENANT/MY_SITE/Presentation/Placeholder Settings I used the the key from the MVC SXA way and named it accordion*.

I created a Sitecore support ticket for this issue and asked if this expected behavior. Sitecore confirmed that this configuration is not expected and registered it as a bug. I got the reference number 584848 to watch out if it is fixed.

Tobias Demski

I'm a Software Engineer with 10+ years of experience. Passionate about software development, and I like to get challenged by new stuff.