Protiviti / SharePoint Blog

SharePoint Blog

April 06
Basics of Modern UI Branding

Since its inception, SharePoint has given its users a vast amount of control over how information is laid out and how the overall aesthetics of a site looks. This level of control has been incredibly beneficial in the corporate world because it allows for company branding (such as logos, color palette, etc.) commonly used in other public-facing materials such as advertising to be consistently applied. The ability to deliver a unified brand across disparate mediums and technologies is vital to producing a cohesive purpose and strengthening a company’s overall goals.

Current Approach

Traditionally, branding has been accomplished in a few ways. Depending on the complexity of the requirements, it may have been implemented through something as simple as a new stylesheet or theme that does nothing more than change the color scheme. For more complex endeavors, customization of master pages and page layouts were usually required to have more control over the “frame” of a site and introduce highly personalized elements such as custom headers, footers, and web part zones. This approach has been used with great success for over a decade and is still in heavy use on most on-premises sites active today.

With the introduction of Office 365, businesses were no longer required to maintain their own infrastructure and could instead choose to host their SharePoint implementations in the cloud. For many years this behaved similarly to on-premises implementations and users could introduce customizations through the approaches detailed above. Within the last few years, however, Microsoft began to rethink the way the user interface in SharePoint is working at its core.

The Modern Experience

It’s not a revolutionary statement to say that technology changes at a rapid pace. Because of this constant change, the ideas powering a user experience considered great one year may be seen as annoyingly antiquated the next. Microsoft has noticed specific web trends that many seem to appreciate and have made strides to incorporate them into SharePoint and update its overall user experience (seriously, did anyone ever really like having postbacks for every little thing?).

This effort has culminated in what Microsoft refers to as the modern experience. If you have interacted with the new team sites, list/library views, etc. you have most likely noticed that the overall design looks different.

1 Default Modern Experience look and feel

While the modern experience introduces new aesthetics (which are heavily appreciated!), there is something far more important happening under the hood.

The modern experience is unique in that it’s no longer a traditional aspx page with web parts that those of us using SharePoint have interacted with for well over a decade. A modern experience page is now a monolithic React application. Microsoft adopted React a few years ago as the preferred framework used to scaffold the new client-side SharePoint Framework web parts. React provides many benefits - most importantly in that it’s a battle-tested framework that is heavily used elsewhere on the web and has massive amounts of support.

The Problem

So at this point, you may be saying “This is fantastic! I want to begin using this everywhere on my corporate intranet immediately!” You then notice that your highly-customized master page doesn’t seem to be working on it. You also notice that the Alternate CSS URL you have on your normal publishing/team sites doesn’t seem to be working here either.

Since the pages aren’t traditional ASP-style affairs, virtually none of the tried and true branding methods work anymore (major exception being the SharePoint theming engine).

When the modern experience was first introduced, there was no real way to customize the look and feel of it in any significant way. Worse yet, many companies recognized the inconsistent user experiences could potentially confuse their users and disabled the modern experience altogether.

The Solution

Microsoft received tons of feedback on the modern experience and one of the major complaints was about the lack of customizability. To remedy this, they introduced SharePoint Framework Extensions in the latter half of 2017.

These extensions allow developers to introduce custom components into the modern experience pages. The extensions utilize the same nodejs-based build system that the SharePoint Framework web parts are currently made with. While it’s important to note that the extensions do not allow customization of every component, they do provide three main areas of control:

  • Application Customizers: these types of extensions allow for script injection onto the page and offer placeholders in commonly-customized areas of the page such as headers and footers.
  • Field Customizers: these types of extensions allow for modifications to views and field rendering. These are essentially JSLink technology of old, but for the new modern experience.
  • Command Sets: these types of extensions allow the construction of new actions. These actions are essentially analogs to the custom action overrides that were available in the older SharePoint experience.

Out of these three, the Application Customizers are the most that will most greatly benefit visual designers. The two main placeholders (header and footer) that have been implemented allow pages using the modern experience to be “framed” with common branding. Custom functionality such as a pop-out alert pane, bookmarks system, or personal calendar/reminder system can be implemented this way.

2 Custom branding elements and functionality within SPFX Extension Placeholders

More information about the SharePoint Framework Extensions can be found on Microsoft’s website at https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/overview-extensions. This site contains background information and invaluable tutorials on how to set up the build system, produce a sample project, and deploy it to your tenant. Sample code related to all three types of extensions can also be found in the excellently-maintained Github repository located here: https://github.com/SharePoint/sp-dev-fx-extensions.

Quick Launch


© Protiviti 2018. All rights reserved.   |   Privacy Policy