Back in the SOM (Server Object Model) days it was pretty straight forward and well documented how to gather a user’s information from within a SharePoint form, or even go out and get it from SharePoint itself having just a single piece of information like email, login name or even just the user’s first and last name.  While there are techniques to doing this from the client side using CSOM (Client Side Object Model) or REST APIs what if you didn’t need ALL the user’s information and just needed a few important parts of it.  If the form you are working in has a people picker then you are all set.  Today I am going to show you all about getting user data from People Picker with JavaScript.

Data Included in User Object

The data you will be getting back from this call isn’t a full SPUser object or anything that detailed.  You will however be able to gather a great deal of the user’s information including:

  • Department
  • Email
  • MobilePhone
  • Title
  • Display Name
  • Login ID
  • Principal Type
  • Site Collection User ID

This information is contained within the SPClientPeoplePickerEntity object that is returned in the process.  Many fields are reused in the object.  For example, the login ID is stored in the Description field, but it is also in the Key field.  My suggestion is use the EntityData property as it contains all the fields above within it.  Following is how the data is mapped:

EntityData PropertyUser Data
AccountNameLogin ID in SAML format (ie. "i:0#.w|drevdev\\ddrever"
DepartmentDepartment
EmailUser Email
PrincipalTypeType of user object
SIPAddressUser Email
SPUserIDUser's ID within the SharePoint Site Collection
TitleTitle of User (Position)

Getting User Data from People Picker with JavaScript

In order to access the data you perform the following:

  1. First need to access the div the people picker is contained within.
  2. Cast the element as a People Picker entity using a SharePoint provided method
  3. Get all users listed within the People Picker
  4. Access an individual user’s object
  5. Grab data from the EntityData property within.

In the following example, I have written a small function that accesses the div based on the title of the field and returns the email address.  The function is very basic and doesn’t provide any error handling, it’s just showing you the basics of how to access the data.

And that’s it.  If you need different fields, refer back to the table above the code to get the corresponding information you need.  Let me know if you have any questions around this process in the comments below.

 

Thanks for reading!