Create, Update Or Remove List Views On SharePoint List Using PnP JavaScript Library


Introduction

In this article, you will learn to perform the basic ListView operations, like add, update, or delete views for a list on SharePoint sites, using PnP JavaScript Core Library.


Note

The operations, given below, get the information from the respective site where the code is executed. The logic can be executed by adding the script references on the content editor Web part or any normal custom Web part from the site collections, or sites, or sub sites. The results will be retrieved only from the respective site where the code is executed.


The PnP JavaScript Core Library is supported by SharePoint 2013, SharePoint 2016 On Premises, and Office 365 versions. The following operations are tested on SharePoint 2013 and Office 365 environments:


Prerequisite

The required JavaScript Core Library references for executing any operations, using PnP, are: 

  • es6-promise.js

  • fetch.js

  • pnp.js or pnp.min.js

The script references should be called from the Web parts, only in the order given above.


Note:

You can download the references from my initial article about PnP JavaScript Core Library. 

I have explained about the necessity of using the promise and retrieve JS references, in the article mentioned above. You can download these references from Github site as well.


We can set up the header before executing any operation. This is required when you want the response type to be predetermined. Let us see how we can get the JSON data as a response. This has to be done once, before initiating all the requests on the page. This step is not mandatory for O365 environment.


The code snippet, given below, shows setting up the header:

  1. $pnp.setup({        

  2. headers: {    

  3. "Accept": "application/json; odata=verbose",