Retrieve Sub Sites From SharePoint Site Collection Using PnP JavaScript Core Library

Introduction

In this article, you will learn how to retrieve all the sub sites from SharePoint site collection, using PnP JavaScript core library.

Note: The operations, given below, get the information from the site collection. The logic can be executed by adding the script references on the content editor web part or any normal custom web part from sub sites or site collections. Still the results will be retrieved only from site collection, since we are using site object for data retrieval. 

Prerequisite

The required JavaScript core library references for executing any operations, using PnP are, 

• es6-promise.js
• fetch.js
• pnp.js or pnp.min.js 

The script references should be called from the Web parts in the above order only. 

Here, promise and fetch files are required for the Application to work on Internet Explorer Browser. It is because, PnP core library implements fetch or promises, which are not supported on Internet Explorer Browser. To overcome this issue, we need to add appropriate library references (es6-promise.js and fetch.js files).

The necessary references are attached as a zip file in this article. You can also download these references from the Github site, as well.

The PnP JavaScript core library is supported by SharePoint 2013, SharePoint 2016 On Premises and Office 365 versions. The following operations are tested on SharePoint 2013 and Office 365 environments.

Access all sub sites of Site Collection

Here, we will see how we can fetch all the sub sites available on the site collection, using PnP JavaScript library. 

• The required parameters for the traditional Aj calls are URL, header, success and error functions. Using PnP JavaScript libraries, the appropriate objects should be called. Only the header should be set for getting a user preferred response type.
  
  
• We can set up the header before executing any operation. This is required when you want the response type to be predetermined. Let us see, how we can get the JSON data as a response. This has to be done once, before initiating all the requests on the page. This step is not mandatory for O365 environment.

The code snippet, given below, shows setting up the header:

$pnp.setup({
    headers: {
        "Accept": "application/json; odata=verbose",
    },
});

Retrieve Properties 

We will see, how we can access the available sub sites from the site collection, using PnP JavaScript code.

The code snippet, given below, lists down all the sub sites, available on the site collection. It shows the sub sites count on the site collection. This will also show the sub site title and URL.

$pnp.sp.site.rootWeb.webs.get().then(function(data){
    console.log("There are totally " + data.length + " subsites available on the site collection");
    for(var i=0; i < data.length; i++){
        console.log("Sub Site Title : " + data[i].Title);
        console.log("Sub Site URL   : " + data[i].Url);
        // Similarly other properties can be retrieved
        console.log("---------------------------------");
    }

}).catch(function(data){
});

Retrieve only required properties

The required property values can only be retrieved, using the select method. In the select method, the required property names are passed as a string array.

As many property names can be passed to get the values, the code snippet, given below, gets only the required property values. It shows the sub sites count on the site collection. This will also show the sub site title and the URL.

$pnp.sp.site.rootWeb.webs.select("Title", "Url", "Description").get().then(function(data){
    console.log("There are totally " + data.length + " subsites available on the site collection");
    for(var i=0; i < data.length; i++){
        console.log("Sub Site Title : " + data[i].Title);
        console.log("Sub Site URL   : " + data[i].Url);
        console.log("Description    : " + data[i].Description);
        // Similarly other properties can be retrieved by passing in the select method
        console.log("---------------------------------");
    }
}).catch(function(data){
});

Note: The results can be viewed on the Browser's debugger console. 

Summary

Thus, you have learned how to retrieve the sub sites of a site collection and their properties, using PnP JavaScript core library. PnP JavaScript library is supported by SharePoint 2013, SharePoint 2016 On Premises and Office 365 versions. The operations, mentioned above, are tested in SharePoint 2013 and Office 365 environments.