How to Add, Update and Delete SharePoint List View Using Pnp In SPFX Application-Customizer

In this blog the method to add, update and delete SharePoint list view in SPFX application customizer is explained elaborately. We will see how we can use pnp in SPFX to perform all these list view operations.

In the following code we will go through step by step method to add our custom views with required properties, update an existing list view and finally how to delete a list view.

Befor you start using the code attached you have to first install pnp using the command “npm install sp-pnp-js –save”.

The code block for this is mentioned below.

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';
import pnp from 'sp-pnp-js';

import * as strings from 'HelloWorldApplicationCustomizerStrings';

const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface IHelloWorldApplicationCustomizerProperties {
  // This is an example; replace with your own property
  testMessage: string;
}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class HelloWorldApplicationCustomizer
  extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    pnp.setup({
      spfxContext: this.context
    });

    //The following method is to add a new view in list with specific properties
    //and also you can add those fields you want to include in this new list view.
    pnp.sp.web.lists.getByTitle("MyList").views.add("MyCustomView", false, {
      
          RowLimit: 10,
          DefaultView: true,
          ViewQuery: "<OrderBy><FieldRef Name='Modified' Ascending='False' /></OrderBy>",
    }).then((v: ViewAddResult) => {
      
          v.view.fields.removeAll().then(_ => {
      
              Promise.all([
                  v.view.fields.add("Title"),
                  v.view.fields.add("Id"),
                  v.view.fields.add("Modified"),
              ]).then(_ =>{
      
                  console.log("Custom listview created.");
              });
          });
    });

    //This following method will update the properties in your list view
    pnp.sp.web.lists.getByTitle("MyList").views.getByTitle("MyCustomView").update({
      RowLimit: 20,
    }).then((v: ViewUpdateResult) => {
  
      console.log("Custom listview updated successfully.");
    });


    //The following method will delete the list view
    pnp.sp.web.lists.getByTitle("MyList").views.getByTitle("MyCustomView").delete().then(_ => {
      
          console.log("Custom listview deleted.");
    });

    return Promise.resolve();
  }
}

After pnp is installed successfully use the attached code in your SPFX solution to go through all SPList view operations…

This solution is brought to you by our SharePoint professionals.

Softree Consulting employs SharePoint consultants; we are a technology services provider with the aim to help companies achieve exceptional performance through SharePoint. Our dedicated team of SharePoint consultants has the right bent of mind to understand and execute customer requirements.

Be it SPFx or SharePoint add-in developments, SharePoint 2019 developments, web part developments, migrating from SharePoint 2010/2013 to SharePoint 2013/2016/Office 365, Office 365, SharePoint hosted apps development or something else in SharePoint, we strive to deliver the best

Softree Consulting is an award-winning SharePoint consultancy that has been working with clients from across the globe to transform workplaces with tools and platforms from Microsoft technology. As a widely recognized organization, we are commonly approached to incorporate technical excellence and innovative design into all our customer actions.....

Site Footer