Basic Web Operations Using PnP JS Core In SharePoint

Introduction

In this blog, we will cover how to use the PnP JS Core library to do some basic Website operations in SharePoint. To know more about this library, check the links, given below:

• Introduction to simplified JavaScript library for SharePoint
• PnP-JS-Core

Basic Web Operations

PnP JS Core library is developed from SharePoint REST API to simplify the development process and ease the developers burden in creating SharePoint client based Applications. It supports all type of operations, which are supported by SharePoint REST API.

The basic Web operations like creating a Website, reading a Website, updating a Website and deleting a Website are achievable in a minimum number of code than other SharePoint libraries.

To use this library in the code, we have to refer to PnP JS file in the project or the script. The latest PnP JavaScript file is available from the dist folder under PnP-JS-Core Github location.

• PnP-JS-Core
• pnp.min.js

We can download and upload this file to SharePoint location and include in our Application or we can also directly use this location in our project as a CDN.

Creating website:

The following examples creates a new child site under the current context site.

<script type=”text/javascript” src=”/siteasstes/scripts/pnp.min.js”></script>
<script type=”text/javascript”>
    //The following line creates a new child site to the current site with the url as “newsite” and title as “New Sub Site”
    $pnp.sp.web.webs.add("New Sub Site", "newsite", "Description for the new Site", "STS", "1033", true).then(function(result) {
        if (result.data.Created) {
            alert('Site created successfully');
        }
    });
</script>

Reading website

The following examples return the current Website information.

<script type=”text/javascript” src=”/siteasstes/scripts/pnp.min.js”></script>
<script type=”text/javascript”>
    //The following line gets the web object and shows the web properties (title & description)
    $pnp.sp.web.get().then(function(web) {
        alert("Title: " + web.Title + "\r\n" + "Description: " + web.Description);
    });
</script>

Updating Website

The following example updates the description to the current context Website and in success, gets and shows the value of the current Website description.

<script type=”text/javascript” src=”/siteassets/scripts/pnp.min.js”></script>
<script type=”text/javascript”>
    //The following line updates the description property to the current web
    $pnp.sp.web.update({
        Description: 'A sample description'
    }).then(function(success) {
        success.web.get().then(function(result) {
            console.log(result.Description);
        });
    });
</script>

Deleting website

The following example deletes the current Website.

<script type=”text/javascript” src=”/siteassets/scripts/pnp.min.js”></script>
<script type=”text/javascript”>
    //The following line deletes the current website
    $pnp.sp.web.delete().then(function(result) {
        alert(‘Site deleted successfully.’);
    });
</script>

Place the Script in CEWP or Script editor and also you can try in the Browser console.

To work the code, given above in Internet Explorer, we have to include the fetch.js and es6-promise.js JavaScript files as a reference in addition to pnp.js file.

Conclusion

In this article, we have learned the basic Web CRUD operations, using PnP JavaScript library. Click here to read the same article from my blog.