Get SPList Column Values In SPFX Application Customizer Using PnP

In this blog, the method to get a SharePoint lists column values in SPFX application customizer is explained. We will see how we can use PnP in SPFX to get our required values.

In the following code, we will retrieve the value of the default columns. For example - “Title”, “Id” etc. and also the value of some custom columns.

In the following code block, I have retrieved the following column values.

  1. Title
  2. Id
  3. MyCustomFld which is a custom column
  4. MyLookUpFld which is a custom column(Lookup column).

Before you start using the code attached, you have to first install pnp using the below command.

npm install sp-pnp-js –save
 
Get SPList Column Values In SPFX Application Customizer Using PnP

The code block for this is mentioned below.

  1. import {  
  2.     override  
  3. } from '@microsoft/decorators';  
  4. import {  
  5.     Log  
  6. } from '@microsoft/sp-core-library';  
  7. import {  
  8.     BaseApplicationCustomizer  
  9. } from '@microsoft/sp-application-base';  
  10. import {  
  11.     Dialog  
  12. } from '@microsoft/sp-dialog';  
  13. import pnp from 'sp-pnp-js';  
  14. import * as strings from 'HelloWorldApplicationCustomizerStrings';  
  15. const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';  
  16. /** 
  17.  * If your command set uses the ClientSideComponentProperties JSON input, 
  18.  * it will be deserialized into the BaseExtension.properties object. 
  19.  * You can define an interface to describe it. 
  20.  */  
  21. export interface IHelloWorldApplicationCustomizerProperties {  
  22.     // This is an example; replace with your own property  
  23.     testMessage: string;  
  24. }  
  25. /** A Custom Action which can be run during execution of a Client Side Application */  
  26. export default class HelloWorldApplicationCustomizer  
  27. extends BaseApplicationCustomizer < IHelloWorldApplicationCustomizerProperties > {  
  28.     @override  
  29.     public onInit(): Promise < void > {  
  30.         pnp.setup({  
  31.             spfxContext: this.context  
  32.         });  
  33.         //Here "My List" is Sharepoint list title  
  34.         pnp.sp.web.lists.getByTitle("My List").items.select("Title""Id""MyCustomFld""MyLookUpFld/ID").expand("MyLookUpFld").getPaged().then(p => {  
  35.             console.log(JSON.stringify(p.results, null, 4));  
  36.             var itemColl = p.results;  
  37.             for (var index = 0; index < itemColl.length; index++) {  
  38.                 var element = itemColl[index];  
  39.                 var title = element["Title"];  
  40.                 var id = element["Id"];  
  41.                 var customFldValue = element["MyCustomFld"];  
  42.                 var lookUpFld = element["MyLookUpFld"];  
  43.                 var lookUpFldId = lookUpFld["ID"];  
  44.                 console.log("Item with Id: " + id + " and title: " + title + " has MyCustomFld field value: " + customFldValue + " and MyLookUpFld lookup field value: " + lookUpFldId);  
  45.             }  
  46.         });  
  47.         return Promise.resolve();  
  48.     }  
  49. }  

After PnP is installed successfully, use the attached code in your SPFX solution to retrieve the SPList column values.