Simplified JavaScript Library for SharePoint

In modern tech world, most of the applications are revolve around client side development. SharePoint also concentrated most on client side development from SharePoint 2010 onwards by introducing the different type of Client side APIs.

Below are the commonly used APIs to accessing SharePoint objects from client side. They are

  • Managed Client Side Object Model
  • SharePoint JavaScript Object Model
  • REST API
  • Web Services

By developing the applications by using the above models requires the developers to spend lot of time in development. The client side models require the below process to retrieve the result,

  • To establish the connection to SharePoint site.
  • Queue and bundle the request
  • Sending the bundled request to the server
  • Retrieves and renders the result

To simplify the developer life instead of writing too much lines to process above steps, PnP (Patterns and Practices) team created a lot of helper and utility methods and named it as PnP JS Core Library.

PnP team creates a special interests group for JavaScript and comes with a JavaScript core library and this is an open source project, so anyone can contribute to improve this JavaScript core library. Currently it is fully developed based on SharePoint REST API using Typescript. SO we can develop client side applications using JavaScript or TypeScript.

PnP JS Core in simple words –

Trimmed version of JavaScript API for SharePoint

Refer the repository url https://github.com/OfficeDev/PnP-JS-Core which contains the source of PnP JavaScript core library for SharePoint. We can clone from this GitHub location and start contributing to improve this library.

This library supports from SharePoint 2013+ on premise & SharePoint Online environment.So far the PnP team released a 1.0 major version and also release 1.0.1 minor version with minor fixed.

Find the details from below location about each versions of PnP JS Core library,

https://blogs.msdn.microsoft.com/patrickrodgers/2016/06/06/pnp-js-library-1-0-0/

https://blogs.msdn.microsoft.com/patrickrodgers/2016/06/13/pnp-jscore-1-0-1/

 API Comparison:

The following examples in each area will returns the title and description of the website

SharePoint Native JavaScript Object Model

[code lang=”javascript”]
function getwebdetails() {
var clientContext = SP.ClientContext.get_current(); // equivalent to SPContext.Current
oWeb = clientContext.get_web(); //Gets the current Web Object
clientContext.load(oWeb, ‘Title’, ‘Description’, );
clientContext.executeQueryAsync(new function() {
var strmsg += "<b>Web Title:</b> " + oWeb.get_description() + "
";
console.log(strmsg);
}, onFailed);
}

ExecuteOrDelayUntilScriptLoaded(getwebdetails, "sp.js");

[/code]

SharePoint REST API

[code lang=”javascript”]
//Include jquery file to the SharePoint page
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web?$select=Title,Description", //THE ENDPOINT
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
//RESULTS HERE!!
console.log("Web: " + data.d.Title + " – Description: " + data.d.Description);
}
});

[/code]

PnP JS Core code

[code lang=”javascript”]
//Include pnp.js file to the SharePoint page
$pnp.sp.web.get().then(function(web) {
console.log(web.Title + ‘ – ‘ + web.Description);
});

[/code]

From the comparison of each model, PnP JS Core simplifies the code and eases the developer’s life.

References:
https://github.com/OfficeDev/PnP-JS-Core/wiki

Shantha Kumar
Shantha Kumar
Articles: 277

24,849 Comments

  1. Dear Shantha,
    I found your articles very well explained and helpful. Great work!!
    In my use case i have to list file/folder from sharepoint , uploa/download file from sharepoint from my mobile application (angular 2 + cordova).
    The sharepoint is hosted on intarnet,
    Could you provide some information how can i use the sp-pnp-js?

Comments are closed.