Autopopulate form fields based on selection in people picker column using JavaScript

Question

I have a custom list where user fills out profiles of others. There is a People picker column for "Name of employee" and when the user selects the person(people picker) in the form, other details such as employee mail id, work phone etc need to be auto populated in form. I have achieved it for the current user who has logged in using JS and SP services but couldn't replicate it for populating form based on selection in people picker column.

Any help is greatly appreciated.

PS: I intend to use only JavaScript, Jquery as I have no option to use infopath.

Thanks in advance!

Answer 1

Firstly you will have to get the login name of the person from the people picker. You can use SPServices.SPFindPeoplePicker function for that. After getting the loginID of the employee entered in people picker you can use GetUserProfileByName operation of sp services to get user profile data for that employee.

You can use the below code to get started. Make sure to call this code on change event of the people picker textbox.

function GetEmployeeDetails(){
var personField = "Employee Name";  // this must match the display name of the people picker field
var employee; 
var employeeEmail;
var employeeLoginID; 

// Get people picker value
employee = $().SPServices.SPFindPeoplePicker({ 
    peoplePickerDisplayName: personField,
    checkNames: true
});
employee.checkNames.click();
// get the users login id and email from the SPFindPeoplePicker dictionary
employeeEmail = employee.dictionaryEntries[0].Email;
employeeLoginID = employee.dictionaryEntries[0].AccountName;

// Get user information
$().SPServices({
    operation: "GetUserProfileByName",
    async: false,
    AccountName: employeeLoginID,
    completefunc: function (xData, Status) {
        workPhone = getUserProfileValue(xData.responseXML, "WorkPhone");// here xData.responseXML will contain all user profile values.
    }
});
}
// gets the value of the passed  profile field
function getUserProfileValue(UPSResponseXML, upsField) {
var thisValue = $(UPSResponseXML).SPFilterNode("PropertyData").filter(function() {
    return $(this).find("Name").text() == upsField;
}).find("Values").text();
return thisValue;
}

Answer 2

Just FYI, with my SharepointPlus library and the plugin PeopleAhead you can do something quite nice (see how it looks like in checking the PeopleAhead repository) and easy to use.

First create a free text field where the user will have to type part of the name. Let's say this field has the id "people-picker". Then the code will be :

$SP().plugin('peopleahead',{
  selector:'#people-picker',
  onselect:function() {
    var $this=$(this);
    // use the $this.data('name') for the employee name
    // use $this.data('email') for the email
    // available info: "userid", "email", "name", "login" and "title"
    // let's say you want also to get the WorkPhone so you'll do:
    $SP().people($this.data("login"), function(p) {
      alert("The WorkPhone for "+$this.data("name")+" is "+p["WorkPhone"])
    })
  }
});