1

I'm trying to take advantage of the people picker search helper in the PnP-JS-Core, but I get a JSON error in SP2013, 2016 and SharePoint Online. The error is the same everywhere. If I try to get data from the same endpoint without PnP using fetch it works fine. Does anyone know how to do the same using PnP?

app.ts

import { sp } from '@pnp/sp';
import { setupPnp } from './utils/odata';
import * as toastr from "toastr";
import './app';

setupPnp();

sp.profiles.clientPeoplePickerSearchUser({
  AllowEmailAddresses: true,
  AllowMultipleEntities: false,
  AllUrlZones: false,
  MaximumEntitySuggestions: 50,
  PrincipalSource: 15,
  PrincipalType: 15,
  QueryString: 'Denis'

}).then(function (entries) {
  console.log(entries);
})

odata.ts

import { sp } from '@pnp/sp';

// User 'application/json;odata=verbose' for compatibility with SP2013
export const ODataMode = 'application/json;odata=verbose';
// export const ODataMode = 'application/json;odata=minimalmetadata';

export const setupPnp = () => {
  sp.setup({
    sp: {
      headers: {
        Accept: ODataMode,
        'Content-Type': `application/json; odata=verbose`,
        'X-RequestDigest': document.getElementById('__REQUESTDIGEST').value
      }
    }
  });
};

Error

Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () at q.postCore.then (sp.js:7282)

enter image description here

Working example with fetch, without using PnP

Example below returns values with no problems:

let searchString = 'zergoos';
let endpointUrl = `${_spPageContextInfo.webServerRelativeUrl}/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser`.replace(/\/\//g, '/');

fetch(endpointUrl, {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
        'Accept': `application/json; odata=verbose`,
        'Content-Type': `application/json; odata=verbose`,
        'X-RequestDigest': document.getElementById('__REQUESTDIGEST').value
    },
    body: JSON.stringify({
        queryParams: {
            __metadata: {
                type: 'SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters'
            },
            AllowEmailAddresses: true,
            AllowMultipleEntities: false,
            AllUrlZones: false,
            MaximumEntitySuggestions: 50,
            PrincipalSource: 15,
            PrincipalType: 15,
            QueryString: searchString
        }
    })
})
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });
  • in you odata.ts, can you use export const setupPnp = () => { sp.setup({ sp: { headers: { Accept: ODataMode, } } }); }; and check ? Have removed the content type and request digest headers. These, i believe are not needed, the framework would handle them. – Gautam Sheth Apr 22 '18 at 14:46
  • Yes, added these out of desperation. With or without them it's the same error. – Denis Molodtsov Apr 22 '18 at 14:59
  • ok, looks like a bug, can you check with export const setupPnp = () => { sp.setup({ sp: { headers: { Accept: "application/json;odata=nometadata", } } }); }; ? It works in sharepoint online – Gautam Sheth Apr 22 '18 at 15:04
  • I've just tried it. Exact same error. I'm going to try to upgrade the pnp packages. Let's see if it helps. – Denis Molodtsov Apr 22 '18 at 15:27
  • I've upgraded @pnp/common, @pnp/odata and @pnp/sp npm packages. And now it's working fine. I wish did it earlier. Thank you for you suggestions – Denis Molodtsov Apr 22 '18 at 15:39
1

Looks like a bug with @pnp/sp while using the verbose mode.

However, while using the nometadata or minimalmetadata mode, its works fine.

Have created a minimal noscript SPFx webpart. Using @pnp/sp version 1.0.4.

Minimal code:

import { sp } from '@pnp/sp';

export default class testWebPart extends BaseClientSideWebPart<ItestWebPartProps> {

  protected onInit(): Promise<void> {
    return new Promise<void>((resolve: () => void, reject: (error?: any) => void): void => {
      sp.setup({
        sp: {
          headers: {
            //"Accept": "application/json; odata=nometadata"
            "Accept": "application/json; odata=minimalmetadata"
          }
        }
      });
      resolve();
    });
  }

  public render(): void {
    this.testClientPicker();
  }

  private testClientPicker(): void {
    sp.profiles.clientPeoplePickerSearchUser({
      AllowEmailAddresses: true,
      AllowMultipleEntities: false,
      AllUrlZones: false,
      MaximumEntitySuggestions: 50,
      PrincipalSource: 15,
      PrincipalType: 15,
      QueryString: 'Denis'

    }).then(function (entries) {
      console.log(entries);
    })
  }

  //standard code for property pane

}
  • Cheers, happy to help :) , feel free to open an issue here, will try to fix it or somebody from the community can pick it up – Gautam Sheth Apr 22 '18 at 15:48
  • 1
    created an issue: github.com/pnp/pnpjs/issues/78 – Denis Molodtsov Apr 22 '18 at 16:18
  • Looks like the issue has been fixed. Do update to the 1.0.5 release which will happen around next Friday. – Gautam Sheth Apr 23 '18 at 4:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.