Retrieve SharePoint Site Collection Content Types Using PnP JavaScript Library

Introduction

In this article, you will learn how to perform the basic content type read operations on SharePoint site collections, using PnP JavaScript Core Library.

Note: The operations, given below, get information from the root 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 the site collections or sites or sub sites. The results will be retrieved only from the corresponding site collection, which the site is part of.

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:

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, only in the order given above.

Note: You can download the references from my initial article about PnP JavaScript Core library. 

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

I explained about the necessity of using the promise and retrieving JS references in the article's link, mentioned above. You can also download these references from the Github site, as well.

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 Site Collection Content Types

In this section, you will learn how to retrieve all the content types available on a site collection, using PnP JavaScript Core Library.

First, we need to retrieve the content type collection from the site object. Get method is used to retrieve all the content type information.

The following code snippet helps in retrieving all the content types and properties from a site collection.

$pnp.sp.site.rootWeb.contentTypes.get().then(function(data){
    console.log("There are totally " + data.length + " content types available on the site collection");
    for(var i=0; i < data.length; i++){
        console.log(data[i].StringId + " - " + data[i].Name);
    }
    }).catch(function(data){
    console.log(data);
});

Retrieve Site Collection Content Types with Selected Properties

In this section, you will learn, how to retrieve all the content types from a site collection with only selected content type properties, using PnP JavaScript Core Library. Select method filters the required properties.

The following code snippet shows all the content types for a site collection with only view title property filtered, using the select method.

$pnp.sp.site.rootWeb.contentTypes.select('StringId','Name','Description').get().then(function(data){
    console.log("There are totally " + data.length + " content Types available on the site collection");
    for(var i=0; i < data.length; i++){
        console.log("Content Type Name : " + data[i].Name);
        console.log("Content Type ID : " + data[i].StringId);
        console.log("Content Type Description : " + data[i].Description);
        console.log("----------------------------------------------");
    }
}).catch(function(data){
    console.log(data);
});

Retrieve Required Site Collection Content Type

In this section, you will learn how to retrieve only the required content type from the site collection, using content type ID.

The following code snippet retrieves a site collection content type with the properties by passing the content type ID, using getById method.

$pnp.sp.site.rootWeb.contentTypes.getById('0x01').get().then(function(data){
    console.log("Content Type Name : " + data.Name);
    console.log("Content Type ID : " + data.StringId);
    console.log("Content Type Description : " + data.Description);
    console.log("Content Type XML : " + data.SchemaXml);
}).catch(function(data){
    console.log(data);
});

Retrieve Required Site Content Type with Select Properties

In this section, you will learn how to retrieve only the required site content type, using content type ID with only the required properties, using getById and select methods.

The following code snippet retrieves a content type from a site collection by using content type ID and gets only the name of the content type in the response. Other properties are undefined in the response.

$pnp.sp.site.rootWeb.contentTypes.getById('0x').select('Name').get().then(function(data){
    console.log(data.Name);
}).catch(function(data){
    console.log(data);
});

Note: The results can be viewed on the Browser's debugger console for the operations, given above.

Summary

Thus, you have learned, how to retrieve the content types and their properties from a site collection in different ways, using PnP JavaScript core library. The operations can be executed from the site collection or any sub sites and still the site collection content types are retrieved. 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.