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.