Using PnPJs with React framework In SPFx

This blog focusses on some of the best practices while using PnPJS with react framework in SPFx.

SharePoint SPFx Development Model is designed to help both new and existing devel-opers better acquaint themselves with the new set of tools required to do the job, as well as providing clear instructions how some of the server-side full trust development model practices can be achieved with this new framework.

Moving into the cloud and away from server-side takes away certain customization capabilities, but enhances the client-side look and feel. Relying on the SPFx framework, this new model can be used to create modern lightweight web applications in Share-Point Online.

Building your SharePoint Framework (SPFx) web parts
You may choose to use @pnp/sp library when building your SharePoint Framework (SPFx) web parts. This library provides a fluent API to make building your REST que-ries intuitive and supports batching and caching.

PnPJS is a fluent JavaScript API for consuming SharePoint and Office 365 REST APIs in a type-safe way. You can use it with SharePoint Framework, Nodejs, or JavaScript pro-jects. This is an open-source initiative provided by Microsoft offering developers an an-other way to consume information from SharePoint and Office 365.
The next section enumerates the steps to build a SPFx web part which uses MS Graph API through PnPjs.

Getting Started
This section focusses on Building SPFx webpart using MS Graph API through PnPjs.
Before running the steps mentioned below, check the version of Node JS and NPM in your environment as shown in the figure below.

FIG 1: CHECKING THE VERSION OF NODE JS AND NPM

Building SPFx webpart using MS Graph API through PnPjs
1. To create a SPFx web part project first create a scaffolding using the command yo @microsoft/sharepoint. The yeoman generator will ask questions like including which type of framework you want to choose .Select React as framework and press enter.

FIG 2: CREATING A SCAFFOLDING USING YEOMAN GENERATOR

2. For using PnPjs, it is necessary to Install PnPjs dependencies. Run the below com-mand in Node JS command prompt

npm install @pnp/common @pnp/odata @pnp/logging @pnp/graph @microsoft/microsoft-graph-types –save

This command will also install useful type definitions for MS Graph types.

3. Open your webpart (i.e. main webpart file – PnPGraphWebPart.ts) and import setup method:
import { setup as pnpSetup } from ‘@pnp/common’;

FIG 3: IMPORT SETUP METHOD

Add onInit (method which is called before the DOM is rendered) and configure spfx-Context with an instance of web part’s context (i.e. current context).

FIG 4: CONFIGURING SPFXCONTEXT

4. To access Microsoft Graph API, one needs to specify READ permissions to request data in the web part. Open ./config/package-solution.json (from the config folder) and add permission requests, as shown in the figure below:

FIG 5: ADDING PERMISSION REQUESTS TO ACCESS MICROSOFT GRAPH API

Note: This example uses Group API to show Office 365 groups so that all the groups which are created at tenant level (O365) will be shown in the client side web part.

5. Once the web part is developed, it needs to be bundled to create a package which will create .sppkg package in the sharepoint folder. Run the commands given below to bun-dle and package your solution.
gulp bundle –ship
gulp pacakge-solution –ship

On running the above commands, .sppkg file will be created, as shown in the figure be-low.

FIG 6:CREATING THE .SPPKG FILE

6. The package created in the previous step needs to be uploaded on your tenant-scoped App Catalog. Upon uploading you will see a screen as shown in the figure below.

FIG 7: UPLOADING YOUR TENANT-SCOPED APP CATALOG

The message means that you should approve all permission requests which we added earlier.
The next section explains how to approve app permission requests.

Approving App Permission Requests
There are different ways to approve your permission requests (UI, PowerShell, and O365 cli). The simplest one is through the new UI of SharePoint central administration. You can navigate to your old SharePoint admin center and click “Try new” UI from there. Or you can simply open a page https://-ad-min.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement (replace “ with your real organization name), please find be-low the screenshot:-

Go ahead and select your APIs and click Approve. Once approved, you will see the screen as shown in the figure below.

FIG 8: API MANAGEMENT SCREEN

graph.groups.get<Group[]>().then(groups => {
this.setState({
groups
});
});

The code mentioned in the image below is used to access Office 365 groups using Graph API (Groups API)

FIG 9: ACCESSING OFFICE 365 GROUPS USING GRAPH API

On completion of the above steps, simply run gulp serve and open SharePoint hosted workbench (it only works in hosted one) to see the output. The output will be as shown in the figure below.

FIG 10: GROUPS AT YOUR TENANT

Cross Verifying the Output
To cross-verify the output, check the below screen where Office 365 groups are shown. Go to Office 365 admin center and click on Groups on left and check the groups which are created.

FIG 11:CROSS VERIFYING THE OUTPUT USING GROUPS

Note: Web part in this solution illustrates the following concepts on top of the SharePoint Frame-work:
1. showcases PnPJS configuration inside SharePoint Framework
2. showcases how to use MS Graph with PnPJS
3. showcases how to correctly configure SharePoint Framework solution and tenant to allow PnPJS to call MS Graph

Important Tips
1. Please use http://aka.ms/sppnp for the latest updates around the whole SharePoint Patterns and Practices (PnP) initiative.If you want to learn more about PnP JS Library, refer the URL – https://pnp.github.io/pnpjs/
2. The following packages comprise the Patterns and Practices client side libraries.
@pnp/common: Provides shared functionality across all pnp libraries
a. @pnp/config-store : Provides a way to manage configuration within your application
b. @pnp/graph : Provides functionality to query the Microsoft Graph
c. @pnp/logging: Light-weight, subscribable logging framework
d. @pnp/nodejs: Provides functionality enabling the @pnp libraries within nodejs
e. @pnp/odata: Provides shared odata functionality and base classes
f. @pnp/pnpjs: Rollup library of core functionality, mimics sp-pnp-js
g. @pnp/sp : Provides a fluent api for working with SharePoint REST
h. @pnp/sp-addinhelpers: Provides functionality for working within SharePoint add-ins
i. @pnp/sp-taxonomy: Provides a fluent API for querying taxonomy in-formation
j. @pnp/sp-clientsvc: Handles generic communication with client.svc endpoint, removing SP.*.js dependencies

Conclusion
This article explained how we can use PnPJS in SharePoint Framework (SPFx) client side web-part by using React as JavaScript framework. If you’d like to know more on this topic write to us today at reachit@aqltech.com.

To get latest updates and hear new on Office 365 subscribe to our blog section now.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *