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;

score 1 · Accepted Answer · answered Dec 07 '22 at 13:58

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

answered Dec 07 '22 at 13:58

Nikolay

10,752
2
23
51

Thanks @Nikolay for your answer, I was looking for this piece of information (that is not possible with PnP PeoplePicker, but can't get anything), I will try it with GraphApi – jck4real Dec 07 '22 at 14:36
Note PeoplePicker is not using graph API thoguh, but old SharePoint REST API (take a look at the above link, it's using this.context.spHttpClient). There is nothing wrong with graph api as well, just don't forget to grant permissions for it. – Nikolay Dec 07 '22 at 18:55

How to get user department, phoneNumber with PeoplePicker

1 Answers1