Actually, It’s Already In The SharePoint PageContext!

What is SharePoint PageContext ?

SharePoint PageContext provides standard definitions for SharePoint objects shared between the client-side applications, web parts, and other components. Typically the data is fetched via REST queries when navigating to a new page. Additionally, it can be preloaded by the web server or filled from a custom application cache.

How to access SharePoint PageContext?

In classic SharePoint pages, we can access it directly in the SharePoint page via _spPageContextInfo window variable.

In modern SharePoint, we needed to scaffold our projects to create custom WebParts and customizations via SharePoint generator. The object is passed down from the BaseClientSideWebPart inherited from @microsoft/sp-component-base

 const element: React.ReactElement<ITestWebPartProps > = React.createElement(
      TestWebPart,
      {
        description: this.properties.description,
        context: this.context,
        title: this.properties.title,
        displayMode: this.displayMode,
        updateProperty: (value: string) => {
          this.properties.title = value;
        }
      }
    );

Below is the screenshot of the PageContext accessible from your WebPart scaffolds we just passed in the code above.

Seeing those properties, you can get the data right away even without doing an extra query! You can actually use this if you need an ID reference to what you are looking for.

SharePoint PageContext in Table

How useful is the SharePoint PageContext ?

Very useful! You can do all sorts of validations and checks without doing a lot of queries and awaits!

1. Below is a list of common usage on how you can optimize the SharePoint Page context. The list is of course based on my experiences.
   • Check if the current user is external user.
   • Get the users basic information, email, ID, time Zone, and Display Name.
   • Get the Azure Active Directory Tenant and User ID.
   • Identify which site page a current user is accessing.
   • The current permission a user has.
   • Access the SharePoint page color theme!
   • Get the current list you are in and the users permissions.
   • Check if the current user is an Administrator, is an Owner or has actually a permission to edit and more.
   • Get the associated Hub Site ID.
   • Produce the current users photo URL.
   • Produce a URL for the current users Delve site / Personal Site.
   • Get the current users preferred language.

Now that is one useful tip! For questions and clarifications, please write it as a comment below. Have a nice day! 

References : PageContext class

Automation Cascading StyleSheet Cheat Sheet Collaboration Competitors Content Type CSS Currency Date Formats Design Flows HTML5 Intl Issues Javascript JavsScript Luxon Microsoft Teams ModernScriptEditor Myths NodeJs O365 Office 365 OneDrive Overflow PnP Power Automate PowerShell Rest Endpoint ScriptEditor scss Send an HTTP Request to SharePoint SharePoint SharePoint Architecture SharePoint Designs SharePoint Modern SharePoint Online SPFX SPO Styling Sync Teams Teams App Termstore Workflows

• Facebook
• Twitter
• LinkedIn
• Pinterest
• Mail