Retrieve List Views From SharePoint List Using PnP JavaScript

Introduction

In this article, you will learn to perform the basic list view read operations on SharePoint sites, using PnP JavaScript Core Library.

Note: The operations, given below, get information from the respective site where the code is executed. 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 respective site where the code is executed.

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 have explained about the necessity of using the promise and retrieve JS references, in the article mentioned above. You can download these references from 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 environments.

The code snippet, given below, shows setting up the header:

$pnp.setup({
    headers: {
        "Accept": "application/json; odata=verbose",
    },
});

Retrieve List Views

In this section, you will learn how to retrieve all list views available for a list.

First, we need to retrieve the list by using the list name; and then, we need to access the views collection. Get method is used to get all the views information.

The following code snippet helpsin  retrieving all the list views and properties.

$pnp.sp.web.lists.getByTitle("PnPList").views.get().then(function(data){
    for(var i=0;i<data.length;i++){
        console.log("View Title : " + data[i].Title);
        console.log("View URL   : " + data[i].ServerRelativeUrl);
    }

}).catch(function(data){
console.log(data);
});

The following snapshot shows the views available on the list.

 

Retrieve List Views with Selected Properties

Here, we will see how we can list down all the views for a list with only selected view properties. Select method filters the required properties.

The following code snippet shows all the views for a list with only view title property filtered, using select method.

// Get Views with few properties
$pnp.sp.web.lists.getByTitle("PnPList").views.select("Title").get().then(function(data){
    for(var i=0;i<data.length;i++){
        console.log("View Title : " + data[i].Title);
    }

}).catch(function(data){
console.log(data);
});

The following snapshot shows the result for the above operation on debugger console.

 
Retrieve Required List View

Here, we will see how we can get the view that is required, using view title.

The following code snippet retrieves a list view with properties by passing the view name filter.

// Get View by Title
$pnp.sp.web.lists.getByTitle("PnPList").views.getByTitle("PnPView").get().then(function(data){
    console.log("View Title : " + data.Title);
    console.log("View URL   : " + data.ServerRelativeUrl);
}).catch(function(data){
console.log(data);
});

Retrieve Required List View with Select Properties

Here, we will see how we can get a particular view information, using view title, and get only required properties using select method.

The following code snippet retrieves a view from a list by using view name and gets only URL of view in the response.

// Get View by Title with selected properties
$pnp.sp.web.lists.getByTitle("PnPList").views.getByTitle("PnPView").select("Title").get().then(function(data){
    console.log("View Title : " + data.Title);
}).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 learned how to retrieve the views and their properties from a SharePoint site, using PnP JavaScript Core Library. 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.