Modern Experiences introduction
First of all, I will do a quick introduction to the “Modern experiences” and later, we will see with much detail the “guts”, and how these Modern experiences are stored behind the scenes.
Modern experiences in SharePoint Online is a new user experience, available at 3 levels:- Modern Team Sites
- Modern list and library experiences
- Modern Site Pages
This new experience is much more user-friendly, with better authoring capabilities, faster, and completely responsive, multi-device and multi-browser.
What’s supported and what’s not with Modern Team Sites
So far, Modern Team Sites are quite limited about customisations. There’s not much information about a possible roadmap from Microsoft, but it seems that Microsoft is working to provide different alternatives to customise them.
Creating Modern Team Sites
In order to create new Modern Team Sites, we have different options. Considering that a Modern Team Site is always mapped with an Office 365 group, we can create an Office 365 group using Outlook web UI, as we can see in the image below:
Once the group is created, we can access the Modern Team Site from the “Site” link in the group nav-bar.
We can also create a Modern Team Site using code, and here, as usual, PnP components will help us with a new PowerShell command:
Creating Modern Pages
Once we have our Modern Team Site created, we are ready to create Modern Pages from SharePoint UI, and enjoy the new experience, much more fluid and easy to use.
Modern Pages are stored in the “Site pages” library, like any other page in a team site. However, Modern Pages have a specific content type “Site page” and therefore, different fields.
Besides, a Modern Page has a specific “Page Layout Type,” in this case: Article.
But, how is the content of a Modern Page stored? Well, all the page content is stored in the same Field, called “Authoring Canvas Content”, and the content here is pure HTML, where every widget is surrounded with a DIV tag. That DIV tag contains an attribute “data-sp-controldata”.
And in that “data-sp-controldata” attribute, with some specific encoding, all the widget configuration is stored, following a JSON format. For instance, the image below contains a JSON snippet of the “Hero” widget:
Summary
Modern experiences are here to stay. They offer a much better user experience, faster, and multi-device. So far, they are quite limited though when thinking on customisations, but Microsoft is working hard to offer new and better ways to do that. Besides, the PnP program is already offering some helpers and utilities to provision Modern Team Sites.
