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 (window).SP.Ribbon !== 'undefined'){
        isInEditMode = (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


6 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
  3. Leif

    July 26, 2019

    Even if I am in edit mode the webpart reports as being in display mode and only after a few milliseconds it says it’s in edit mode.
    I am writing a redirect-webpart and when in edit-mode I want to skip the redirect so the webpart properties and the page as such can be edited.
    However, the redirect always happens because the page is initially in display mode even if I add ?Mode=Edit to the url directly.
    Any ideas on this?

    Regards
    Leif

    Reply
    • João Ferreira

      August 9, 2019

      Hi Leif,

      I have no idea why this is happening with the DisplayMode, but I strongly recommend you to open an issue reporting this on GitHub.
      https://github.com/SharePoint/sp-dev-docs/issues
      In the mean time I suggest you to delay the execution of the code a few seconds, not an ideal solution but as a workarround it should do the trick.
      Let me know if you find the cause of the issue or if you implement any workarround for it.

      Reply

Leave a Reply to João Ferreira


I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.

%d bloggers like this: