Get Started with PnP JS Core

Abstract: The Patterns and Practices JavaScript Core Library is created to help developers by simplifying common operations within SharePoint. It contains a large number of extension methods and properties, which are used to manage the contents, generate reports based on the lists, library or settings, etc. We can also use PnP JS core to filter out specific content we want. Current these APIs are working with SharePoint REST API as well as utility and helper functions. This avoids SharePoint developers of creating REST requests, letting developers focus on the what and less on the how. In this article, we will illustrate how to use PnP.js to do some common operations, such as getting site title, filtering out lists with a specific template.

 Get Site Title

In order to make getting started easier, we will start with a basic operation of getting the site title. In this article we will add the Java Script code snippet into a content editor web part, which is responsible for getting the title of the current site.

1. Go here to download PnP.js.
2. Upload pnp.js to your site collection. Typically, we will upload it to the “Style Library” Library.
3. Create a new page using any page layout, then add a Content Editor web part. Finally copy the following code to this Content Editor web part.

<script type=”text/javascript” src=”{YourSiteCollectionURL}/Style

Library/pnp.js”></script>

<script  type=”text/javascript”>

$pnp.sp.web.select(“Title”). get()

.then(function(data){

document.getElementById(“main”). innerText=data.Title;

})

.catch(function(data){

document.getElementById(“main”). innerText=data;

});

</script>

<div id=”main”></div>

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Finally, it looks like below, then save it.

4. Open the page in chrome, and the web part will display the title of the current site.

Other extension methods and properties

1. Search documents:

2. Read List Items:

3. Logging:

4. Setup Caching:

5. Using Caching:

The PnP JS core now supports the following methods:

Because the PnP JS core is built using the SharePoint REST API, so you can use the same syntax to filter site content.

Conclusion

The vision of the PnP JS Core is to simplify SharePoint Client Side development, make SharePoint development intuitive and let developers focus on what they want to do. So…Enjoy it.

See also:

https://dev.office.com/patterns-and-practices

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

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

https://github.com/SharePoint/PnP-JS-Core/wiki/Live-Samples