I am working in SPO (SPFX react js application) and successfully PeoplePicker work, but I am wondering how to get to console.log department and phoneNumber (already can get loginName, id, displayName) MobilePhone in console is undefined.
I don't know under what name I should get them into the console
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
const PersonGroupPicker = ({props, onValueChange}) =>{
const handleChange = (items: any[]) => {
let selectedUsers : any = [];
console.log("itemy->", items);
items.forEach( (item: {id: number, loginName: string, text: string, mobilePhone: number}) =>{
selectedUsers.push({id: item.id, email: (item.loginName).replace("i:0#.f|membership|",""), displayName: item.text, mobilePhone: item.mobilePhone});
});
console.log("items", items, "selected", selectedUsers, "context",props.context);
onValueChange(selectedUsers);
};
return <PeoplePicker
context={props.context}
titleText={props.title}
personSelectionLimit={props.maxPerson}
groupName={props.groupName ? props.groupName : ""} // Leave this blank in case you want to filter from all users
showtooltip={props.tooltip == undefined ? true : props.tooltip}
required={props.required == undefined ? false : props.required}
disabled={props.disabled == undefined ? false : props.disabled}
onChange={handleChange}
showHiddenInUI={props.showHidden == undefined ? true : props.showHidden}
principalTypes={props.principalType ? props.principalType : [PrincipalType.User]}
resolveDelay={props.resolveDelay == undefined ? 1000 : props.resolveDelay}
errorMessage={props.error ? props.error : ""}
placeholder={props.placeholder ? props.placeholder : ""}
tooltipMessage={props.tooltipMessage ? props.tooltipMessage : ""}
defaultSelectedUsers={props.defaultSelectedUsers && props.defaultSelectedUsers.length ? props.defaultSelectedUsers : []}
ensureUser={true}
/>;
};
PersonGroupPicker.propTypes = {
props: PropTypes.shape({
context: PropTypes.any.isRequired,
title: PropTypes.string.isRequired,
maxPerson: PropTypes.number.isRequired,
groupName: PropTypes.string,
tooltip: PropTypes.bool,
required: PropTypes.bool,
disabled: PropTypes.bool,
showHidden: PropTypes.bool,
principalType: PropTypes.arrayOf(PropTypes.number),
resolveDelay: PropTypes.number,
error: PropTypes.string,
placeholder: PropTypes.string,
tooltipMessage: PropTypes.string,
defaultSelectedUsers: PropTypes.arrayOf(PropTypes.string)
}),
onValueChange: PropTypes.func.isRequired
};
export default PersonGroupPicker;
The <PeoplePicker>
control does not query mobilePhone
or department
properties. So, it simply does not have them (i.e. there is no such property that you can get in console). If you want them, you need to get them yourself from the active directory or from a SharePoint user profile, using graph a call or SharePoint REST API call, for example.
You can take a look how it's done by the "spfx controls" library (and see the properties that are requested): https://github.com/pnp/sp-dev-fx-controls-react/blob/450b6643c7aff1300e5d96e6b0042aef11d956b0/src/services/PeopleSearchService.ts#L221-L230