How to get custom user profile property from SharePoint User Profile Service using JavaScript AJAX client side script
Javascript/Jquery SharePoint 2010 SharePoint 2013Hi There,
You can check some suggested codes here too which worked fine and provide another way to use the same code. I am also posting that samples below.
Sample 1:
[code]SP.SOD.executeOrDelayUntilScriptLoaded(getUserProperties, 'SP.UserProfiles.js');
var userProfileProperties;
function getUserProperties() {
var clientContext = new SP.ClientContext.get_current();
var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
userProfileProperties = peopleManager.getMyProperties();
clientContext.load(userProfileProperties);
clientContext.executeQueryAsync(onRequestSuccess, onRequestFail);
}
function onRequestSuccess() {
var Bild = userProfileProperties.get_userProfileProperties()['PictureURL']
document.getElementById("div").innerHTML = userProfileProperties.get_userProfileProperties()['WorkEmail'];
document.getElementById("div1").innerHTML = userProfileProperties.get_userProfileProperties()['PreferredName'];
document.getElementById("div2").innerHTML = userProfileProperties.get_userProfileProperties()['WorkPhone'];
$("#bild").attr('src', Bild);
}
function onRequestFail(sender, args) { alert( args.get_message());}[/code]
Sample 2:
[code]<script type="text/javascript">
var workEmail = "";
var EmployeeID = "";
var Division = "";
var userDisplayName = "";
var AccountName = "";
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",
headers: { Accept: "application/json;odata=verbose" },
success: function (data) {
try {
//Get properties from user profile Json response
userDisplayName = data.d.DisplayName;
AccountName = data.d.AccountName;
var properties = data.d.UserProfileProperties.results;
for (var i = 0; i < properties.length; i++) {
if (property.Key == "WorkEmail") {
workEmail = property.Value;
}
if (property.Key == "EmployeeID") {
EmployeeID = property.Value;
}
if (property.Key == "Division") {
Division = property.Value;
}
}
$('#AccountName').text(AccountName);
$('#userDisplayName').text(userDisplayName);
$('#EmployeeID').text(EmployeeID);
$('#workEmail').text(workEmail);
$('#Division').text(Division);
} catch (err2) {
//alert(JSON.stringify(err2));
}
},
error: function (jQxhr, errorCode, errorThrown) {
alert(errorThrown);
}
});
</script>
<br />
<h2>
<strong>Employee Details</strong></h2>
<br />
AccountName <span id="AccountName"></span>
DisplayName <span id="userDisplayName"></span>
EmployeeID <span id="EmployeeID"></span>
Email Address <span id="workEmail"></span>
Division <span id="Division"></span></div>[/code]
SharePoint provides a wonderful facility of client side scripts to get data from SharePoint objects. You can get custom user profile property from SharePoint User Profile Service using JavaScript AJAX calls. Below is an example.
I have an AD property with name "Initials" that do not comes in SharePoint OOTB User Profile Service and you have to bind it manually.
I have set its internal name also "Initials" in my User Profile Service while binding it. We'll call this property using the same name. Remember that, you can only call a User Profile Property from its internal name.
I have bonded it with "Initials" attribute of AD and set the Direction to Import. Click Add.
Now the custom property is appearing when i edit any user profile.
Below is my JavaScript code.
[code]//Display User profile properties function getMyUserProfile(success, error) { var siteUrl = _spPageContextInfo.siteAbsoluteUrl; //You can replace this with your site URL too. i.e http://anysite.com $.ajax({ url: siteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties", method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: function (data) { var json = $.parseJSON(JSON.stringify(data.d)); alert("Hello " + json.DisplayName + " Your Job Title Is : " + json.Title + " Profile Picture URL is :"+ json.PictureUrl + " MySite URL is :"+ json.PersonalUrl); for (var i = 0; i < data.d.UserProfileProperties.results.length; i++) { if (data.d.UserProfileProperties.results[i].Key == "Initials") { alert("Your Custom Property Initials is : " + data.d.UserProfileProperties.results[i].Value); } } }, error: error }); } // Usage getMyUserProfile(function (properties) {}, function (data) { console.log(JSON.stringify(data)); }); [/code]
Boom...! It worked for me.You can check some suggested codes here too which worked fine and provide another way to use the same code. I am also posting that samples below.
Sample 1:
[code]SP.SOD.executeOrDelayUntilScriptLoaded(getUserProperties, 'SP.UserProfiles.js');
var userProfileProperties;
function getUserProperties() {
var clientContext = new SP.ClientContext.get_current();
var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
userProfileProperties = peopleManager.getMyProperties();
clientContext.load(userProfileProperties);
clientContext.executeQueryAsync(onRequestSuccess, onRequestFail);
}
function onRequestSuccess() {
var Bild = userProfileProperties.get_userProfileProperties()['PictureURL']
document.getElementById("div").innerHTML = userProfileProperties.get_userProfileProperties()['WorkEmail'];
document.getElementById("div1").innerHTML = userProfileProperties.get_userProfileProperties()['PreferredName'];
document.getElementById("div2").innerHTML = userProfileProperties.get_userProfileProperties()['WorkPhone'];
$("#bild").attr('src', Bild);
}
function onRequestFail(sender, args) { alert( args.get_message());}[/code]
Sample 2:
[code]<script type="text/javascript">
var workEmail = "";
var EmployeeID = "";
var Division = "";
var userDisplayName = "";
var AccountName = "";
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",
headers: { Accept: "application/json;odata=verbose" },
success: function (data) {
try {
//Get properties from user profile Json response
userDisplayName = data.d.DisplayName;
AccountName = data.d.AccountName;
var properties = data.d.UserProfileProperties.results;
for (var i = 0; i < properties.length; i++) {
if (property.Key == "WorkEmail") {
workEmail = property.Value;
}
if (property.Key == "EmployeeID") {
EmployeeID = property.Value;
}
if (property.Key == "Division") {
Division = property.Value;
}
}
$('#AccountName').text(AccountName);
$('#userDisplayName').text(userDisplayName);
$('#EmployeeID').text(EmployeeID);
$('#workEmail').text(workEmail);
$('#Division').text(Division);
} catch (err2) {
//alert(JSON.stringify(err2));
}
},
error: function (jQxhr, errorCode, errorThrown) {
alert(errorThrown);
}
});
</script>
<br />
<h2>
<strong>Employee Details</strong></h2>
<br />
AccountName <span id="AccountName"></span>
DisplayName <span id="userDisplayName"></span>
EmployeeID <span id="EmployeeID"></span>
Email Address <span id="workEmail"></span>
Division <span id="Division"></span></div>[/code]
