Getting Started With Sharepoint PnP Engine

• June 6, 2019
• Sameer Mohammed
• no comments

This blog will give you an overview of the Office 365 Developer Patterns & Practices tools. Moreover, you will see some of the most useful tools available on the market, most of them made by the community of Office 365 developers, to realize the potential of the platform.

Getting to Know Office 365 Developer Patterns & Practices tools

Office 365 Developer Patterns & Practices (PnP), which is a community initiative originally made by Microsoft and today held by a core team of a few Microsoft internals and external community members like MCSMs (Microsoft Certified Solution Masters for SharePoint) and MVPs (Microsoft Most Valuable Professionals). The focus of PnP is to provide training, guidance articles, samples, solutions, and more to support the community of Office 365 developers.

One of the key elements of the PnP offering is a library of helper types, extension methods, and frameworks to make it easy to develop Office 365 solutions. The library is called SharePoint PnP Core library, and it is an open source library that is available for free on GitHub
Also, PnP is being used in other areas as well like SharePoint Framework (SPFx), Office 365 development, Office Add-ins and Microsoft Graph API. 

Accessing SharePoint Using APIs

From SharePoint 2010, Microsoft introduced client-side development and use of different types of client-side API’s. The primarily used API’s to access SharePoint objects are:

1) Managed Client Side Object Model
2) JavaScript Object Model
3) SPServices
4) REST API’s

Using SharePoint patterns and practices JavaScript Core Library(PnP JS Core Library)

One of the most useful libraries for SharePoint Framework developers is SharePoint PnP JavaScript Core Library. This library was created to help SharePoint developers work with SharePoint content, simplifying the common operations with a REST wrapper required in most SharePoint applications. It has a simple and powerful API, which uses SharePoint REST API under the hood, but makes operations very easy and as straightforward as possible. It also includes a number of utility and helper functions. The library is currently in version 2.0.

Accessing PnPJS Core Library

To access SharePoint PnP JavaScript Core Library open the repository URL which contains the source of PnP JavaScript core library for SharePoint as showing in the figure below:-

https://github.com/SharePoint/PnP-JS-Core

There are numerous repositories on open source code samples. You can use the URL below to access such repository:-https://github.com/PnP

Learning with Samples

This section presents an example to demonstrate three ways to write the same type of code via SharePoint JSOM, REST and PnP.js.

Using JSOM
Use the code given below for JSOM.

function getwebdetails() {
var ctx = SP.ClientContext.get_current();
oWeb = clientContext.get_web();
ctx.load(oWeb, 'Title', 'Description');
clientContext.executeQueryAsync(new function() {
var wDetails = "Web Title: " + oWeb.get_description() + " ";
console.log(wDetails);
}, onQueryFailed);
}
ExecuteOrDelayUntilScriptLoaded(getwebdetails, "sp.js");

Using REST API
Use the code given below for REST API.

$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web?$select=Title,Description",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
console.log("Web: " + data.d.Title + " - Description: " + data.d.Description);
}
});

Using PnP.js
Use the code given below for PnP.js.

$pnp.sp.web.get().then(function(data) {
console.log(data.Title + ' - ' + data.Description);
});

To Use PnP.js in SharePoint, give reference to 3 scripts on a SharePoint page. as shown below.

< script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js" type="text/javascript"gt</script
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.0/es6-promise.min.js" type="text/javascript"gt</script
<sscript src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/2.0.5/pnp.min.js" type="text/javascript"gt</script

Following are the three types of script files used :

1) Fetch.min.js : This file is required to get the new feature of JavaScript promise work on Internet Explorer.
2) Promise.min.js: This file gives methods like “.then()” and “.catch()”, which are executed when called web service gives a response & fulfilled a promise or gives an error as response respectively.
3) Pnp.min.js: This file is required for SharePoint site objects operations
 
Tracking the PNP Journey

The PnP journey is fascinating. With a few driving forces within Microsoft and the community, the Office Developer Patterns and Practices emerged some years ago. Office Dev PnP, is a massive project aiming to provide a centralized hub to resolve common issues.In practice, the Office Dev PnP aids developers wishing to become better on their journey with the SharePoint Framework by providing a wealth of guidance and code that can be freely reused. Figure below shares some interesting insights on PnP’s journey and milestones.

Why PnP?

There’re a number of reasons why you should be using PnP. The figure below cites a few key reasons.

PnP JS Helps in
· By default follows good practices and eases Future maintenance headaches
· Benefit from code that was reviewed by multiple people
· Help by creating issues and by submitting pull requests (bug fixes, new features, new controls)
· Helps in simplifying common operations within SharePoint and the SharePoint Framework.
· Contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions.
· Takes the guess work out of creating REST requests, letting developers focus on “what” and less on “how”.

Acknowledging the 3 pillars of PnP

The three pillars of PnP are
PnP Core – wrapper over CSOM.
PnPJS – wrapper of SharePoint Rest API. Also supports Microsoft Graph API. Is fluent and quite awesome
PnP PowerShell – OOTB SPO shell is geared more towards Tenant and Site Collection level events. PnP PS uses PnP Core and is more geared towards lists, files, and list items as well as the tenant, site collection and web events

Conclusion

This blog showcased how to leverage PnP JS Core in SharePoint projects. If you’d like to know more about Office 365 or PnP do write to us today at enquire@aqltech.com. For more updates on the latest from the world of Office 365 do subscribe to our blogs/newsletters.