2

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.

0

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.

  • Excellent. Your comments helped me to resolve the issue. Thanks a lot :) – arjunan Jul 2 at 11:10
0

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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