SXA Grid System with Sitecore JSS. Part 1

SXA grid with layout services and jss

SXA and JSS integration provided by Sitecore gives us several nice features like code-less creation of new JSS site definitions, or enhancements for content authors (e.g. local and global data sources). One of cool SXA features which is missing in JSS, is SXA grid system management. In this tutorial we will make it available for JSS via Layout Service. In second part I’ll show you, how you can use this grid in JSS app.

Warning: to make the tutorial easier to understand, I modify standard items which come with SXA and JSS. For you implementation you shouldn’t modify those, instead it’s better to create your custom templates and setting items, which inherit from standard ones. 

First we need to allow to select grid system for the website. Go to /sitecore/templates/Foundation/JSS Experience Accelerator/Multisite/JSS Settings template item (or to your custom template which inherits from JSS Settings) and add /sitecore/templates/Foundation/Experience Accelerator/Grid/_Grid Mapping to the base templates:

Now you should be able to set grid system for your website. Go to /sitecore/content/{your jss tenant rooot}/Settings item and set desired system in Grid Mapping field:

Warning: If you select Bootstrap 4 grid system, it’s necessary to edit one more settings item: /sitecore/system/Settings/Feature/Experience Accelerator/Bootstrap 4/Bootstrap 4 Grid Definition and remove values from Wrapping Tag and Wrapping Class fields, otherwise Sitecore Layout Service will return those tags instead of components inserted to the placeholders. As stated before, for your implementation, it’s better to copy whole SXA grid definition item, modify it and leave standard one untouched:

Now let’s set rendering parameters in the component’s rendering item. Go to your rendering item, where you want to use the grid, under /sitecore/layout/Renderings/ and select /sitecore/templates/Foundation/Experience Accelerator/Grid/Rendering Parameters/Grid Parameters (or your custom rendering parameters item which inherits  from Grid Parameters) in Parameters Template field:

We can finally set grid layout in rendering parameters for the component in our page’s Presentation Details:

If you call layout service for a page item with the component, it shall return selected grid settings in params.GridParameters under the component node:

Nice, but item IDs won’t be easy to read from JSS application. Let’s improve this, to return CSS class names defined for those items in SXA. We need to write a custom processor for renderJsonRendering pipeline, which will read grid definition items and replace IDs with class names in output JSON:

We need to call this processor after initializing the pipeline, with following config patch:

Let’s call layout service again for the page item, now it should return grid class names instead of item IDs:

You can use this technique not only for SXA grid, but for every custom rendering parameters which are defined as items. In second part of this tutorial I’ll show how you can use grid parameters returned by Sitecore Layout Service in JSS application.