3

I am following sitecore-first approach and I have created two simple renderings.

Scaffold rendering

import React from 'react';
import { Placeholder } from '@sitecore-jss/sitecore-jss-react';

const Scaffold = ({rendering}) => (
    <header>
        <div id="content">
            <Placeholder name="jss-left-row" rendering={rendering} />
        </div>
    </header>
);

export default Scaffold;

ContentBlock rendering

const ContentBlock = ({ fields }) => (
  <React.Fragment>
    <Text tag="h2" className="display-4" field={fields.heading} />

    <RichText className="contentDescription" field={fields.content} />
  </React.Fragment>
);

export default ContentBlock;

Presentation Detail enter image description here

ContentBlock rendering is not visible in the child placeholder. I have even added ContentBlock rendering to the Layout Service Placeholders field on the Scaffold rendering item.

What mistake am i doing? Any help would be appreciated.

2 Answers 2

4

Sitecore JSS use Dynamic Placeholders,

You need to add the unique identifier (uid) from the Scaffold-Component to the placeholder key from the underlying Content Block. In the Presentation Detail, somethings like this (depend or your GUID of the parent component)

/jss-main/jss-left-row-{99BBC2D3-972E-4E37-8DC5-2D6267DF3464}-0

The most convenient is to create the content, add the components with the Experience editor. Then the placeholder keys are automatically correct

You can check if the component is in the rendering output with this url:

/sitecore/api/layout/render/jss?item=/yoururl&sc_apikey={your-api-key}&sc_site=your-site&sc_lang=en

Then you know if the data is missing because it is not in the JSON or if there is somethings in your React app todo to show.

More about dynamic-placeholders You can also take a look at the JSS React Sample App, see the home/styleguide page for a working example of a page with dynamic placeholders.

4
  • Excellent. Your comments helped me to resolve the issue. Thanks a lot :)
    – arjunan
    Commented Jul 2, 2019 at 11:10
  • How would one find the rendering GUID of the parent component? Is there an easy way when doing this in the Content Editor? Commented Jul 9, 2021 at 18:10
  • @MarcelGruber it's the uid property of the parent component.
    – Sandy
    Commented Dec 14, 2022 at 4:15
  • But how is that viewed? Commented Dec 14, 2022 at 14:05
1

You can explicitly define to which placeholders a component is allowed to be added to via the manifest component definition:

manifest.addComponent({
    name: 'Sample-Component',
    icon: SitecoreIcon.Compass,
    allowedPlaceholders: ['why-not-jss'],
});

Thanks to this you will be able to add Sample-Component to why-not-jss placeholder.

1
  • Sorry Dawid. I tried this but not working.
    – arjunan
    Commented Jun 26, 2019 at 0:54

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.