UI for SharePoint Online

Challenge:

  • Microsoft provides no detailed guideline or sample on how to customize the UI for SharePoint Online.
    • only a simple color picker for the SharePoint Online Theme
  • SharePoint Online has no concept of Master Page {unlike SharePoint 2013}

Solution:

  • build a custom Extension using SPFx: SharePoint Framework
  • the Extension loads a .css style file

I created 2 groups of .css styles:

  1. embedded inside the Extension itself
  2. a .css file placed in a Document Library folder

Why?

  • why not just one place?
  • why does it need to be in 2 places?

Because:

  1. Timing + Flicker
  2. Easy to modify

Situation

SharePoint Online loads many .css files of its own

The chosen approach

We need to override some of SharePoint Online’s built-in styles.

How it works:

  • our .css styles must be loaded at the right Timing
  • if not, a Flicker will occur:
    • SharePoint Online first renders its own Theme {which we can partially configure}
    • usually a Blue color
    • then our .css kicks in
    • the user sees a visible Flicker on the screen
  • Easy to modify:
    • we often need CSS changes — without going through the full Develop/Deploy cycle for custom SPFx

Summary

With all these techniques combined, we can easily achieve a UI that fully matches the user’s requirements, fully integrated with SharePoint Online