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
  • Hi
    3 Posts | Last post August 09, 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
    • 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.
    • 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/