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 in-depth. We will see how we can use PnP in SPFX to perform all these ListView operations.

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

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

How To Add, Update And Delete SharePoint List View Using Pnp In SPFX Application-Customizer 

The code block for this is mentioned below.

  1. import { override } from '@microsoft/decorators';  
  2. import { Log } from '@microsoft/sp-core-library';  
  3. import {BaseApplicationCustomizer} from '@microsoft/sp-application-base';  
  4. import { Dialog } from '@microsoft/sp-dialog';  
  5. import pnp from 'sp-pnp-js';  
  6. import * as strings from 'HelloWorldApplicationCustomizerStrings';  
  7. const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';  
  8. /** 
  9. * If your command set uses the ClientSideComponentProperties JSON input, 
  10. * it will be deserialized into the BaseExtension.properties object. 
  11. * You can define an interface to describe it. 
  12. */  
  13. export interface IHelloWorldApplicationCustomizerProperties {  
  14.     // This is an example; replace with your own property  
  15.     testMessage: string;  
  16. }  
  17. /** A Custom Action which can be run during execution of a Client Side Application */  
  18. export default class HelloWorldApplicationCustomizer  
  19. extends BaseApplicationCustomizer < IHelloWorldApplicationCustomizerProperties > {  
  20.     @override  
  21.     public onInit(): Promise < void > {  
  22.         pnp.setup({  
  23.             spfxContext: this.context  
  24.         });  
  25.         //The following method is to add a new view in list with specific properties  
  26.         //and also you can add those fields you want to include in this new list view.  
  27.         pnp.sp.web.lists.getByTitle("MyList").views.add("MyCustomView"false, {  
  28.             RowLimit: 10,  
  29.             DefaultView: true,  
  30.             ViewQuery: " < OrderBy > < FieldRef Name = 'Modified'  
  31.             Ascending = 'False' / > < /OrderBy>",  
  32.         }).then((v: ViewAddResult) => {  
  33.             v.view.fields.removeAll().then(_ => {  
  34.                 Promise.all([  
  35.                     v.view.fields.add("Title"),  
  36.                     v.view.fields.add("Id"),  
  37.                     v.view.fields.add("Modified"),  
  38.                 ]).then(_ => {  
  39.                     console.log("Custom listview created.");  
  40.                 });  
  41.             });  
  42.         });  
  43.         //This following method will update the properties in your list view  
  44.         pnp.sp.web.lists.getByTitle("MyList").views.getByTitle("MyCustomView").update({  
  45.             RowLimit: 20,  
  46.         }).then((v: ViewUpdateResult) => {  
  47.             console.log("Custom listview updated successfully.");  
  48.         });  
  49.         //The following method will delete the list view  
  50.         pnp.sp.web.lists.getByTitle("MyList").views.getByTitle("MyCustomView").delete().then(_ => {  
  51.             console.log("Custom listview deleted.");  
  52.         });  
  53.         return Promise.resolve();  
  54.     }  
  55. }  

After PnP is installed successfully, use the attached code in your SPFx solution to go through all SP ListView operations.