The Scrivito Example App layout is designed based on UI and UX design research and testing. But one size does not fit all, so the app was built with extensibility and customization in mind. In this tutorial, we will be adding a sidebar to the layout as an example of how to expand or adapt the layout for your own site.

In the “App.js” file, Scrivito.CurrentPage is mounted into the DOM at the top level. You can see this below along with the navigation, error pages and the footer.

In the How Does a Scrivito App work? article, the “What is the current page” section explains that the CurrentPage changes as the user navigates the site. “App.js” renders each page by generating a navigation and the current page (or an error page) plus a footer. Since we are using React, everything is a component, and new components can be added with ease.

In this case, we can keep it simple. Since the sidebar does not need any functionality, we can implement it as a function that just renders the (not yet defined) sidebar attribute using  Scrivito.ContentTag.

Note that we are always rendering the sidebar attribute of the CMS root object, independently of the CurrentPage. This ensures that there’s only one sidebar common to all pages.

The root object is determined using Scrivito.Obj.root(); this is the Obj whose _path is “/”, and in a default implementation of Scrivito is initially set to the Homepage class.

Our sidebar is meant to be filled with widgets, so we’ll add it as a widgetlist attribute to the Homepage object class:

Once again to keep it simple, we’ll render the sidebar and the current page in dedicated columns, so they fit on the screen:

After reloading the page or restarting the local server, you should see the widgetlist drop zone of the sidebar attribute in your layout. It is a blank gray canvas; try adding some images or text:

In the above example, we started with a section widget, then added a divider widget, a text widget, another divider widget and an image widget in a sequence as an example. Starting with the section widget allows the editor to style the section as a whole. You could even require the sidebar to contain only section widgets. How this can be done is explained in detail in the Customizing Widget List Rendering documentation article – check it out.