Getting Started With SharePoint Framework Development Using PnP JS

We can seamlessly integrate PnP JS file with SharePoint. The new Patterns and Practices JavaScript Core Library was created to help developers by simplifying common operations within SharePoint. Currently it contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions. We can use them with SharePoint Framework to work with SharePoint with minimal effort. You can get detailed information and documentation about PnP JS from here.

Retrieve SharePoint List Items using PnP JS and SharePoint Framework

As part of this article, we will see how to create a SharePoint Framework webpart that retrieves List Items using PnP JS. The major project files used in this solution have been zipped and uploaded at Microsoft TechNet Gallery. Feel free to download it.

We can create the directory, where we will be adding the solution, using the command given below.

md PnPSPFrameworkGetItems

Let’s move to the newly created working directory, using the command.

cd PnPSPFrameworkGetItems

We will then create the client Web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

This will display the prompt, which we will have to fill up, so as to proceed with the project creation.

• What is your solution name? : Set it to ‘PnPSPFrameworkGetItems’.

On pressing enter, we will be asked to chose the working folder for the project.

• Where do you want to place your files- Use current folder.
• What framework would you like to start with- Select “No javaScript web framework” for the time being, as this is a sample Web part.
• What is your Webpart name- We will specify it as ‘PnPSPFrameworkGetItems ‘and press Enter
• What is your Webpart description- We will specify it as ‘Get SP Lit items using PnP’
  
  
  

Yeoman has started working on the scaffolding of the project. It will install the required dependencies and scaffold the solution files for the ‘PnPSPFrameworkGetItems’ Web part, which will take some time to complete. Once completed, we will get a congratulations message.



Edit Webpart

Run Code to create the scaffolding and open the project in Visual Studio Code.





Now, we have to load PnP JS file which we will use within the project to create list. We will be using npm to add PnP JS file as shown below.

npm install sp-pnp-js --save



Define List Model

Since we want to retrieve an Employee list items data, we will be creating list model with SharePoint list fields in the PnPspFrameworkGetItems.TS file, as shown below. Place it above the ‘PnPspFrameworkGetItems’ class.

export interface ISPList {
    EmployeeId: string;
    EmployeeName: string;
    Experience: string;
    Location: string;
}

Create Mock HTTPClient to test data locally

In order to test the list item retrieval in the local workbench, we will create a mock store, which returns mock Employee list data. We will create a new file inside ‘src\webparts PnPspFrameworkGetItemsWebPart’ folder named MockHttpClient.ts, as shown below.

We will then copy the code given below into MockHttpClient.ts, as shown below.

import {
    ISPList
} from './PnPspFrameworkGetItemsWebPart';
export default class MockHttpClient {
    private static _items: ISPList[] = [{
        EmployeeId: 'E123',
        EmployeeName: 'John',
        Experience: 'SharePoint',
        Location: 'India'
    }, ];
    public static get(restUrl: string, options ? : any): Promise < ISPList[] > {
        return new Promise < ISPList[] > ((resolve) => {
            resolve(MockHttpClient._items);
        });
    }
}

We can now use the MockHttpClient class in the ‘PnPspFrameworkGetItems’ class. Let’s import the ‘MockHttpClient’ module by going to the PnPspFrameworkGetItemsWebPart.ts and pasting the line given below just after “import { IPnPspFrameworkGetItemsWebPartProps } from './I PnPspFrameworkGetItemsWebPartProps';”

import MockHttpClient from './MockHttpClient';

We will also add the mock list item retrieval method within the ‘PnPspFrameworkGetItemsWebPart’ class.

private _getMockListData(): Promise < ISPList[] > {
    return MockHttpClient.get(this.context.pageContext.web.absoluteUrl).then(() => {
        const listData: ISPList[] = [{
            EmployeeId: 'E123',
            EmployeeName: 'John',
            Experience: 'SharePoint',
            Location: 'India'
        }, {
            EmployeeId: 'E567',
            EmployeeName: 'Martin',
            Experience: '.NET',
            Location: 'Qatar'
        }, {
            EmployeeId: 'E367',
            EmployeeName: 'Luke',
            Experience: 'JAVA',
            Location: 'UK'
        }];
        return listData;
    }) as Promise < ISPList[] > ;
}

Retrieve SharePoint List Items

We will be making use of PnP library to get the list items as shown below,

private _getListData(): Promise < ISPList[] > {
    return pnp.sp.web.lists.getByTitle("EmployeeList").items.get().then((response) => {
        return response;
    });
}

Retrieve the SharePoint List Items From Employee List

Once we run the gulp serve command, we can test the Web part in SharePoint Workbench in the local environment or using SharePoint Online Context. SharePoint Framework uses ‘EnvironmentType’ module to identify the environment, where the Web part is executed.

To implement this, we will import ‘Environment’ and the ‘EnvironmentType’ modules from the @microsoft/sp-core-library bundle by placing it at the top of the PnPspFrameworkGetItemsWebpart.ts file. 

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

We will then check Environment.type value and if it is equal to Environment.Local, the MockHttpClient method, which returns dummy data will be called else the method that calls REST API that will retrieve SharePoint list items will be called.

private _renderListAsync(): void {
    if (Environment.type === EnvironmentType.Local) {
        _getMockListData().then((response) => {
            _renderList(response.value);
        });
    } else {
        _getListData().then((response) => {
            _renderList(response.value);
        });
    }
}

Finally, we will add the method given below, which will create HTML table out of the retrieved SharePoint list items.

private _renderList(items: ISPList[]): void {
    let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
    html += `<th>EmployeeId</th><th>EmployeeName</th><th>Experience</th><th>Location</th>`;
    forEach((item: ISPList) => {
        html += `
<tr>
<td>${item.EmployeeId}</td>
<td>${item.EmployeeName}</td>
<td>${item.Experience}</td>
<td>${item.Location}</td>
</tr>
`;
    });
    html += `</table>`;
    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    innerHTML = html;
}

To enable rendering of the list items given above, we will replace Render method in the ‘PnPspFrameworkGetItemsWebPart’ class with the code given below.

public render(): void {
    domElement.innerHTML = `
<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" style="font-size:28px">Welcome to SharePoint Framework Development using PnP JS Library</span>
<p class="ms-font-l ms-fontColor-white" style="text-align: left">Demo : Retrieve Employee Data from SharePoint List</p>
</div>
</div>
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div style="background-color:Black;color:white;text-align: center;font-weight: bold;font-size:18px;">Employee Details</div>
<br>
<div id="spListContainer" />
</div>
</div>
</div>`;
    _renderListAsync();
}

TS File Contents to retrieve list data using PnP

The entire TS file contents that was used to implement data retrieval in the SPFx webpart is given below,

import pnp from 'sp-pnp-js';
import {
    Version
} from '@microsoft/sp-core-library';
import {
    BaseClientSideWebPart,
    IPropertyPaneConfiguration,
    PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import {
    escape
} from '@microsoft/sp-lodash-subset';
import {
    Environment,
    EnvironmentType
} from '@microsoft/sp-core-library';
import styles from './PnPspFrameworkGetItems.module.scss';
import * as strings from 'pnPspFrameworkGetItemsStrings';
import {
    IPnPspFrameworkGetItemsWebPartProps
} from './IPnPspFrameworkGetItemsWebPartProps';
import MockHttpClient from './MockHttpClient';
import {
    SPHttpClient
} from '@microsoft/sp-http';
export interface ISPList {
    EmployeeId: string;
    EmployeeName: string;
    Experience: string;
    Location: string;
}
export default class PnPspFrameworkGetItemsWebPart extends BaseClientSideWebPart < IPnPspFrameworkGetItemsWebPartProps > {
    private _getListData(): Promise < ISPList[] > {
        return pnp.sp.web.lists.getByTitle("EmployeeList").items.get().then((response) => {
            return response;
        });
    }
    private _renderListAsync(): void {
        if (Environment.type === EnvironmentType.Local) {
            _getMockListData().then((response) => {
                _renderList(response);
            });
        } else {
            _getListData().then((response) => {
                _renderList(response);
            });
        }
    }
    private _renderList(items: ISPList[]): void {
        let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
        html += `<th>EmployeeId</th><th>EmployeeName</th><th>Experience</th><th>Location</th>`;
        forEach((item: ISPList) => {
            html += `
<tr>
<td>${item.EmployeeId}</td>
<td>${item.EmployeeName}</td>
<td>${item.Experience}</td>
<td>${item.Location}</td>
</tr>
`;
        });
        html += `</table>`;
        const listContainer: Element = this.domElement.querySelector('#spListContainer');
        innerHTML = html;
    }
    public render(): void {
        domElement.innerHTML = `
<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" style="font-size:28px">Welcome to SharePoint Framework Development using PnP JS Library</span>
<p class="ms-font-l ms-fontColor-white" style="text-align: left">Demo : Retrieve Employee Data from SharePoint List</p>
</div>
</div>
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div style="background-color:Black;color:white;text-align: center;font-weight: bold;font-size:18px;">Employee Details</div>
<br>
<div id="spListContainer" />
</div>
</div>
</div>`;
        _renderListAsync();
    }
    private _getMockListData(): Promise < ISPList[] > {
        return MockHttpClient.get(this.context.pageContext.web.absoluteUrl).then(() => {
            const listData: ISPList[] = [{
                EmployeeId: 'E123',
                EmployeeName: 'John',
                Experience: 'SharePoint',
                Location: 'India'
            }, {
                EmployeeId: 'E567',
                EmployeeName: 'Martin',
                Experience: '.NET',
                Location: 'Qatar'
            }, {
                EmployeeId: 'E367',
                EmployeeName: 'Luke',
                Experience: 'JAVA',
                Location: 'UK'
            }];
            return listData;
        }) as Promise < ISPList[] > ;
    }
    protected get dataVersion(): Version {
        return Version.parse('1.0');
    }
    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
            pages: [{
                header: {
                    description: strings.PropertyPaneDescription
                },
                groups: [{
                    groupName: strings.BasicGroupName,
                    groupFields: [
                        PropertyPaneTextField('description', {
                            label: strings.DescriptionFieldLabel
                        })
                    ]
                }]
            }]
        };
    }
}

Package and Deploy the Solution

Let’s run Gulp serve to package the solution.



Test the Web part in local SharePoint Workbench

Now, we can see the output generated in the local SharePoint Workbench.

Now let’s add the web part by clicking on the Plus sign.

Since the environment is local, the mock data has been used to generate the table, as shown below.



Test the Web part in SharePoint Online

Now, let’s test the Web part in SharePoint Workbench available in SharePoint Online. This time, the 'EnvironmentType' check will evaluate to SharePoint and the PnP method will be called to retrieve the list items from SharePoint list. Once we have login in to SharePoint Online, we can invoke the workbench by appending the text ‘_layouts/15/workbench.aspx’ to SharePoint Online URL.

It has picked up the list items from the list and displayed it as a table.

The major project files used in this solution has been zipped and uploaded at Microsoft TechNet Gallery. Feel free to download it.

Summary

Thus, we saw how to retrieve SharePoint List Items using SharePoint Framework and PnP JS.