List View Field Operations On SharePoint List Using PnP JavaScript Library

Introduction

In this article, you will learn how the View fields can be added, retrieved and deleted to/from ListViews for a list 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 operation, 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 environment.

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

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

Add Fields To List Views

In this section, we will see how fields can be added to a list on the SharePoint site, using PnP JavaScript library. The field which is part of the list can only be added to the respective ListView.

The list is retrieved by List name. Then, the View is retrieved using View name. Then, the fields are accessed and a new field is added to the View field collection.

The code snippet, given below, helps add existing fields to existing Views on a list.

// Add field to view
$pnp.sp.web.lists.getByTitle("PnPList").views.getByTitle("PnPView").fields.add("Description").then(function(data){
    console.log("The field is added to List View")
}).catch(function(data){
    console.log(data);
});

The following snapshot shows the "Created" field added to the “PnPView” View.


Retrieve Fields From List View

In this section, we will see how the View fields from the existing ListView can be retrieved, using PnP JavaScript Library code.

The list is retrieved using List name. The View collection is retrieved. Then, the View is retrieved using View name. Then, the field collection is retrieved. The get operation gets all the fields. 

The following code snippet shows how all the View fields are retrieved from “PnPView” of “PnPList”.

// Get fields from view
$pnp.sp.web.lists.getByTitle("PnPList").views.getByTitle("PnPView").fields.get().then(function(data){
    if(data.Items.results != null && data.Items.results.length > 0){
        var viewFields = data.Items.results;
        console.log("Available fields on the view are,");
        for(var i=0;i<viewFields.length;i++){
            console.log(viewFields[i]);
        }
    }

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

The following snapshot shows the fields retrieved from ListView on the debugger console.

Remove Fields From List View 

In this section, we will see how the fields from Views can be removed using PnP JavaScript Library. Removing field from View only removes the field from ListView, not physically from the list.

First, we need to retrieve the respective View from ListView collection. Then, remove the View using delete method.

The following code snippet removes the fields from the View.

// Delete fields from view
$pnp.sp.web.lists.getByTitle("PnPList").views.getByTitle("PnPView").fields.remove('Title').then(function(data){
}).catch(function(data){
console.log(data);
});

Summary

Thus, you learned how to add, retrieve and remove fields to/from the ListViews on 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.