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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Before you start using the code attached you have to first install PnP using the command \u201cnpm install sp-pnp-js \u2013save\u201d.<\/p>\n\n\n\n
The code block for this is mentioned below.<\/strong><\/p>\n\n\n\n After PnP is installed successfully use the attached code in your SPFX solution to go through all SPList view operations…<\/p>\n\n\n\nimport { override } from '@microsoft\/decorators';\nimport { Log } from '@microsoft\/sp-core-library';\nimport {\nBaseApplicationCustomizer\n} from '@microsoft\/sp-application-base';\nimport { Dialog } from '@microsoft\/sp-dialog';\nimport pnp from 'sp-pnp-js';\n\nimport * as strings from 'HelloWorldApplicationCustomizerStrings';\n\nconst LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';\n\n\/**\n* If your command set uses the ClientSideComponentProperties JSON input,\n* it will be deserialized into the BaseExtension.properties object.\n* You can define an interface to describe it.\n*\/\nexport interface IHelloWorldApplicationCustomizerProperties {\n\/\/ This is an example; replace with your own property\ntestMessage: string;\n}\n\n\/** A Custom Action which can be run during execution of a Client Side Application *\/\nexport default class HelloWorldApplicationCustomizer\nextends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {\n\n@override\npublic onInit(): Promise<void> {\npnp.setup({\nspfxContext: this.context\n});\n\n\/\/The following method is to add a new view in list with specific properties\n\/\/and also you can add those fields you want to include in this new list view.\npnp.sp.web.lists.getByTitle("MyList").views.add("MyCustomView", false, {\n\nRowLimit: 10,\nDefaultView: true,\nViewQuery: "<OrderBy><FieldRef Name='Modified' Ascending='False' \/><\/OrderBy>",\n}).then((v: ViewAddResult) => {\n\nv.view.fields.removeAll().then(_ => {\n\nPromise.all([\nv.view.fields.add("Title"),\nv.view.fields.add("Id"),\nv.view.fields.add("Modified"),\n]).then(_ =>{\n\nconsole.log("Custom listview created.");\n});\n});\n});\n\n\/\/This following method will update the properties in your list view\npnp.sp.web.lists.getByTitle("MyList").views.getByTitle("MyCustomView").update({\nRowLimit: 20,\n}).then((v: ViewUpdateResult) => {\n\nconsole.log("Custom listview updated successfully.");\n});\n\n\/\/The following method will delete the list view\npnp.sp.web.lists.getByTitle("MyList").views.getByTitle("MyCustomView").delete().then(_ => {\n\nconsole.log("Custom listview deleted.");\n});\n\nreturn Promise.resolve();\n}\n}<\/code><\/pre>\n\n\n\n