SXA Grid System with Sitecore JSS. Part 2

SXA grid with layout services and jss

In previous post we defined SXA grid system for a component and returned grid CSS classes in Sitecore Layout Service. In this tutorial we’ll use them in JSS application, so we can have a grid system configurable in Sitecore.

Last time we selected Bootstrap 4 for our grid system. Let’s quickly recap its major rules:

  • Content should be placed within columns (elements with .col- classes), and only columns may be immediate children of rows
  • Use rows to create horizontal groups of columns
  • Rows (elements with .row class) must be placed within a .container class element.

Very simple Bootstrap 4 grid may look like this (it contains one component inside a full width row and two components placed inside two columns on large screens, or stacked on mobile):

You can check all Bootstrap rules and constraints here.

In previous post we already allow to select .col- classes defined in SXA, inside our components rendering parameters, now we need another component, allowing authors to split the content into columns. Let’s start with rendering definition in Sitecore: create Json Rendering with ColumnSplitter in Component Name field and with column placeholder selected in Layout Service Placeholders field (this allows Sitecore Layout Service to return placeholder nested in component):

Definition of column placeholder is very straightforward:

We also have to add our new Column Splitter rendering to Allowed Controls in our main application placeholder settings (in this tutorial main placeholder name is content).

Let’s create now equivalent component in JSS. It contains only a row element with a column placeholder:

We need also to modify Layout.js to add .container element and Bootstrap.css reference:

We have now one additional component, which content authors will use to add other components inside the columns. We don’t want to complicate their lives more, when they want just to add full width component into the layout, they shall do it without extra steps.

Therefore we have to distinguish between components added into columns and those added directly to the main placeholder, so we can wrap them into a .row element. To address this, we need to return to JSS app the name of the placeholder, where the component was inserted. It can be achieved with a custom processor for renderJsonRendering pipeline, which will return placeholder name in additional property:

We need to call this processor at the end of the pipeline, with following config patch:

If we call now Layout Service for our page, it shall return additional fields.placeholderName property:

Now we have all necessary data to use props.GridParameters in JSS component and implement the grid. We can create helper function:

  • if placeholder name contains column add .row wrapper around the component.
  • add another wrapper which uses GridParameters for CSS class:

We can use this helper in our JSS component:

Usage

After deploying app to Sitecore we shall be able to edit the grid in Experience Editor. Add components to the placeholders:

And set grid for components (it’s possible with extra SXA button):

Let’s verify, if page is responsive on small screens, according to defined grid:


With Bootstrap every component added to the container needs .col- class. To make lives of content authors easier we can add default grid value (for example col-12 for every new component) in our rendering parameters item’s standard values. Because it’s a custom SXA field, it’s only possible when we displaying raw values in Sitecore: