jQuery – Fetching the Email address for people picker for SharePoint 2010, 2013 or Office 365

For one of the project we found the challenge of Email of the selected employee to be fetched without any post back.

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.

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);
});

}

}

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s