20
Nov
2018
Use of PnP JS Core JavaScript Library

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.

SharePoint Patterns & Practices

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.

Prerequisites

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: https://code.jquery.com/jquery-3.3.1.min.js
  2. e6-Promise.js: https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.js
    • A lightweight library that provides tools for organizing asynchronous code.
  3. fetch.js: https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.js
    • This JavaScript is a Promise-based mechanism to request web from browser programmatically.
  4. PnP.js: https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.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

    Output:

    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("<Web Url>");
    web.select("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

    OutPut:

    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

    OutPut:

    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:

    $pnp.sp.web.lists.getByTitle("Test1").items.add({
    Title: "PnP Item 1"
    }).then(r => {
    $(".output")[0].innerText = "Item Added successfully";
    });

    Script Code:

    Without Attachment Script Code

    Output:

    Without Attachment OutPut
    List Output:

    Without Attachment List OutPut

  • With Attachment in list:

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

    $pnp.sp.web.lists.getByTitle("Test1").items.add({
    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

    OutPut:

    With attachment OutPut

    List Output:

    With attachment List OutPut

Update Operation:

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

$pnp.sp.web.lists.getByTitle("Test1").items.getById(2).update({
Title: "PnP Updated Title"
}).then(r => {
	$(".output")[0].innerText = "Item Updated Successfully";
});

Script Code:

Update Operation Script Code

OutPut:

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

Output:

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) {
console.log(data);
});

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

Conclusion

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.

26
Oct
2018
Create Image Library using SPFx in SharePoint Online

Looking to the issue currently or normally faced by SharePoint Developers and the client’s using SharePoint Online solution regarding creating the SharePoint Picture or Image library manually – we have come up with the concept to create it programmatically. In the previous blog – we provided assistance regarding how to create SPFx web part to display the content of the Picture/Image albums from the Image Library.

05
Oct
2018
SharePoint Framework Extensions – Quick Tutorial

From the time SharePoint Framework was launched, it opened new ways for SharePoint Developers to build and deploy modern web parts across Office 365 tenants. SharePoint Framework availability enabled the users to build mobile-friendly, intuitive web parts using latest web developer tools.

19
Sep
2018
Client Side Web Part – Image Gallery using SPFx in Modern Communication Site

In the modern era, most of the enterprises are moving their SharePoint development towards the cloud and they started migrating their intranet sites/contents to SharePoint online (Office 365). We see several updates in SharePoint online – Office 365, they are providing more user-friendly and lightweight components in the sites which are known as modern experience. Microsoft introduced the communication site as a new feature which is completely in new/modern user experience.

23
Jun
2017
ADFS Configuration in Windows Server 2012 R2 Standard with SharePoint 2013

The procedures in this article describe how to configure AD FS to act as an Identity Provider Security Token Service (IP-STS) for a SharePoint 2013 web application and Provider Hosted APP (SharePoint Add-In). In this configuration, AD FS issues SAML-based security tokens consisting of claims so that client computers can access web applications that use claims-based authentication. You can use an alternative identity provider than AD FS, but it must support the WS-Federation standard.

18
May
2017
SharePoint Provider hosted App with Single Page application with help of Angular 2

Environment Setup for Angular2 Development

Note: For this, Windows 2012 R2 OS machine for development is used. In which SharePoint 2013 server is also installed.