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

[code language=”javascript”]

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

[/code]

Reading website:

The following examples returns the current web site information

[code language=”javascript”]
<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>

[/code]

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.

[code language=”javascript”]
<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>

[/code]

Deleting website:

The following example deletes the current website

[code language=”javascript”]
<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>

[/code]

 

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

Shantha Kumar
Shantha Kumar
Articles: 278

24,849 Comments

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

  1. Hi, how can i set a new web like this in spfx project:

    import { Web } from “sp-pnp-js”;
    let w = new Web(“{Absolute Web Path}”);
    w.get().then(w => { // … });

    but in a content editor… If i try “new Web”, Web is undefined..

    Thanks in advance!

  2. Hi MARIANO PEREZ,

    Use the code snippet to get the web details in content editor using pnp js,

    var w = new $pnp.Web(‘‘);
    w.get().then(function(response){ console.log(response); });

    Please let me know, whether this helps you!!!

Comments are closed.