Modern Team Sites and Pages behind the scenes

Posted 8 March 2017 12:00 AM by Luis Máñez, SharePoint and Cloud Solution Architect @ ClearPeople

In this article, I will talk about Modern Team Sites and Pages, as these have been available for a while in our Office 365 tenants. 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 introduction

Modern experiences in SharePoint Online is a new user experience, available at 3 levels:
  1. Modern Team Sites
  2. Modern list and library experiences
  3. Modern Site Pages

This new experience is much more user-friendly, with better authoring capabilities, faster, and completely responsive, multi-device and multi-browser.

1.	Modern Team Sites

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.

Modern Team Sites

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:

Modern Team Sites

Once the group is created, we can access the Modern Team Site from the “Site” link in the group nav-bar.

Modern Team Sites

We can also create a Modern Team Site using code, and here, as usual, PnP components will help us with a new PowerShell command:

Modern Team Sites

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 Team Sites

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.

Microsoft Team Sites

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”.

Microsoft Team Sites

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:

Microsoft Team Sites


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.


Add your comment





intranet Modern SharePoint teamwork employee engagement digital workspace SharePoint JavaScript Windows Azure Digital Transformation staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics jquery QA Quality Assurance testing content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath