Detect SharePoint environment type and page mode from an SPFx web part

Knowing the SharePoint environment and if the page is edit mode will allow you to provide tailored web parts to enhance the user experience of your SharePoint solutions.

The code provided in this article gives you the ability to detect if your SPFx web part is running in the modern or classic SharePoint environment and if the page is in edit mode.

How to detect SharePoint environment from an SPFx webpart

SPFx web parts can be added to modern and classic SharePoint pages and you might need to load different resources depending of the environment type.

The environment type can be detected using the EnvironmentType enumeration, directly from your SPFx code.

Member Description
ClassicSharePoint Indicates that the framework was loaded from a classic SharePoint page
Local Indicates that the framework was loaded from the workbench
SharePoint Indicates that the framework was loaded by a client-rendered SharePoint page
Test Represents the scenario of the framework hosted in a unit/integration test

To detect the environment type start by importing the enumeration from the sp-core-library

import { Environment, EnvironmentType} from '@microsoft/sp-core-library';

Where needed use the code below to target a specific environment.

if(Environment.type == EnvironmentType.ClassicSharePoint){
  //Classic SharePoint page
}else if(Environment.type === EnvironmentType.Local){
  //Workbenck page
}else if(Environment.type === EnvironmentType.SharePoint){
  //Modern SharePoint page 
}else if(Environment.type === EnvironmentType.Test){
  //Running on Unit test enveironment 
}

How to detect if page is in edit mode from an SPFx webpart

The edit mode of the page can be detected by the DisplayMode enumeration. In the modern SharePoint, pages and web parts are always in the same mode while in the classic SharePoint the web part will only detect the edit mode if the web part itself is in edit mode.

Member Value
Edit 2
Read 1

If your web part will run on modern and classic SharePoint and you need to detect the Edit mode of the page start by importing both enumerations available in the sp-core-library.

import { Environment, EnvironmentType, DisplayMode } from '@microsoft/sp-core-library';

Where needed use the code below to detect the page status.

  //Detect display mode on classic and modern pages pages
  if(Environment.type == EnvironmentType.ClassicSharePoint){
    let isInEditMode: boolean;
    let interval: any;
    interval = setInterval(function(){
      if (typeof (<any>window).SP.Ribbon !== 'undefined'){
        isInEditMode = (<any>window).SP.Ribbon.PageState.Handlers.isInEditMode();
        if(isInEditMode){
          //Classic SharePoint in Edit Mode
        }else{
          //Classic SharePoint in Read Mode
        }
        clearInterval(interval);
      }
    },100) 
  }else if(Environment.type == EnvironmentType.SharePoint){
    if(this.displayMode == DisplayMode.Edit){
      //Modern SharePoint in Edit Mode
    }else if(this.displayMode == DisplayMode.Read){
      //Modern SharePoint in Read Mode
    }
  }

If your web part is not intended to run on a classic page you can use the simplified code below.

//Detect display mode on modern pages
  if(this.displayMode == DisplayMode.Edit){
    //Modern SharePoint in Edit Mode
  }else if(this.displayMode == DisplayMode.Read){
    //Modern SharePoint in Read Mode
  }

Designed by Freepik


No comments yet

Leave a Reply


Web developer focused on SharePoint branding, blogger, tech enthusiast. Travelling and sports are my addictions, knowledge and success are my daily motivations.