Thursday, February 1, 2018

Optimize loading of run-once Application Customizers in SharePoint Framework for Office 365 Groups

Photo by Lex Sirikiat at Unsplash.

When automating Groups provisioning and configurations some configurations cannot be achieved using app-only tokens, but have to be performed by a group owner.

Examples of this are setting the group logo or enabling Microsoft Teams for a group. This is where SharePoint Framework application customizers come in handy.

The idea is to run a piece of JavaScript once an owner enters the group site for the first time, and then remove the application customizer once run, as it’s not needed anymore.

I wrote a sample customizer for this which you can find at the PnP sample repository on GitHub.

In the sample I check if the user accessing the site is a site admin (group owner), and if so run a piece of code.

let isSiteAdmin = this.context.pageContext.legacyPageContext.isSiteAdmin;
if (isSiteAdmin) {

A better approach is to specify the needed rights for a user for the extension to load in the first place – a good old custom action feature. By setting the extension to load if a user has ManageWeb rights, it will effectively run for group owners and not members. This allows us to remove the check in the actual code – or you can keep it if you want. The good part is that we reduce loading of script which is not needed.

Below is a sample PnP provision template to install the application customizer. 

<?xml version="1.0"?>
    <pnp:Preferences Generator="OfficeDevPnP.Core, Version=2.19.1710.0, Culture=neutral, PublicKeyToken=null" />
        <pnp:ProvisioningTemplate ID="TEMPLATE-ENABLE-TEAMS" Version="1" BaseSiteTemplate="GROUP#0" Scope="RootSite">
                    <pnp:CustomAction Title="EnableTeamsApplicationCustomizer" 
                     ClientSideComponentProperties="{&quot;autoCreate&quot;:&quot;{parameter:AutoCreate}&quot;}" />


When creating SPFx customizers which are not needed by everyone, you can optimize loading times by specifying which access right is needed for the customizer to load in the first place.

You can find a list of all access rights at