2

can we get the user profile details in web part using JSOM

I am looking for a profile web part to show this info

  • user profile image
  • user email
  • user job title
  • user extension

any help would be appreciated

thanks

3

Try to call getUserProfile from sp.js script

Add this script in script editor web part

<script type="text/ecmascript">
ExecuteOrDelayUntilScriptLoaded(getUserProfile, "sp.js");
function getUserProfile(){
    var userID= _spPageContextInfo.userId;
    var clientContext = new SP.ClientContext.get_current();
    var web = clientContext.get_web();
    var userInfoList = web.get_siteUserInfoList();
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + userID + "</Value></Eq></Where></Query><RowLimit>1</RowLimit></View>");
    this.collListItem = userInfoList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args){
    var item = collListItem.itemAt(0);   
    var userName =  item.get_fieldValues().UserName;
    var displayName= item.get_fieldValues().Title;
    var email= item.get_fieldValues().EMail;
    var html="";
    if(userName!=null){
        html+="<img src='/_layouts/15/userphoto.aspx?size=S&username=" + userName + "'/>";      
    }
    if(displayName!=null){
        html+="<p><span>Name:"+ displayName+"</span></p>";      
    } 
    if(email!=null){
        html+="<p><span>Email: "+ email+"</span></p>";       
    }   
    var profileDiv = document.getElementById("CurrentUserProfile");
    profileDiv.innerHTML = html;     
}
function onQueryFailed(sender, args) {
    //alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<div id="CurrentUserProfile">   
<div>

Script Ref


To get User Profile Pic

var obj = item.get_fieldValues().Picture;

To Get email

var obj = item.get_fieldValues().Email;

To get the job title

var obj = item.get_fieldValues().JobTitle;

To get Phone

var obj = item.get_fieldValues().MobilePhone;

var obj = item.get_fieldValues().WorkPhone;

Check other properties at How to get User Information using Javascript client object model or ECMA in SharePoint


Also check

2

We can easy achieve it using User Profile REST API and jQuery Ajax, add the code below into script editor web part in site page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",
        headers: { Accept: "application/json;odata=verbose" },
        success: function (data) {
            var html="<p><img src='"+_spPageContextInfo.webAbsoluteUrl+"/_layouts/15/userphoto.aspx?size=S&url="+data.d.PictureUrl+"&accountname=" + data.d.AccountName + "'/></p>";             
            html+="<p>UserName:"+data.d.DisplayName+"</p>";
            html+="<p>Email:"+data.d.Email+"</p>";
            $.each(data.d.UserProfileProperties.results,function(i,property){
                if(property.Key=="SPS-JobTitle"){
                    html+="<p>Job Title:"+property.Value+"</p>";
                }
            });
            $("#MyUserProfiles").html(html);
        },
        error: function (jQxhr, errorCode, errorThrown) {
            alert(errorThrown);
        }
    }); 
});
</script>
<div id="MyUserProfiles"/>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.