Use the Full Page Canvas in modern SharePoint Online sites

A common requirement in the past with classic SharePoint solutions was to create start pages utilizing the full canvas of the page. In classic SharePoint this could easily be accomplished by adding a few lines of CSS in a Page Layout.

For modern pages we don’t have Page Layouts anymore, and to accomplish the same result a SPFx Extention can be used. This is more spesific a Application Customizer registering one simple CSS override in the top placeholder of the page.

This solution will work with both Communication and Team Sites, but is recommended to be used with Communication Sites. This template will give us full control of the page canvas below the Office 365 suite bar. Using it on a Team Site will not make much sense as we have a different layout with a left navigation bar etc.

Common usage scenarios

  • Intranet front page
  • Global start page
  • Full page apps hosted in SharePoint Online

Example of communication site before the app is added

example-communicationsite-before

Example of communication site after the app is added

example-communicationsite-after

The solution

I have created an example solution for this that can be found at Github:

https://github.com/aflyen/spfx-extension-fullpagecanvas

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s