Skip to main content

Sitecore

Sitecore JSS Development Essentials: Create new placeholder in Sitecore Next.js app

Photo of blocks being puzzle-pieced together. Finding the fitting pieces to help it all come together.

In the previous blog, I demonstrated how to create a new component in JSS Next.js app. If you must have noticed, I added it to an existing Main placeholder, however most of us come across scenarios where we have to create new placeholders to build the desired page design.

So, in this blog, I will add a new placeholder and display it in experience editor to facilitate adding more components in it.

Create Placeholder in Sitecore

Create a new placeholder in path: /sitecore/layout/Placeholder Settings/Project/<Project-Name>/<Placeholdername>

I have created placeholder with the key : jss-container

Placeholder In Sitecoe

 

Create placeholder in Code

Now, add the placeholder in our frontend component code.

Fullwidcontainer

  • To know how to create a JSON rendering, please refer to my previous blog.

Being a conventional Sitecore developer, one would directly jump on to adding components to the newly created placeholder in EE. So, now I added the rendering “FullWidthContainer” in the jss-main placeholder in EE.

The rendering item was already added to “Allowed Controls” field in Main placeholder: /sitecore/layout/Placeholder Settings/Project/<project-name>/jss-main to make it available here.

Placeholderavailable

After adding the rendering and saving changes, I got the below error instead of getting the newly added placeholder.

Error

This error was bound to happen because we are missing one configuration/setting that has been introduced with Sitecore JSS. We have to add all the newly created nested placeholders in a field called “Layout Service Placeholders”  in the respective Sitecore rendering.

To resolve this issue, make sure to select the new placeholder item in “Layout Service Placeholders” MultiList field of JSON rendering item which contains the placeholder code.

Layout Service

 

Once placeholder  is added to layout service placeholder field, it will render on the page and will allow to add other components to it.

Jss Container Placeholder Available

Following the same steps, you can add multiple placeholders to a component which is imperative when creating a nested structure.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Mahima Patel

Mahima Patel is a Sitecore Architect, Working with Perficient for the last 9+ years. Sitecore 8, 9, 10 Professional Certified Developer.

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram