Populate SharePoint sites using Office UI and PnP JS

Office UI Fabric is the CSS framework similar to Bootstrap. Office UI framework is used as a front end model for Office applications. This has its own styling for responsive grid and components for building modern web and office applications. This fabric styling and components are used a primary core for developing modern UI experience in SharePoint. Fabric framework also available in different flavors, using jQUery, React and Angular JS, so this enables the UI designers or developers to choose their choice in developing the modern applications.

I’m gonna start a series to integrating Office UI fabric components and PnP JS library to access & manage the SharePoint objects. So, we will start with a simple example like populating the SharePoint sub sites in fabric Table component.

We are using PnP JS component for retrieving the sub-sites and fabric table components for rendering the retrieved results in a table structure.

Prerequisites:

We have to include some references before using the PnP JS and fabric components,

Example Snippets:

In our example, we are using PnP JS component to retrieve all the subsites from the SharePoint and generating the table rows with the retrieved sub site information and at last adding the row items to the Fabric Table component.

1 Comment

Krishna
· September 27, 2016 at 8:35 PM

Hi Shanta Kumar,
I am trying this code on my SharePoint 2013 on premises servers, I don’t get any result or no errors.
Does the pnp.js, es6-promise.js, and fetch.js referred in the above code sample work in SharePoint 2013 on premises ?