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

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");

SharePoint REST API

//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);
    }
});

PnP JS Core code

//Include pnp.js file to the SharePoint page
$pnp.sp.web.get().then(function(web) {
    console.log(web.Title + ' - ' + web.Description);
});

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

One thought on “Simplified JavaScript Library for SharePoint

  1. Pingback: Create new lookup field in SharePoint List

Leave a Reply

Your email address will not be published. Required fields are marked *