Fetching the Email address for people picker for SharePoint 2010, 2013 by using jQuery

  • Article

Issue

 For one of the project we had challenge to fetch email id of people picker selected employee without any post back.

Resolution

On analysis of many approaches, we have adopted the below approach of creating a promise object and making an ajax call RestFull API GET call to fetch the properties from UserInformationList dynamically and displaying the email to the respective textbox as required.

JavaScript ​Promise Object REST ajax function

Below is the code to add to hearder section of the HTML by adding the script tag,

Prior to the same steps add the reference of jquery-21.4.min.js.

/// <reference path=”../Scripts/jquery-2.1.4.min.js” />

function LoadEmail() {
var objPPL = $(“#ctl00_PlaceHolderMain_peopleEditor_upLevelDiv”);
var sText = $(‘div.ms-inputuserfield’).text();
sText = sText.replace(‘;’,”).trim();

if (sText.trim() !== ”) {
var urlService = “/EmployeeResources/_vti_bin/ListData.svc/UserInformationList?$filter=Name eq%27”;
urlService = urlService + sText.trim();
urlService = urlService + “%27&$select=Email,Name,Id”;

//Create the Promise object – it may return success or fail object by differer
var promise = $.ajax(
{
url: urlService,
type: “GET”,
dataType: “json”
}
);

// In case of success of promise object below code will executed
promise.done(function (resp) {
$(“#ctl00_PlaceHolderMain_txtEmail”).val(resp.d.results[0].Email);
});

// In case of Failure of promise object below code will executed
promise.error(function (err) {
alert(“Fail Promise”);
alert(“Error:” + err.status);
});
}
}

Calling Method

Add below code snippet to your people picker control as attribute to make call on lost focus,

onfocusOut=”return LoadEmail();”

This code can be modified to display multiple properties like Location, Phone number, Mobile number etc  from UserInformationList.

Hope this article is useful.