Skip to content

Instantly share code, notes, and snippets.

Created September 21, 2016 15:36
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Populate SharePoint sub sites in a table using PnP JS core component and Office UI Fabric
//Author: Shantha Kumar T
//Supports: SharePoint Online, SharePoint 2013+
//PnP JavaScript file available from
//Fabric Core CSS file available from
//<Release build>/dist/css/fabric.min.css
//Fabric JS file available from
//<Release build>/dist/js/fabric.min.js
<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/pnp.js"></script>
<link href="/SiteAssets/Styles/fabric/fabric.min.css" rel="stylesheet" type="text/css">
<link href="/SiteAssets/Styles/fabric/fabric.components.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/SiteAssets/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/SiteAssets/Scripts/fabric/fabric.min.js"></script>
<div class="ms-font-xxl ms-bgColor-themeDarker ms-fontColor-themeLighterAlt">Sub Sites</div>
<table class="ms-Table ms-Table--selectable" id="webTable">
<th class="ms-Table-rowCheck"></th>
<th>Web Template</th>
<tbody id="webTableBody"></tbody>
<p class="ms-font-m" id="countid">No websites</p>
<script type="text/javascript">
//Convert the HTML table to Fabric Table Component
var TableElements = document.querySelectorAll(".ms-Table");
for(var i = 0; i < TableElements.length; i++) {
new fabric['Table'](TableElements[i]);
//Retrieve the subsites and then populating the values in a Fabric Table
$pnp.sp.web.webs.get().then(function(result) {
if(result.length > 0)
document.getElementById('countid').innerHTML ="Total subsites: "+ result.length;
var tabhtml = "";
for(var i=0; i< result.length; i++){
var createdDate = new Date(result[i].Created);
tabhtml += "<tr><td class='ms-Table-rowCheck'></td>"+
"<td><a href='"+result[i].Url+"' target='_blank'>"+result[i].Title+"</a></td>"+
"<td>"+result[i].WebTemplate+"</td>"+ "</tr>";
document.getElementById("webTableBody").innerHTML = tabhtml;
}).catch(function(err){ alert(err);});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment