How To Integrate PnP Graph And PnP SP In Your WebPart

PnP libraries are created to serve the needs of developers for easy learning and implementation of logic through client-side programming.

Patterns and Practices (PnP)

Microsoft and external members contribute to the implementation practices for SharePoint. PnP libraries are created to serve the needs of developers for easy learning and implementation of logic through client-side programming.

Let’s directly jump into the implementation section. Please follow the below steps to get it done.

Step 1

Build your SharePoint Framework client-side web part and integrate it with Angular 4.

Step 2

Import the following package in your package.json file to use PnP graph and PnP SP in your webpart.

"@pnp/sp": "^1.1.1",
"@pnp/odata": "^1.1.1",
"@pnp/graph": "^1.1.1",
"@pnp/common": "^1.1.1",
"@pnp/logging": "^1.1.1"

Step 3

After step 2, go to the Node.js command prompt and make sure you are pointing the project directory and run the below command to install the packages.

npm install

Step 4

Import the following code to use PnP Graph in your webpart.

import { graph } from "@pnp/graph";

Import the following code to use PnP SharePoint in your webpart.

import { sp } from "@pnp/sp"

import { sp } from "@pnp/sp"

Step 5

To set up the PnP Graph in your webpart, add the following code in your webpart.

protected onInit(): Promise < void > {
    return super.onInit().then(_ => {
        graph.setup({
            spfxContext: this.context
        });
    });
}

Step 6

The next step is to mention the required permissions in package-solution.json file.

webApiPermissionRequests is an array of web API’s permission request items. Every item in webApiPermissionRequests is defined, the resource and the scope of the permission request.

Resource

Defines the resource for which user wants to configure the permission request. The resource value to access Microsoft Graph is Microsoft Graph

Scope

Defines the name of the permission that user wants to access in the resource. The permission name and ID were briefly explained in official Graph API documentation

Please find the sample code snippet below,

{
    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
    "solution": {
        "name": "demo-pnp-webpart-client-side-solution",
        "id": "eec3adfa-1f7a-46bc-bf7d-913e64be54e8",
        "version": "1.0.0.2",
        "includeClientSideAssets": true,
        "skipFeatureDeployment": true,
        "webApiPermissionRequests": [{
                "resource": "Microsoft Graph",
                "scope": "User.ReadBasic.All"
            }, {
                {
                    "resource": "Microsoft Graph",
                    "scope": "Group.Read.All"
                },
                {
                    "resource": "Microsoft Graph",
                    "scope": "Notes.Read"
                },
                {
                    "resource": "Microsoft Graph",
                    "scope": "Tasks.Read"
                },
                {
                    "resource": "Microsoft Graph",
                    "scope": "Group.ReadWrite.All"
                },
            ]
        },
        "paths": {
            "zippedPackage": "solution/demo-pnp-webpart.sppkg"
        }
    }

Step 7

Go to the Node.js command prompt and make sure you are pointing the Project directory and run the below command to verify that the solution builds correctly.

gulp build

Step 8

Run the below command to bundle the solution, we are using –ship to make sure that all our node_modules dependencies were included in bundle file.

gulp bundle --ship

Step 9

Use the following command to package the solution.

gulp package-solution --ship

Step 10

Go to your App Catalog in your SharePoint and push the .sppkg file generated from Step 9.

Once you upload the file in app catalog you will be prompted with a popup like below,

During installation of your app, you can find the highlighted content in the deploy window, which alerts you to approve the pending permissions for Microsoft Graph.

Step 11

After the installation process, go to the SharePoint admin center and select the “Try the preview” option in your SharePoint admin center.

Step 12

In new modern SharePoint Admin preview page, we do a new menu called API Management to manage app permissions in your tenant.

In step 6, we requested 5 permissions in package-solution.json, you can find those permission requests in the API management screen below. An administrator should approve requested permission scopes in the resource to grant access to the apps using those resources.

Now we are all set to use the Microsoft Graph in SPFx webparts. Below I have mentioned some of the code samples for real-time scenarios which will help you to start with Microsoft graph in SPFx.

Note
There are no webApiPermissionRequests needed to access SharePoint for using the resources. webApiPermissionRequests is needed only to access Microsoft Graph.

Import the desired component code and HTML code in your webpart as given in the following examples.

The following examples are based on Microsoft Graph using PnP Graph.

Get groups in your organization

The below component and HTML code are used to get all the groups in your organization.

Component code

public groups_get() {
    graph.groups.get().then(result => {
        this.groupData = result;
        console.log("groupData", this.groupData);
    });
}

HTML code

<div class="container">
    <div class="row">
        <div class="col-sm-6" *ngFor="let items of user"> <b> <br>displayName: {{items.displayName}} <br> description: {{items. description }} </b> </div>
    </div>
</div>

Response - Add groups in your organization

The below component is used to add a group in your organization.

Component code

public groups_add() {
    let name: "vignesh";
    let mailNickname: "group";
    let groupType: 0;
    graph.groups.add(name, mailNickname, groupType).then(groups_add => {
        alert("groups_add");
    });
}

The following examples are based on SharePoint using PnP.

Get SiteUsers in your organization

The below component is used get all SiteUsers in your organization.

Component code

public siteUsers() {
    sp.web.siteUsers.get().then(result => {
        this.siteUsers_details = result;
    })
}

Add SiteUser in your organization

The below component is used add a SiteUser in your organization.

Component code

public siteUsers_add() {
    let loginName = 'vignesh';
    sp.web.siteUsers.add(loginName).then(result => {
        alert("SiteUser ADDED");
    })
}

So, far, we have discussed how to integrate Pnp Graph and Pnp SharePoint in SPFx webpart and some samples for that as well.

• To learn how to use MS Graph in SharePoint Framework (SPFx) app

If you have any questions/issues about this article, please let me know in the comments.