{"id":991,"date":"2019-04-09T06:19:23","date_gmt":"2019-04-09T06:19:23","guid":{"rendered":"http:\/\/blog.softreeconsulting.com\/?p=991"},"modified":"2019-04-09T06:19:23","modified_gmt":"2019-04-09T06:19:23","slug":"get-splist-column-values-in-spfx-application-customizer-using-pnp","status":"publish","type":"post","link":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/","title":{"rendered":"Get SPList column values in SPFX application customizer using PnP."},"content":{"rendered":"\n

In this blog the method to get a SharePoint lists column\nvalues in SPFX application customizer is explained elaborately. We will see how\nwe can use pnp in SPFX to get our required values.<\/p>\n\n\n\n

In the following code we will retrieve the value of the\ndefault columns for example \u201cTitle\u201d, \u201cId\u201d etc. also value of some custom\ncolumns.<\/p>\n\n\n\n

In the following code block I have retrieved following\ncolumn values:<\/p>\n\n\n\n

  1. Title<\/li>
  2. Id<\/li>
  3. MyCustomFld which is a custom column<\/li>
  4. MyLookUpFld which is a custom column(Lookup\ncolumn).<\/li><\/ol>\n\n\n\n

    Befor 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

    \"\"<\/figure><\/div>\n\n\n\n

    The code block for this is mentioned below:<\/u><\/strong><\/p>\n\n\n\n

    import { override } from '@microsoft\/decorators';\nimport { Log } from '@microsoft\/sp-core-library';\nimport {\n  BaseApplicationCustomizer\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\n  testMessage: string;\n}\n\n\/** A Custom Action which can be run during execution of a Client Side Application *\/\nexport default class HelloWorldApplicationCustomizer\n  extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {\n\n    @override\n    public onInit(): Promise<void> {\n      pnp.setup({\n        spfxContext: this.context\n      });\n  \n      \/\/Here \"My List\" is Sharepoint list title\n      pnp.sp.web.lists.getByTitle(\"My List\").items.select(\"Title\", \"Id\", \"MyCustomFld\", \"MyLookUpFld\/ID\").expand(\"MyLookUpFld\").getPaged().then(p => {\n                  \n            console.log(JSON.stringify(p.results, null, 4));\n            var itemColl = p.results;\n            for (var index = 0; index < itemColl.length; index++) {\n              var element = itemColl[index];\n              var title = element[\"Title\"];\n              var id = element[\"Id\"];\n              var customFldValue = element[\"MyCustomFld\"];\n              var lookUpFld = element[\"MyLookUpFld\"];\n              var lookUpFldId = lookUpFld[\"ID\"];\n              console.log(\"Item with Id: \" + id + \" and title: \" + title + \" has MyCustomFld field value: \" + customFldValue + \" and MyLookUpFld lookup field value: \" + lookUpFldId);\n            }\n      });\n  \n      return Promise.resolve();\n    }\n}\n<\/code><\/pre>\n\n\n\n
    After PnP is installed successfully use the attached code in your SPFx solution<\/a> to retrieve SPList column values.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In this blog the method to get a SharePoint lists column values in SPFX application customizer is explained elaborately. 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 \u201cTitle\u201d, \u201cId\u201d etc. also value of some custom columns. In the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[237,238],"class_list":["post-991","post","type-post","status-publish","format-standard","hentry","category-sharepoint","tag-get-sharepoint-list-column-values-using-pnp","tag-sharepoint-list-column-operation-in-spfx-application-customizer"],"yoast_head":"\nGet SPList column values in SPFX application customizer using PnP. - Softree Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Get SPList column values in SPFX application customizer using PnP. - Softree Technology\" \/>\n<meta property=\"og:description\" content=\"In this blog the method to get a SharePoint lists column values in SPFX application customizer is explained elaborately. 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 \u201cTitle\u201d, \u201cId\u201d etc. also value of some custom columns. In the […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/\" \/>\n<meta property=\"og:site_name\" content=\"Softree Technology\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-09T06:19:23+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Get SPList column values in SPFX application customizer using PnP. - Softree Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/","og_locale":"en_US","og_type":"article","og_title":"Get SPList column values in SPFX application customizer using PnP. - Softree Technology","og_description":"In this blog the method to get a SharePoint lists column values in SPFX application customizer is explained elaborately. 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 \u201cTitle\u201d, \u201cId\u201d etc. also value of some custom columns. In the […]","og_url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/","og_site_name":"Softree Technology","article_published_time":"2019-04-09T06:19:23+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/#article","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/"},"author":{"name":"admin","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b"},"headline":"Get SPList column values in SPFX application customizer using PnP.","datePublished":"2019-04-09T06:19:23+00:00","mainEntityOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/"},"wordCount":141,"commentCount":0,"publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/#primaryimage"},"thumbnailUrl":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2019\/08\/PnP.png","keywords":["Get SharePoint list column values using PnP","Sharepoint list column operation in SPFX application customizer"],"articleSection":["SharePoint"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/","url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/","name":"Get SPList column values in SPFX application customizer using PnP. - Softree Technology","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/#primaryimage"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/#primaryimage"},"thumbnailUrl":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2019\/08\/PnP.png","datePublished":"2019-04-09T06:19:23+00:00","breadcrumb":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/#primaryimage","url":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2019\/08\/PnP.png","contentUrl":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2019\/08\/PnP.png"},{"@type":"BreadcrumbList","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/get-splist-column-values-in-spfx-application-customizer-using-pnp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softreetechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Get SPList column values in SPFX application customizer using PnP."}]},{"@type":"WebSite","@id":"https:\/\/softreetechnology.com\/blog\/#website","url":"https:\/\/softreetechnology.com\/blog\/","name":"Softree Technology","description":"Celebrating 10+ Years in SharePoint Consulting !","publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softreetechnology.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/softreetechnology.com\/blog\/#organization","name":"Softree Technology","url":"https:\/\/softreetechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","contentUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","width":844,"height":230,"caption":"Softree Technology"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/softreeconsulting.com"],"url":"https:\/\/softreetechnology.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=991"}],"version-history":[{"count":0,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/991\/revisions"}],"wp:attachment":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}