Getting Started: Install & Use

Within a TypeScript 2.0 project

NPM Install

npm install sp-pnp-js --save

Import to TypeScript file

import pnp from "sp-pnp-js";

Begin using the API

pnp.sp.web.get().then(w => { // ... });

Selectively Import

Starting with 1.0.5 you can selectively import parts of the library. This works for Site, Web, and many of the supporting classes. This also provides much better support for Webpack and similar bundlers.

import { Web } from "sp-pnp-js";
let w = new Web("{Absolute Web Path}");
w.get().then(w => { // ... });

You can also import the entire namespace to see what is available.

import * as spns from "sp-pnp-js";
let w = new spns.Web("{Absolute Web Path}");
w.get().then(w => { // ... });

let d = new spns.Dictionary<string>();
// ...

Using requirejs

Please see the sample visual studio project for an example using requirejs.

From a Content Editor WebPart.

1. Download pnp.js

2. Upload pnp.js to your site. In this example we will upload it to a library called "Style Library"

3. Add a new file called pnptest.html to the same library with the following content.

<script type="text/javascript" src="{PathToYourSite}/Style%20Library/pnp.js"></script>
<script type="text/javascript" src="{PathToYourSite}/Style%20Library/pnptest.js"></script>

<div id="main"></div>

4. Add a new file called pnptest.js to the same library with the following content:

$pnp.sp.web.select("Title").get()
.then(function(data){
   document.getElementById("main").innerText=data.Title;
})   
.catch(function(data){  
   document.getElementById("main").innerText=data;
});

5. Add a Content Editor WebPart to a page within the site

6. ** Set the url of the content editor webpart to "{PathToYourSite}/Style%20Library/pnptest.html"

7. Open the page in chrome, and the webpart will display the Title of your site.

#Polyfill

The page will throw an error if you view it in Internet Explorer at this point because Internet Explorer does not support the fetch protocol or es6 promises, both of which are used by pnp.js.

To remedy this we must include polyfills for these.

8. Download the es6-promises polyfill from https://github.com/stefanpenner/es6-promise and upload it to your style library.

9. Download the fetch polyfill from https://github.com/github/fetch and upload it to your style library.

10. Add the following two lines to the beginning of pnptest.html:

<script type="text/javascript" src="{PathToYourSite}/Style%20Library/es6-promise.min.js"></script>
<script type="text/javascript" src="{PathToYourSite}/Style%20Library/fetch.js"></script>

Now if you open the page in Internet Explorer, the webpart will display the site Title.