Developing SharePoint Framework Web Parts Using PnP JavaScript Modules

Introduction

In this article, you will learn how to work with SharePoint list operations on SharePoint framework Web parts, using PnP JavaScript libraries.

This article shows how to import PnP JavaScript libraries into SPFx Web part and also shows the samples of SharePoint list operations , using PnP code with the screenshots. 

Create SPFx Web part

SharePoint framework Web part needs to be created. In this sample, plain Web part is created without any frameworks.

In the previous articles, you can learn about developing SharePoint Framework Web parts.  

• Developing Web Parts Using SharePoint Framework - Part One
• Developing Web Parts Using SharePoint Framework - Part Two
• Developing Web Parts Using SharePoint Framework - Part Three

Installing PnP JavaScript modules

To develop the Web parts, using PnP modules, PnP JavaScript module needs to be installed/ imported into the SPFx project. The same can be accomplished, using NPM command. Open the command prompt and navigate to the project (created above) folder. The code snippet given below shows NPM command to install PnP JavaScript modules to the project.

npm install --save sp-pnp-js

SharePoint operations

The installed modules will be present under the node_modules folder of the project. The modules can be imported to the Webparts, using import command.

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

Similarly, other objects can be imported. First, the required Web object is created, using the site relative URL. With the created object, lists property is accessed and the operations are performed on the lists collection property.

let spweb = new pnp.Web("../");
spweb.lists.get().then(function(){
});

Get Lists

 

Let us see how to retrieve all the lists available on SharePoint site. The Web object is created, using the relative URL. Subsequently, the lists object is retrieved, using the code snippet given below.

public GetLists(): void{
  let spweb = new pnp.Web("../");
  spweb.lists.get().then(function(splists){
    splists.forEach(splist => {
      document.getElementById("listData").innerHTML += `<div>${splist.Title}</div>`;
    });
  });
}

Get List

 

The required list can be retrieved, using the list title. Using the Web object, the getByTitle method is used to retrieve the specified list. The snippet given below shows retrieving the required list.

public GetList(): void{
  let spweb = new pnp.Web("../");
  spweb.lists.getByTitle("TestList").get().then(function(splist){
      document.getElementById("listData").innerHTML += `
        <div>Title      : ${splist.Title}</div>
        <div>Description: ${splist.Description}</div>
        <div>Template ID: ${splist.BaseTemplate}</div>
      `;
  });
}

Create List

 

The list is created, using the input parameters like title, description and template Id. The code snippet given below shows creating the list instance on the site.

public CreateList(): void{
  let spweb = new pnp.Web("../");
  let listTitle = "NewList";
  let listDescription = "List created using spfx + pnp";
  let listTemplateId = 100;
  let enableCT = false;
  spweb.lists.add(listTitle, listDescription,listTemplateId, enableCT).then(function(splist){
      document.getElementById("listData").innerHTML += `NewList Created`;
  });
}

Delete List

 

The list is deleted, using the delete method by retrieving the list, using list title. The code snippet given below shows deleting the list.

public DeleteList(): void{
  let spweb = new pnp.Web("../");
  spweb.lists.getByTitle("NewList").delete().then(function(){
    document.getElementById("listData").innerHTML += `NewList deleted`;
  });
}

Summary

 

Thus, you have learned about developing SharePoint Framework Web part, using SharePoint PnP JavaScript library modules.