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 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
.
How do I "convert" the information from the PeoplePicker to the IDs, the People Field in the list is using?
The PeoplePicker retrieves the People as follows:
private searchPeople(terms: string, results: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> {
return new Promise<IPersonaProps[]>((resolve, reject) =>
this.props.spHttpClient.get(`${this.props.siteUrl}/_api/search/query?querytext='*${terms}*'&rowlimit=20&sourceid='b09a7990-05ea-4af9-81ef-edfab16c4e31'`,
SPHttpClient.configurations.v1,
{
headers: {
'Accept': 'application/json;odata=nometadata',
'odata-version': ''
}
})
.then((response: SPHttpClientResponse): Promise<{ PrimaryQueryResult: IPeopleDataResult }> => {
return response.json();
})
.then((response: { PrimaryQueryResult: IPeopleDataResult }): void => {
let relevantResults: any = response.PrimaryQueryResult.RelevantResults;
let resultCount: number = relevantResults.TotalRows;
let people = [];
if (resultCount > 0) {
relevantResults.Table.Rows.forEach( (row) => {
let persona: IPersonaProps = {};
row.Cells.forEach( (cell) => {
if (cell.Key === 'PictureURL')
{
persona.imageUrl = cell.Value;
}
else if (cell.Key === 'PreferredName')
{
persona.primaryText = cell.Value;
persona.imageInitials = cell.Value.charAt(0) + (cell.Value.lastIndexOf(" ") > 0 ? cell.Value.charAt(cell.Value.lastIndexOf(" ") + 1) : "");
}
else if (cell.Key === 'AccountName')
{
persona.itemID = cell.Value; // e.g.: "i:0#.f|membership|bob@somewhere.org.nz"
}
else if (cell.Key === 'UserProfile_GUID')
{
persona.itemID = cell.Value; // e.g.: "ff53b41e-d11a-435c-9cd1-d708e71ee7c7"
}
});
people.push(persona);
});
}
resolve(people);
}, (error: any): void => {
reject(this._peopleList = []);
}));
}
I get the List items as follows:
private _getItems(requester: SPHttpClient): Promise<IInteractionLogItem[]> {
const queryString: string = `?$select=Id,Title,Client/Id,Client/Title,Client/EMail,Client/MobilePhone,` +
`$expand=Client`;
const queryUrl: string = this._listItemsUrl + queryString;
return requester.get(queryUrl, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
})
.then((json: { value: IInteractionLogItem[] }) => {
return json.value.map((interactionLog: IInteractionLogItem) => {
const returnItem: IInteractionLogItem =
{
Id: interactionLog.Id,
Title: interactionLog.Title,
Client: interactionLog.Client,
};
returnItem.CreatedBy.Picture = this._getPictureUrl(returnItem.CreatedBy.EMail);
if( returnItem.Client )
{
returnItem.Client.Picture = this._getPictureUrl(returnItem.Client.EMail);
}
return returnItem;
});
});
}
Any help is much appreciated :-)
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;
}