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


4 Responses to “Detect SharePoint environment type and page mode from an SPFx web part”

  1. Peter Cheung

    June 4, 2018

    Hi
    this.displayMode doesn’t exists. why?
    Thanks

    Reply
  2. Nikolay

    July 27, 2018

    How to check from Application Customizer this same thing?

    Reply
    • João Ferreira

      July 27, 2018

      Hi Nikolay,

      To detect the edit mode it works the same way, the detection of the SharePoint version doesn’t make sense on extensions because they are not available on classic SharePoint.

      Reply

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.