SPFx + PnP: how do I get web part property values inside the .then() ?

%3CLINGO-SUB%20id%3D%22lingo-sub-94724%22%20slang%3D%22en-US%22%3ESPFx%20%2B%20PnP%3A%20how%20do%20I%20get%20web%20part%20property%20values%20inside%20the%20.then()%20%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-94724%22%20slang%3D%22en-US%22%3E%3CP%3EMy%20web%20part%20needs%20to%3A%3C%2FP%3E%3COL%3E%3CLI%3Echeck%20to%20see%20if%20the%20list%20it%20depends%20on%20exists%20and%20if%20so%3C%2FLI%3E%3CLI%3Equery%20the%20list%20for%20items%20and%3C%2FLI%3E%3CLI%3Edisplay%20the%20items%20returned%2C%20using%20properties%20of%20the%20web%20part%20to%20modify%20the%20display%3C%2FLI%3E%3C%2FOL%3E%3CP%3EShould%20be%20simple.%26nbsp%3B%20When%20I%20put%20a%20break%20point%20on%20the%20first%20line%20of%20code%20inside%20the%20.then()%2C%20I%20can%20see%20that%20the%20list%20items%20are%20being%20returned%2C%20but%20I%20have%20no%20way%20to%20access%20the%20wp%20property%20values%20because%20%22this%22%20is%20now%20undefined.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20531px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F18431i1ACDCD1623F1091C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22faqq-see-if-list-exists.JPG%22%20title%3D%22faqq-see-if-list-exists.JPG%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3ETest%20for%20list%20existence%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20855px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F18432i9A7989117CCD9746%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22faqq-get-list-items.JPG%22%20title%3D%22faqq-get-list-items.JPG%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EGet%20list%20items%20to%20display%2C%20but%20properties%20are%20unavailable%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EHow%20do%20I%20access%20the%20values%20of%20the%20web%20part%20properties%20when%20I%20am%20%3CEM%3Einside%3C%2FEM%3E%20a%20.then()%20call%20so%20I%20can%20use%20those%20values%20to%20modify%20how%20the%20items%20are%20displayed%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20guessing%20this%20is%20something%20simple%2C%20but%20I%20am%20having%20trouble%20figuring%20how%20to%20do%20this.%26nbsp%3B%20Thanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-99708%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20%2B%20PnP%3A%20how%20do%20I%20get%20web%20part%20property%20values%20inside%20the%20.then()%20%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-99708%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F30254%22%20target%3D%22_blank%22%3E%40Sebastian%20Burrell%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20the%20response.%20I%20learned%20about%20this%20late%20last%20week%20from%20a%20MS%20guy%20over%20at%20the%20dev%20docs%20site%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F759%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F759%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20basically%20taken%20them%20to%20task%20for%20this%20silly%20kludge%3B%20if%20you%20define%20the%20properties%20in%20the%20property%20pane%20configuration%20(after%20all%2C%20the%20name%20implies%20you%20are%20configuring%20the%20properties!)%2C%20I%20feel%20strongly%20that%20you%20shouldn't%20have%20to%20do%20it%20again%20in%20the%20manifest.%20%26nbsp%3BWhy%20have%20an%20option%20in%20there%20to%20set%20a%20default%20value%20if%20it%20will%20just%20be%20ignored%3F%20%26nbsp%3BWe%20shouldn't%20have%20to%20define%20the%20same%20thing%20twice.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20to%20your%20questions%3A%3C%2FP%3E%3CP%3E1.%20No%2C%20no%20react%20framework%20in%20this%20project%3C%2FP%3E%3CP%3E2.%20It's%20in%20the%20plain%20ol'%20%3CWEBPARTNAME%3E.ts%3C%2FWEBPARTNAME%3E%3C%2FP%3E%3CP%3E3.%20User's%20putting%20the%20web%20part%20on%20the%20page%20can%20use%20%22questionClass%22%20to%20add%20class%20names%20that%20they%20want%20to%20use%20to%20alter%20the%20way%20the%20data%20is%20displayed.%20%26nbsp%3BIf%20they've%20added%20one%20or%20more%20class%20names%2C%20I%20want%20to%20add%20those%20to%20the%20rendering%20at%20runtime.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20like%20the%20tip%20in%20your%20link%20as%20well.%20%26nbsp%3BThanks%20again.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-98423%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20%2B%20PnP%3A%20how%20do%20I%20get%20web%20part%20property%20values%20inside%20the%20.then()%20%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-98423%22%20slang%3D%22en-US%22%3E%3COL%3E%3CLI%3EAre%20you%20using%20react%3F%3C%2FLI%3E%3CLI%3EIs%20this%20in%20a%20.ts%20file%20or%20a%20.tsx%20component%3F%3C%2FLI%3E%3CLI%3EHow%20are%20you%20setting%20the%20questionClass%20property%20and%20what%20are%20you%20using%20it%20for%3F%3C%2FLI%3E%3C%2FOL%3E%3CP%3EAs%20a%20first%20step%2C%20assuming%20you're%20working%20at%20the%20root%20of%20your%20web%20part%20(webPartNameWebPart.ts)%20your%20properties%20will%20be%20undefined%20by%20default%20when%20you%20load%20the%20web%20part%2C%20you%20should%20set%20default%20values%20for%20your%20property%20pane%20properties%20in%20the%20manifest.json%20for%20the%20web%20part%20see%20an%20example%20of%20manifest.json%26nbsp%3Bbelow%3A%3C%2FP%3E%3CPRE%3E%7B%0A%20%20%22%24schema%22%3A%20%22..%2F..%2F..%2Fnode_modules%2F%40microsoft%2Fsp-module-interfaces%2Flib%2FmanifestSchemas%2FjsonSchemas%2FclientSideComponentManifestSchema.json%22%2C%0A%20%20%22id%22%3A%20%22You'reID%22%2C%0A%20%20%22alias%22%3A%20%22HelloWorldWebPart%22%2C%0A%20%20%22componentType%22%3A%20%22WebPart%22%2C%0A%20%20%22version%22%3A%20%22*%22%2C%0A%20%20%22manifestVersion%22%3A%202%2C%0A%20%20%22requiresCustomScript%22%3A%20false%2C%0A%20%20%22preconfiguredEntries%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22groupId%22%3A%20%22You'reGroupID%22%2C%0A%20%20%20%20%20%20%22group%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22default%22%3A%20%22Under%20Development%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22title%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22default%22%3A%20%22hellow%20World%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22description%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22default%22%3A%20%22This%20is%20the%20defualt%20description%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22officeFabricIconFontName%22%3A%20%22Page%22%2C%0A%2F%2FBelow%20is%20where%20you%20set%20the%20property%20defaults%2C%20you%20need%20to%20have%20one%20for%20each%20of%20the%20properties%20you%20have%20setup.%20If%20you%20have%20an%20array%20that%20isn't%20defined%20here%20(even%20though%20it's%20blank)%20it%20will%20be%20undefined%20at%20runtime%0A%20%20%20%20%20%20%22properties%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22descripton%22%3A%20%22description%20text%22%2C%0A%20%20%20%20%20%20%20%20%22booleanProperty%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%22arrayProperty%22%3A%20%5B%5D%2C%0A%20%20%20%20%20%20%20%20%22numberProperty%22%3A%200%2C%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D%3C%2FPRE%3E%3CP%3EThere%20is%20some%20more%20about%20preconfiguredEntries%26nbsp%3Bhere%3A%26nbsp%3B%3CA%20href%3D%22http%3A%2F%2Fsharepointseb.co.uk%2F2017%2F08%2F17%2Fupdating-preconfiguredentries%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fsharepointseb.co.uk%2F2017%2F08%2F17%2Fupdating-preconfiguredentries%2F%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-96613%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20%2B%20PnP%3A%20how%20do%20I%20get%20web%20part%20property%20values%20inside%20the%20.then()%20%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-96613%22%20slang%3D%22en-US%22%3E%3CP%3E*Bump*%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOut%20sick%20for%20a%20week%20and%20not%20a%20single%20response%3F%20I'm%20honestly%20a%20bit%20surprised.%20%26nbsp%3BI%20know%20that%20%22globals%22%20are%20much%20unloved%20(and%20with%20good%20reason)%2C%20but%20if%20I'm%20building%20a%20web%20part%2C%20it's%20properties%20should%20be%20available%20to%20me%20everywhere%20in%20my%20project.%20They%20don't%20do%20me%20any%20good%20if%20I%20can't%20access%20them.%20%26nbsp%3BThe%20fact%20that%20the%20properties%20we%20define%20and%20populate%20are%20not%20available%20to%20the%20rest%20of%20the%20code%20in%20the%20project%20(i.e.%20like%20a%20public%20global%20object)%20feels%20like%20an%20oversight%20in%20the%20design%20of%20the%20SharePoint%20Framework.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPerfectly%20willing%20to%20eat%20crow%20due%20to%20my%20ignorance%2C%20but%20I%20really%20need%26nbsp%3Bsome%20guidance%20here.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20described%20above%2C%20once%20the%20data%20has%20been%20retrieved%20using%20PnP%2C%20I%20need%20format%20it%20for%20display%20based%20on%20properties%20values%20set%20in%20the%20property%20pane%20by%20the%20end%20user.%20I%20cannot%20do%20that%20if%20the%20values%20contained%20in%20those%20properties%20cannot%20be%20accessed.%20%26nbsp%3BSomeone%20please%20tell%20me%20what%20I%20am%20missing%20here.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

My web part needs to:

  1. check to see if the list it depends on exists and if so
  2. query the list for items and
  3. display the items returned, using properties of the web part to modify the display

Should be simple.  When I put a break point on the first line of code inside the .then(), I can see that the list items are being returned, but I have no way to access the wp property values because "this" is now undefined.

Test for list existenceTest for list existenceGet list items to display, but properties are unavailableGet list items to display, but properties are unavailable

How do I access the values of the web part properties when I am inside a .then() call so I can use those values to modify how the items are displayed?

 

I am guessing this is something simple, but I am having trouble figuring how to do this.  Thanks.

3 Replies
Highlighted

*Bump*

 

Out sick for a week and not a single response? I'm honestly a bit surprised.  I know that "globals" are much unloved (and with good reason), but if I'm building a web part, it's properties should be available to me everywhere in my project. They don't do me any good if I can't access them.  The fact that the properties we define and populate are not available to the rest of the code in the project (i.e. like a public global object) feels like an oversight in the design of the SharePoint Framework.

 

Perfectly willing to eat crow due to my ignorance, but I really need some guidance here.

 

As described above, once the data has been retrieved using PnP, I need format it for display based on properties values set in the property pane by the end user. I cannot do that if the values contained in those properties cannot be accessed.  Someone please tell me what I am missing here.

 

Thanks.

Highlighted
  1. Are you using react?
  2. Is this in a .ts file or a .tsx component?
  3. How are you setting the questionClass property and what are you using it for?

As a first step, assuming you're working at the root of your web part (webPartNameWebPart.ts) your properties will be undefined by default when you load the web part, you should set default values for your property pane properties in the manifest.json for the web part see an example of manifest.json below:

{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
  "id": "You'reID",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",
  "version": "*",
  "manifestVersion": 2,
  "requiresCustomScript": false,
  "preconfiguredEntries": [
    {
      "groupId": "You'reGroupID",
      "group": {
        "default": "Under Development"
      },
      "title": {
        "default": "hellow World"
      },
      "description": {
        "default": "This is the defualt description"
      },
      "officeFabricIconFontName": "Page",
//Below is where you set the property defaults, you need to have one for each of the properties you have setup. If you have an array that isn't defined here (even though it's blank) it will be undefined at runtime
      "properties": {
        "descripton": "description text",
        "booleanProperty": true,
        "arrayProperty": [],
        "numberProperty": 0,
      }
    }
  ]
}

There is some more about preconfiguredEntries here: http://sharepointseb.co.uk/2017/08/17/updating-preconfiguredentries/

Highlighted

@Sebastian Burrell,

 

Thanks for the response. I learned about this late last week from a MS guy over at the dev docs site: https://github.com/SharePoint/sp-dev-docs/issues/759 

 

I've basically taken them to task for this silly kludge; if you define the properties in the property pane configuration (after all, the name implies you are configuring the properties!), I feel strongly that you shouldn't have to do it again in the manifest.  Why have an option in there to set a default value if it will just be ignored?  We shouldn't have to define the same thing twice.

 

As to your questions:

1. No, no react framework in this project

2. It's in the plain ol' <webpartname>.ts

3. User's putting the web part on the page can use "questionClass" to add class names that they want to use to alter the way the data is displayed.  If they've added one or more class names, I want to add those to the rendering at runtime.

 

I like the tip in your link as well.  Thanks again.