Retrieve Web Content Types From SharePoint Using Pnp JavaScript Library

PnP-JS-Core library contains the number of extensible methods and properties using which we can achieve various actions in a simple code. To know more about this library component, visit the following links:

• Simplified JavaScript Library for SharePoint
• PnP-JS-Core Library

SharePoint has a lot of building blocks in collections which are used to form a SharePoint site. Those are used in managing the content and generating reports based on contents and settings etc.

In this post, we will use the PnP-JS-Core method to get the collection of content types from the SharePoint Site.

Example

The following code snippet is used to return the collection of Content Type and its properties from the current SharePoint site, using PnP JavaScript library. Click here to read more about getting the SharePoint Content Types.

<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.min.js"></script>

<div id="sample"></div>

<script type="text/javascript">
//contentTypes property returns all content types from the site
//then( ) runs on success
//catch( ) runs on failure

$pnp.sp.web.contentTypes.get().then(function(result) {
    console.log(result);
    var contetTypeInfo = "";
    for (var i = 0; i < result.length; i++) {
        contetTypeInfo += "Name: " + result[i].Name + "<br/>ID:" + result[i].StringId + "<br/><br/>";
    }
    document.getElementById("sample").innerHTML = contetTypeInfo;
}).catch(function(err) {
    alert(err);
});
</script>