PnP JavaScript Library with jQuery in SharePoint

PnP team introduces a new open source JavaScript library to access SharePoint objects and This library depends on REST API services. Due to that, this component is useful from SharePoint 2013.

In my previous posts, I have explained about this library with sample codes. That information is available from below links,

Introduction to PnP-JS-Core

Basic SharePoint web operations using PnP-JS-Core

Filtering SharePoint Object Collections using PnP-JS-Core

In addition to that, I am adding a series of articles up on using PnP library with different JS frameworks. So far I have covered, integration with Angular JS, React JS and Knockout JS. In this article, we’ll see PnP JavaScript library with jQuery to achieve the same result (populating a sub sites in a tabular format), which we obtained with other frameworks.

PnP JavaScript with Angular JS 1.0

PnP JavaScript with React JS

PnP JavaScript with Knockout JS

jQuery is one of the widely used popular JavaScript framework and it is used to traverse the html document and provides simplified syntax to manipulate the DOM structure in a webpage.

What are the essential files required?

jQuery.js Download the jQuery library for manipulating the DOM structure

Pnp.js PnP JavaScript library

Fetch.js Used by PnP js file to handle web requests and responses (Required for IE)

Promise.js Used by PnP js file to handle web requests and responses (Required for IE)

Note: Fetch JS & Promise JS files are required to run PnP methods in some browsers (IE).

In our example, we have to create a sample.html file under Style Library or Site Assets. Here I am creating the file under Site Assets Library.

Include Script Files:

I have uploaded the required script files under Site Assets library.

[code language=”javascript”]

<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
<script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script>
<script type=’text/javascript’ src=’/SiteAssets/Scripts/jquery-3.0.0.min.js’></script>

[/code]

Note: I have downloaded the latest jQuery js file and referenced in the script.

Include HTML:

Add the below css styles and html snippet to the sample html file.

[code language=”javascript”]

<!– To style table in html –>
<style type="text/css">
.web-table th{ background-color:#ddd; border:2px solid #fff;}
.web-table td{ background-color:#eee; border:2px solid #fff;}
.web-heading{ padding:2px;}
</style>

<div>
<h2 class="web-heading">Sub Sites</h2>
<div>
<table width="100%" cellpadding="10" cellspacing="2" class="web-table" id="webTable">
<thead>
<tr>
<th>Title</th>
<th>Id</th>
<th>Created</th>
<th>Web Template</th>
</tr>
</thead>
<tbody></tbody>
</table>
<p id="countid">No websites</p>
</div>
</div>

<script type="text/javascript">
<!- – Insert PnP and jQuery Code – – >
</script>

[/code]

Using jQuery, we will get the tbody element and add the table row based on the retried result.

Include PnP JS Code:

[code language=”javascript”]

$pnp.sp.web.webs.get().then(function(result) {
//jQuery Code
}).catch(function(err) {
alert(err);
});

[/code]

Webs.get() returns the collection subsites from the current web.

Insert the jQuery code to add the row to the table.

Include jQuery Code:

[code language=”javascript”]

$(document).ready(function(){
$pnp.sp.web.webs.get().then(function(result) {
if(result.length > 0)
$(‘#countid’).html("Total subsites: "+ result.length);

for(var i=0; i< result.length; i++){
$("#webTable tbody").append( "<tr>"+
"<td>"+result[i].Title+"</td>"+
"<td>"+result[i].Id+"</td>"+
"<td>"+result[i].Created+"</td>"+
"<td>"+result[i].WebTemplate+"</td>"+ "</tr>");
}
}).catch(function(err){ alert(err);});

});

[/code]

Run the PnP request code after the page fully loaded. Based on the success response, traverse the html and select the body tag of webTable table and append the row.

Full Sample Code:

Insert the below code with in Script Editor or Content Editor web-part.

[code language=”javascript”]

<script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
<script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
<script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script>
<script type=’text/javascript’ src=’/SiteAssets/Scripts/jquery-3.0.0.min.js’></script>

<!– To style table in html –>
<style type="text/css">
.web-table th{ background-color:#ddd; border:2px solid #fff;}
.web-table td{ background-color:#eee; border:2px solid #fff;}
.web-heading{ padding:2px;}
</style>

<div>
<h2 class="web-heading">Sub Sites</h2>
<div>
<table width="100%" cellpadding="10" cellspacing="2" class="web-table" id="webTable">
<thead>
<tr>
<th>Title</th>
<th>Id</th>
<th>Created</th>
<th>Web Template</th>
</tr>
</thead>
<tbody></tbody>
</table>
<p id="countid">No websites</p>
</div>
</div>

<script type="text/javascript">

$(document).ready(function(){
$pnp.sp.web.webs.get().then(function(result) {
if(result.length > 0)
$(‘#countid’).html("Total subsites: "+ result.length);

for(var i=0; i< result.length; i++){
$("#webTable tbody").append( "<tr>"+
"<td>"+result[i].Title+"</td>"+
"<td>"+result[i].Id+"</td>"+
"<td>"+result[i].Created+"</td>"+
"<td>"+result[i].WebTemplate+"</td>"+ "</tr>");
}
}).catch(function(err){ alert(err);});

});
</script>
[/code]

Output:

Conclusion:

This article provides a simple example to lists the sub sites in a table format using jQuery framework.