Sign in
 
Home20132010Other VersionsLibraryForumsGallery

PnP People Picker Control in SPFx Solution

PnP has provided a control that renders as People picker field, which can be used to select one or more users from SharePoint site or group. This control is useful to be used in SPFx web part to get the people information from users.

 
 
 
 
 
5 Star
(1)
158 times
Add to favorites
SharePoint
7/7/2019
E-mail Twitter del.icio.us Digg Facebook
  • Hide
    Hi
    3 Posts | Last post August 09, 2019
    • Written July 16, 2019 
      Thanks for your effort.

I copied out the code and have a taste. However, when i run the following code, it return bad request error, would you please tell me why, thank you.

results: this.state.addUsers
addUsers: number[];  

Error Messages:
core.ts:14 Uncaught (in promise) ProcessHttpClientResponseException: Error making HttpClient request in queryable: [400] Bad Request
    at new ProcessHttpClientResponseException (https://localhost:4321/dist/react-sp-fx-pn-p-web-part.js:23093:28)
    at https://localhost:4321/dist/react-sp-fx-pn-p-web-part.js:23134:24
ProcessHttpClientResponseException @ core.ts:14
(anonymous) @ core.ts:66
Promise.then (async)
ReactSpFxPnP._addSelectedUsers @ ReactSpFxPnP.tsx:41
r @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:200
a @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:200
s @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:200
f @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:200
m @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:200
r @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:200
processEventQueue @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:200
r @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:214
handleTopLevel @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:214
i @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:214
perform @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:200
batchedUpdates @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:214
i @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:200
dispatchEvent @ sp-webpart-workbench-assembly.js?uniqueId=TSm8d:214
    • Written July 16, 2019 
      Hi, 

Please be noted that:

I am using SharePoint 2019 standard editions, please find out the package.JSON

{
  "name": "react-sp-fx-pn-p",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.4.0",
    "@microsoft/sp-lodash-subset": "~1.4.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
    "@microsoft/sp-webpart-base": "~1.4.0",
    "@pnp/spfx-controls-react": "1.13.2",
    "@types/es6-promise": "0.0.33",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@types/webpack-env": "1.13.1",
    "node-pnp-js": "^0.1.3",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  },
  "resolutions": {
    "@types/react": "15.6.6"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2"
  }
}

Thanks for your help.
    • Written August 09, 2019 
      Hi,
I have not yet tried the PnP SPFx Controls on on-premises. I will try and let you know.
Few controls might not work on-premises. Reference: https://sharepoint.github.io/sp-dev-fx-property-controls/