SharePoint Framework Development - Create List CRUD webpart Using PnP JS



Published: 27 July 2017

 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

This is a continuation post in the SharePoint Framework Development series, In a previous article, we saw how to set up the development environment for SharePoint Framework. We also saw the basic Hello World web part creation and  how to provision SharePoint List with custom Site Columns and Content Type here.

In this section, we will see how to create a webpart that does Create/Read/Updated/Delete operations against SharePoint List items using SPFx and PnP JS. The major code files used for this demo is uploded here.  

Spin up Node.js command prompt, using which we will be creating the Web part project structure. We can create the directory, where we will be adding the solution, using the command given below.

md PnPSPCRUD

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

cd PnPSPCRUD 

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 ‘PnPSPCRUD’.

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 ‘PnPSPCRUD’ and press Enter

●      What is your Webpart description- We will specify it as This Webpart will perform CRUD operations using PnP and SPFx

Edit the web part

Run ‘Code .’ to 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.

npm install sp-pnp-js --save

Implement CRUD using PnP JS

In order to use PnP methods,we can refer the PnP file in the project as below : 

import * as pnp from 'sp-pnp-js'; 

We will then add CRUD buttons in the render method so that the UI looks as below. 

Each button will have an event listener which will be invoked on button click. 

The event listeners will be added as : 

Each of these methods will use PnP to implement the CRUD operations as: 

TS File contents for implementing CRUD using PnP

The entire TS file contents is as shown below, this.getListData() in the render method will first call the function that will retrieve the list items and display within the div element declared in the render method. AddEventListeners() will bind the button events to respective functions which gets called upon the button clicks.

Test the Web part in SharePoint Online

Now, let’s test the Web part in SharePoint Workbench available in SharePoint Online. Run Gulp Serve in the Node Command line and head over to SharePoint Online Site. Once we login to SharePoint Online, we can invoke the workbench by appending the text ‘_layouts/15/workbench.aspx’ to SharePoint Online URL. Add the webpart to the page by selecting ‘PnPspCRUD’ icon.

 The UI will look like below:

Add Item

We can input the details and save it to the list by clicking on Add which will create a new list item using the PnP Add method

On Clicking on Add, the new item has been added to the SharePoint List. 

The table has listed the new item at the bottom of the list. 

Update Item

Similarly, we can update the existing list item by adding the data and providing the list item id which will be used to pick the item from the list and update it. 

On Clicking on Update, the list item has been updated. 

The location column value of the list item has been changed and reflected in the table as shown below. 

Delete item

We can make use of the PnP delete method to delete the item from the list by providing the item id as shown below. 

Summary

Thus we explored how to implement CRUD operations against SharePoint List Items using SPFx and PnP JS. In the upcoming articles we will take a deep dive to SPFx implementation using React JS.



Join 6,500 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


About Author

Priyaranjan is a SharePoint Consultant with 7+ years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here