SharePoint Framework – Identify SharePoint Page Type(Modern/Classic/Local Workbench)

Scenario – We might need to find a way on identifying if current SharePoint page in which SPFx webpart is added is a classic page, a modern page or a local workbench page.

This would be very quick demo or code snippet on how to identify is page is modern/classic or local workbench page in SharePoint Framework. SP core library npm package has 2 attributes

Environment which can be used to identify current SharePoint page type. It can be compared against enum EnvironmentType having values Test, Local, SharePoint, ClassicSharePoint. Below is enum definition with description
export declare enum EnvironmentType {
    /**
     * Indicates that the SharePoint Framework is running inside a test harness, e.g. a unit test.
     * There may be no user interaction at all, and network access in general may be disabled.
     */
    Test = 0,
    /**
     * Indicates that the SharePoint Framework is running on a page from a "localhost" web server,
     * for example the SharePoint Workbench when hosted via "gulp serve".  SharePoint REST API calls
     * will not be available, and in general network access may not authenticate properly.
     * Certain page context information may be using mock values for testing.
     */
    Local = 1,
    /**
     * Indicates that the SharePoint Framework is running on a modern SharePoint web page,
     * with full framework functionality.  This is the normal usage scenario.
     */
    SharePoint = 2,
    /**
     * Indicates that the framework was hosted by a classic server-rendered SharePoint page.
     * Some functionality may be limited, e.g. various extensibility APIs may not be supported.
     */
    ClassicSharePoint = 3,
}

Let us see how it can be used in SPFx webpart.

Step 1 – Create a HelloWorld SPFx webpart using steps mentioned at link

Step 2 –  Import library in your Webpart.ts file

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

Step 2 – Modify render method to below to check page type.

public render(): void {
    if(Environment.type == EnvironmentType.ClassicSharePoint){
        this.domElement.innerHTML ="I am classic SharePoint";
    }else if(Environment.type === EnvironmentType.SharePoint){
      this.domElement.innerHTML ="I am Modern SharePoint";
    }else if(Environment.type === EnvironmentType.Local){
      this.domElement.innerHTML ="I am Workbench";
    }
  }

Step 3 – Run gulp serve to test on local workbench first.

Once it open local workbench you should see below output.

 

Step 4 – Test in your SharePoint workbench

Keep gulp serve command running and open your SharePoint local workbench

https://disney.sharepoint.com/sites/thelionking/_layouts/15/workbench.aspx

We can see below output

 

Step 5 – Test in your SharePoint classic page,

a. Package the solution using command ‘gulp package-solution’.

b. Package file (*.sppkg) file should be created at ‘sharepoint\solution‘.

c. Deploy app in app catalog.

 

d. Install app in targeted site collection, Go to all site content -> Add App -> Select your app

e. Once installed, create a new classic SharePoint Page. Go to Site Pages library, create new web part page.

f. Add webpart in page edit mode, select your webpart.

g.  Save the page and refresh, you should see similar output.

That’s it, this way we can apply different conditional logic based on SharePoint Page type.

Post Inspiration answer by @GautamdSheth at this link.

Hope this helps..Happy Coding!!!!

For any queries/help, just a tweet a away… Follow me on @siddh_me for such blogs on Office 365/SharePoint.

(Visited 17 times, 1 visits today)