SPFx how to set a people field in a list, e.g. “convert” AccountName to Lookup ID?

Question

I am trying to build an SPFx WebPart with React Office UI Fabric. I have a SharePoint list with a People field called AssignedTo. The lookup ID values are like 12, 20, and so on. When I select a person with the PeoplePicker, I get AccountName like i:0#.f|membership|bob@somewhere.org.nz and a GUID like ff53b41e-d11a-435c-9cd1-d708e71ee7c7.

I think the lookup IDs like 12 refer to the UserInfo list. I have seen calls to web.EnsureUser, in other SharePoint projects, but the Web object (this.context.pageContext.web) in SPFx doesn't seem to have those methods.

All the People we try to use are Office 365 users. How do I "convert" the information from the PeoplePicker to the lookup IDs, the People column in the list is using?

Any help is much appreciated :-)

Answer 1

A call to api/web/ensureuser using the SPHttpClient is needed. It ensures the requested user is loaded into the SharePoint site userinfo. Using the given AccountName like i:0#.f|membership|bob@somewhere.org.nz from the search as parameter. The returned SPUser contains the Id field for the Lookup column. I implemented the following method:

public EnsureUser(userName: string): Promise<ISPUser> {
  console.log("SharePointDataProvider.EnsureUser( \"" + userName + "\" )");
  var data = {logonName: userName};

  return this._webPartContext.spHttpClient.post(
    this._ensureUserUrl, 
    SPHttpClient.configurations.v1,
    { body: JSON.stringify(data) } ).then(
      (value: SPHttpClientResponse) => {
        console.log("SharePointDataProvider.EnsureUser FullFill: statusText:\"" + value.statusText + "\"" );
        return value.json();
      },
      (error: any) => console.log("SharePointDataProvider.EnsureUser Rejected: " + error )
    ).then((json: ISPUser) => {
        console.log("SharePointDataProvider.EnsureUser FullFill: Id:" + json.Id +" LoginName:\"" + json.LoginName + "\"" );
      return json;
  });
}

My mini ISPUser interface:

interface ISPUser
{
    Email: string;
    Id: number;
    LoginName: string;
    Title: string;
}