Install and Use

Within a TypeScript project

1. NPM Install

   npm install sp-pnp-js --save

2. Import to TypeScript file

   import pnp from "sp-pnp-js";

3. Begin using the API

   pnp.sp.web.get().then(...)

You can also import parts of the library into your project to use them directly:

import { objectIsNull } from "sp-pnp-js/lib/utils/args";

let b = objectIsNull(null); //true

From a Content Editor WebPart (untested script)

1. Download pnp.js from here ???

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.

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 thefetch 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.