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 }
June 4, 2018
Hi
this.displayMode doesn’t exists. why?
Thanks
June 4, 2018
Are you using this.displayMode inside the render method?
July 27, 2018
How to check from Application Customizer this same thing?
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.
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
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.