Site Collection Manipulation Using PnP-Core JS

Introduction of PnP-Core JS

PnP-JS-Core library is a reusable library developed by Microsoft and community contributors. This library is designed majorly to make common SharePoint tasks easy and spontaneous. It contains many fluent APIs for working with the SharePoint REST API. Please refer to the following site to know more about the PnP-JS-Core library.

• Patterns and Practices SharePoint JavaScript Library

Here is a good C-Sharp Corner article which describes the basic functionality of PnP-JS-Core.

• Introduction to simplified JavaScript library for SharePoint

In this article, we will see the following concepts about Site Collection.

• List of properties that can be retrieved for Site Collection
• Update properties of Site Collection.
• Adding, deleting, or updating a Sub Site.

To use the PnP-JS-Core in our JavaScript, we need to include a few JavaScript files which can be downloaded from the following link.

• pnp.js

If we want to make the script work in Internet explorer, then we have to additionally add two more JS files that can be downloaded from the following link.

• fetch.js
• es6-promise.js

Once we have downloaded all the needed JS files, we can upload them to our SharePoint site library, like Site Assets; and include them in our JavaScript.

<script type=”text/javascript” src=”/siteassets/scripts/pnp.min.js”></script>
<script>
//our code
</script>

Details about Site Collection

We can retrieve all the details about the site collection with the following command in browser console.

$pnp.sp.web.get();

List of properties that are available for Site Collection is, as mentioned below. 

• AllowRssFeeds
• AlternateCssUrl
• AppInstanceId
• Configuration
• Created
• CurrentChangeToken
• CustomMasterUrl
• Description
• DocumentLibraryCalloutOfficeWebAppPreviewersDisabled
• EnableMinimalDownload
• Id
• IsMultilingual
• Language
• LastItemModifiedDate
• MasterUrl
• NoCrawl
• OverwriteTranslationsOnChange
• QuickLaunchEnabled
• RecycleBinEnabled
• ServerRelativeUrl
• SiteLogoUrl
• SyndicationEnabled
• Title
• TreeViewEnabled
• UIVersion
• UIVersionConfigurationEnabled
• Url
• WebTemplate
• odata.editLink
• odata.id
• odata.metadata
• odata.type

Retrieve Created Date and Last Modified Date

To retrieve the Site Created Date and Last Modified Date we can use the following script.

<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript">
    $pnp.sp.web.get().then(function(result) {
        alert('Created Date:' + result.Created + '\n' + 'Last Modified Date:' + result.LastItemModifiedDate)
    });
</script>

Retrieve all the available Web Template

In the below example, we will retrieve all the available web templates and display them in a table.

Add the following script to a txt file and upload it to the Site Assets or to any other needed location.

Create a page in SharePoint Site. Add a content editor web part and in web part properties, provide the path to the script file in the Content Link. Now, save the page and refresh it. You could see all the template names and titles.

<div id="template_Details"></div>
<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript">
    var templateDetails = "<table><tr align='left'><th>Template Title</th><th>Template Name</th></tr>";
    $pnp.sp.web.availableWebTemplates().get().then(function(result) {
        result.forEach(function(template) {
            templateDetails += "<tr><td>" + template.Title + "</td><td>" + template.Name + "</td></tr>";
        });
        document.getElementById("template_Details").innerHTML = templateDetails;
    });
</script>

Update property of the site

We can update the properties of site through PnP script. For example, if we want to change the title of the Site, we can use the following script to update the title.

Update the Title of the Site

<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript">
    $pnp.sp.web.update({
        Title: 'TestSite Title Update'
    }).then(function(result) {
        alert(‘Title Updated Successfully’)
    });
</script>

Delete the Site Collection

To delete the current site collection, we can use the following script.

Note: This will delete all the sub sites under this site collection.

<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript">
    $pnp.sp.web.delete().then(function(result) {
        alert(‘Site deleted successfully’);
    });
</script>

Create a SubSite

We can create subsites too, using PnP script. The parameters that should be passed to create a sub site are, as shown below. 

• Title - The new web's title
• Url - The new web's relative url
• Description - The web web's description
• Template - The web's template
• Language - The language code to use for this web
• InheritPermissions - If true permissions will be inherited from the partent web ( True /False )
• AdditionalSettings - Will be passed as part of the web creation body
  

  <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
  <script type="text/javascript">
      $pnp.sp.web.webs.add("Testing Subsite", "Testing", "Testing site desc", "STS", 1033, true).then(function(result) {
          alert('Subsite created successfully')
      });
  </script>

Retrieve details about Sub Sites

In order to retrieve the information about all the sub sites, we can use the following script.

<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script>
    $pnp.sp.web.webs.get().then(function(result) {
        result.forEach(function(webDet) {
            alert('Title: ' + webDet.Title + 'Description: ' + webDet.Description + 'Web Id: ' + webDet.Id)
        });
    });
</script>

To get the details of a particular sub-site, we can filter the sites using filter query.

For example, filtering based on the web Title.

$pnp.sp.web.webs.filter("Title eq 'Test Site'").get();

Conclusion

In this article, we learned about the properties of Site Collection that can be retrieved or updated through pnp js. There are various properties which are exposed for the site collection that we can utilize based on our requirement. Sub-site creation script can be used in Content Editor/Script editor web part or from a SharePoint Add-in.