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.