How to get user department, phoneNumber with PeoplePicker

Question

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;

Answer 1

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