Related Service

Software Development

A comprehensive approach to building reliable software

Learn More
Published: 20 November 2018

In SharePoint on-premise, to perform various basic custom operations on SharePoint lists or libraries CAML/XML-based feature is used. Later, these operations are provided using the client-side object model (CSOM), REST API, etc. In Microsoft SharePoint Online and Microsoft Office 365, various operations are served through remote provisioning technique, i.e. CSOM. Customization is provisioned in full trust code solutions or sandbox solutions.

Microsoft has introduced PnP JS to ease the above process. PnP JS stands for the “Pattern and Practices JavaScript Core Library.” This core library is fluent JavaScript API and used for the simplified common operations in SharePoint and SharePoint Framework like CRUD operations with the list, copy documents from one library to another, etc. Currently, this API is working with REST API, Utility and helper functions in a type-safe way. You can use this API in NodeJS, SharePoint Framework, and JavaScript project. This is an open source initiative API which is provided and managed by the Microsoft developer. This APIs/Projects are maintaining in the GitHub, where other developers can also share their solutions/scenarios in it.


PnP JS can be used for various SharePoint operations in site. SharePoint Developers can add it by giving reference of this JS file in SharePoint site page and use it with JavaScript/jQuery code. To develop some functionality using PNP JS, it requires some prerequisites and script API’s to be added, and they are listed below:

  • jQuery reference file
  • e6-promise script API JS
  • Fetch script API JS
  • PnP reference file

CDN paths for these files are as below:

  1. JQuery.js:
  2. e6-Promise.js:
    • A lightweight library that provides tools for organizing asynchronous code.
  3. fetch.js:
    • This JavaScript is a Promise-based mechanism to request web from browser programmatically.
  4. PnP.js:

Note: Please add script references of above JS files in the same order as provided above.

Let’s check some basic CRUD operations with PNP JS in a SharePoint site.

Basic CRUD operations with Pattern and Practice JS

You can add this code in the Content Editor Web Part of the SharePoint site page. Please add above mentioned script files’ references in code before adding the PNP JS code chunk in the web part.

Read Operation

  • Let’s start with simply Read operation with PnP JS.

Web Details

  • You can use below PnPJS get() function to get the current web information.
    $pnp.sp.web.get().then(r => {
    $(".output")[0].innerText = r.Title;

    Script Code:

    Web Details Script Code


    Web Details OutPut

Note: This PnPJS script works like REST API in the backend.

  • You can also get web object of different web by using web URL with PnP JS. Please check below code for the same.
    var web = new $pnp.Web("");"Title").get().then(r => {
    $(".output")[0].innerText = r.Title;

Get Lists Details

  • Below code is used to get the list count of the current web.
    $pnp.sp.web.lists.get().then(r => {
    $(".output")[0].innerText = r.length;

    Script Code:

    Get List Detail Script Code


    Get List Detail OutPut

Get List Items

  • You can use the below script to read the list items using list name:
    $pnp.sp.web.lists.getByTitle("Test 1").items.get().then(r => {    
    $(".output")[0].innerText = r.length;

Script Code:

Get List Item Script Code


Get List Item Output

You can also get item by ID using below script:

$pnp.sp.web.lists.getByTitle("Test 1").items.getById(1).get().then(r => {    
$(".output")[0].innerText = r.Title;

Add Operation

You can use below script to add an item in a custom list or library:

  • Without Attachment in list:

    First, let’s add new item in custom list with title. Below is the script to add the list item:

    Title: "PnP Item 1"
    }).then(r => {
    $(".output")[0].innerText = "Item Added successfully";

    Script Code:

    Without Attachment Script Code


    Without Attachment OutPut
    List Output:

    Without Attachment List OutPut

  • With Attachment in list:

    Let’s add item with attachment in the custom list.

    Title: "PnP Item 2"
    }).then(r => { 
    $(".output")[0].innerText = "Item Added successfully";
    	r.item.attachmentFiles.add("file.txt", "Here is some file content."); 

    Script Code:

    With attachment Script Code


    With attachment OutPut

    List Output:

    With attachment List OutPut

Update Operation:

Let’s try to update the existing item using its item ID:

Title: "PnP Updated Title"
}).then(r => {
	$(".output")[0].innerText = "Item Updated Successfully";

Script Code:

Update Operation Script Code


Update Operation Output

List OutPut:

Update Operation List Output

Delete Operation

You can delete the item from a list using its item ID:

$pnp.sp.web.lists.getByTitle("Test1").items.getById(3).delete().then(r => {    
$(".output")[0].innerText = "Item Deleted";

Script Code:

Delete Operation Script Code


Delete Operation Output

Exception handling in Pattern and Practice JS

You can handle the exception using catch function in PnP JS. Below is the example to handle the exception in PnP JS. In below example, catch block handles the Exception of the PnP JS execution:

$pnp.sp.web.lists.getByTitle("Test 1").items.getById(1).get().then(r => {
$(".output")[0].innerText = r.Title;
}).catch(function (data) {

You are now familiar with PNP JS and its basic operations. It is very easy to perform various tedious operations using PNP JS.


Without any solution package, one can perform the CRUD operations on list/library with the beauty of PnP JS. PnP JS Core library can be used in SharePoint Online and On-premises to ease the access of SharePoint data. The complexity of REST API operations on the SharePoint content is simplified by PnP JS. It can be used with Script Editor Web Part, SharePoint Framework and SharePoint Add-ins based implementations.


  • Leave a message...

Related Articles

Microsoft Graph with SharePoint Framework

28 January 2019

One question that comes to our mind while require accessing Azure Active Directory resources is whether we should make use...

Microsoft Graph and Azure Active Directory Graph API

26 December 2018

In our previous blog, we have covered the basic knowledge about Microsoft Graph and Azure Active Directory Graph API. From...

Microsoft Recurrence Flow for Office 365

12 December 2018

Huge organizations have many requirements for the automation of tasks in one or another way. It is always beneficial for...