SharePoint Framework Development - List Creation Using PnP JS



Published: 14 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 article, we will see how to use PnP JS in SPFx to create and provision a custom list. The major project files used in this solution has been zipped and uploaded here. Feel free to download it. 

As the first step, let's create the directory, where we will be adding the solution, using the command given below.

md CreatePnPList 

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

cd CreatePnPList

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

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

●      What is your Webpart description- We will specify it as ‘List created using PnP JS and SharePoint Framework’.

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

Edit the web part

Run ‘Code .’ to open the project in Visual Studio Code.

Install PnP JS Module

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

Thus PnP js has been loaded to the project. We can refer it in the project by using 

import { Web } from "sp-pnp-js";

Create List using PnP method

We can create the list using PnP js method - spWeb.lists.add as shown below. We will be creating a custom list named SPFxPnpList which has the template id : 100.

Once the web part has been created, the status will be updated in the div.

<div id="ListCreationStatus" />

TS File code for Creating the List

The entire code for the TS file is shown below. ‘this.CreateList()’ method in the render method will call the PnP list creation method and create the SharePoint list.

Run gulp serve to package the solution and test in the workbench.

Test the Web part in SharePoint Online

Now, let’s test the Web part in SharePoint Workbench available in SharePoint Online. Once we have logged in 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 CreatePnPList icon.

This will deploy the list to SharePoint and will show a success message in the UI as shown below.

Heading over to site contents we can see the newly created list. 

Summary

Thus we saw how to create a SharePoint List using SharePoint Framework and PnP JS. In the upcoming article we will see how to create a Search Webpart using SharePoint Framework and PnP 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