none
How to Display the Current User’s Profile Properties as a web part in share point 2013 online?

    Question

  • Hi all,

    My requirement is to display the currently log in user properties like Profile picture,First name,Last name etc...  as a web part in share point 2013 online.please help me.

    Thanks,

    venkateswararao.

    Friday, December 23, 2016 9:23 AM

Answers

  • Hi,

    We can get user info from User Information List using JSOM, add the following code into a content 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>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Tuesday, December 27, 2016 6:47 AM
    Moderator

All replies

  • Hi,

    In order to do that you can add a simple script editor web part in your SharePoint page and insert for example the following snippet:

     
    <div id="_summary"></div>
    <script
      src="https://code.jquery.com/jquery-1.12.4.min.js"
      integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
      crossorigin="anonymous"></script>
    <script>
        $.ajax({
            url: _spPageContextInfo.siteAbsoluteUrl + "/_api/sp.userprofiles.peoplemanager/getmyproperties",
            type: "GET",
            headers: { "accept": "application/json;odata=verbose" },
            success: function(data) {
                console.log(data);
                $("#_summary").append("<img src='" + data.d.PictureUrl + "'>");
                $("#_summary").append("<p><span>Name: "+ data.d.DisplayName+"</span></p>");
                $("#_summary").append("<p><span>Name: "+ data.d.Email+"</span></p>");
            },
            error: function(err) {
                console.log(err);
            }
        });
    </script>

    I used the SharePoint Rest API to retrieve the current user info, I tested personally on my SharePoint Online site and works.

    Kind regards,


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.


    Friday, December 23, 2016 2:27 PM
  • Hi Giuliano De Luca,

    Thanks for your information it is useful to me.Name and Email Properties are come for Office 365 Admin fine, but for the users it is coming only name Email is showing Null Here these users are unlicenced users.Profile picture is not showing for the users and Admin.when i want to display extra fields it is showing undefined.is there any possibility to get properties for the users. And Name for the Script Editor webpart Title is also missing.Please help me.

    Thanks,

    venkateswararao.




    Saturday, December 24, 2016 11:55 AM
  • Hi,

    We can get user info from User Information List using JSOM, add the following code into a content 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>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Tuesday, December 27, 2016 6:47 AM
    Moderator
  • Hi Dennis,

    Now it is working fine.Thanks for the information.but i added script editor web part and place the code.





    Tuesday, December 27, 2016 10:10 AM
  • Hi Dennis,

    I want to show some more coutom feilds in webpart can u help please.

    Thanks,

    pavan.

    Tuesday, December 27, 2016 12:12 PM
  • Hi Pavan,

    Script Editor web part also works.

    If you want to get the custom user profile property, we can use this:

    item.get_fieldValues().customPropertyFei;

    "customPropertyFei" is my custom user profile property.

    You can also debug the code using IE F12 developer tools, then watch the variable values.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, December 28, 2016 2:08 AM
    Moderator
  • Hi Dennis,

    Thank you for your reply.

    pavan

    


    
    Wednesday, December 28, 2016 5:12 AM
  • Hi Dennis,

    As iam unable to show the value coustom feild created in userprofile in sharepoint.

    It showing as Undefined.

    I have followed the following process 

    admin->Sharepoint Admin Center ->User Profiles -> Manage User Properties -> New Property -> added new property as favorate food  and  i have given value for that property.

    and i have used the the line of code in edit snipate but iam getting the value as Undefined in browse mode.

    Please help me to get value from coustom property feild.

    Thanks,

    pavan.

    Wednesday, December 28, 2016 12:11 PM
  • Hi Pavan,

    Please check my custom property settings as the screenshot below:

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, December 30, 2016 1:24 AM
    Moderator
  • Hi Dennis,

    Thank you for your reply

    Now it working according to my requirement.

    Thanks,

    Pavan Guntha.

    Wednesday, January 4, 2017 10:39 AM
  • Hi Dennis,

    How can I increase the size of profile image display.

    Thanks,

    pavan.


    • Edited by pavanguntha Friday, January 6, 2017 5:22 AM
    Friday, January 6, 2017 5:21 AM
  • Hi Pavan,

    We can modify the size to S,M,L. Like this:

    /_layouts/15/userphoto.aspx?size=L

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, January 6, 2017 5:29 AM
    Moderator