I have SXA-JSS Next.JS based component for Sitecore 10.3.0, I want to have 2 placeholders with the different key, but with a dynamic suffix. e.g. I need 2 equal columns.

In CMS, I Created two placeholder using these key twocolumn-left-{*} and twocolumn-right-{*} and on jsx component update placeholder as below :

const twoColumnLeftPhKey = "twocolumn-left-${props.params.DynamicPlaceholderId}";
const twoColumnRightPhKey = "twocolumn-right-${props.params.DynamicPlaceholderId}";
  <Placeholder name='{twoColumnLeftPhKey}' rendering={rendering}/>
  <Placeholder name='{twoColumnRightPhKey}' rendering={rendering}/>

I am getting error in browser console for this :

Placeholder twocolumn-right-2 is not found in the current rendering data.

And on Experience Editor :

A rendering error occured: Cannot read properties of undefined (rendering attributes)

Is it expected behavior? How to overcome it and get different suffixes?

  • What if you just try to use twocolumn-left and twocolumn-right placeholders and let Sitecore handle all the dynamic keys thing? Jul 5, 2023 at 11:51
  • Does your rendering parameters template for that component inherit from the dynamic placeholders template?
    – Richard Seal
    Jul 5, 2023 at 20:57
  • @SerhiiShushliapin - I have already tried it, but it is not behaving as a dynamic placeholder, and using the same key for all components added on that placeholder. Jul 6, 2023 at 11:59
  • @RichardSeal - yes rendering parameter template already inherit from dynamic placeholder templates, I created this rendering by cloning promo component, so all required settings are in place. Jul 6, 2023 at 12:00


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.