How To Connect Your Client-side Web Part To Access SharePoint Page Context

SharePoint client-side Web parts

Client-side Web parts are client-side components, which are built, using HTML and JavaScript or using common scripting frameworks, such as AngularJS and React. They can be deployed in both SharePoint Online as well as On-Premise. These are the building blocks of pages, which run inside the context of a SharePoint page. For more details, refer Overview of SharePoint client-side web parts.

In my previous blog, you have seen how to build your first SharePoint client-side Webpart. In this, you would have tested the Web part by hosting the workbench locally, which does not have an access to SharePoint page context. In this blog, you will see how to access SharePoint page context in your Web part. In order to do this, you need to use the workbench hosted in SharePoint and by doing this, you can access various key SharePoint properties such as Web, user, list, list item etc.

 

 

It is this.context.pagecontext variable, which is used to get access to SharePoint page context.

Steps Involved

Open the command prompt and navigate to the respective project directory. For example

cd D:\SPFx\MyClientSideWebpartDemo

Run the console command given below to open the project files in Visual Studio Code.

code

Navigate to the Web part class file src\webparts\helloworld\HelloWorldWebpart.ts

Replace the inner HTML code block inside Render method with the code given below and save the file.

<div class="${styles.helloWorld}">
    <div class="${styles.container}">
        <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
            <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1"> <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
                <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
                <p class="ms-font-l ms-fontColor-white">${escape(this.properties.description)}</p>
                <p class="ms-font-l ms-fontColor-white">Site Title: ${escape(this.context.pageContext.web.title)}</p>
                <p class="ms-font-l ms-fontColor-white">Current Logged in User: ${escape(this.context.pageContext.user.displayName)}</p> <a href="https://aka.ms/spfx" class="${styles.button}">
<span class="${styles.label}">Learn more</span>
</a> </div>
        </div>
    </div>
</div>`;

Run the console command given below to build and bundle the updated code.

gulp serve

By default, Workbench will be opened on localhost:4321. Click Add an icon and subsequently add HelloWorld Webpart.

 

Navigate to the workbench hosted in SharePoint. Open SharePoint site and append _layouts/15/workbench.aspx. The full URL looks like https://team.com/sites/spfx/_layouts/15/workbench.aspx.

Click Add icon and add HelloWorld Webpart. You can see SharePoint properties displayed, as shown below.

 

 

Summary

In this blog, you have seen how to connect your client-side Web part to access SharePoint page context.