Basic SharePoint web operations using PnP JavaScript library

Article
1/17/2024

Introduction

In this article, we will cover how to use the PnP JS Core library to do some basic web site operations in SharePoint. To know more about this library, visit the below links

Simplified Javascript library for SharePoint

· https://github.com/OfficeDev/PnP-JS-Core

Basic Web Operations

PnP JS Core library is developed from the SharePoint REST API to simplify the development process and ease the developer's 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 minimum number of code than other SharePoint libraries.

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

https://github.com/OfficeDev/PnP-JS-Core/blob/master/dist/pnp.js

https://github.com/OfficeDev/PnP-JS-Core/blob/master/dist/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 create 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 browser console to view the results.

Share via