Basic SharePoint web operations using PnP Javascript library

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, check the below links

Basic Web Operations:

PnP JS Core library is developed from the 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 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 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 returns the current web site 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.

2 thoughts on “Basic SharePoint web operations using PnP Javascript library

  1. Ofer Reply

    How about new List Item with a known content type.
    How do I do that?

    • Shantha Kumar Post authorReply

      Hi Ofer,

      We should pass the content type id with the item properties to create item with the content type.

      //To add the listitem with the content type, we should pass the id of the contenttype
      $pnp.sp.web.lists.getByTitle(“List Title”).items.add({
      ‘Title’: ‘Test Item with Content Type’,
      ‘ContentTypeId’: ‘0x01004C98CD8AC38E9F4D9FE456A7A32C7FFE’
      }).then(function(response) {
      console.log(response);
      });

      //’ContentTypeId’:
      You can try the above code for adding the items with known content type. Please let me know, if this helps you.

Leave a Reply

Your email address will not be published. Required fields are marked *