Click here to Skip to main content
15,868,086 members
Articles / Web Development / ASP.NET

Create User Control to display User Profile Picture in SharePoint 2013 Site

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
3 Aug 2016CPOL4 min read 15.9K   90   4   1
Let’s discuss about how to display logged in user profile picture in SharePoint Site

Introduction

In this article, we are going to discuss about how to display user profile picture in the header section of home page in SharePoint 2013 site as well as how to get other user profile information such as name, designation, department etc from user profile service application using C# code.

Overview

We are going to display “No image found” image in case the user profile picture doesn’t present in the active directory, Also you could add the image which you want to display for no image found.

 Image 1
Senthil Gopal

If the user profile picture present in the active directory, the image will be displayed as shown below in the header section of home page. You could modified style of the image by writing custom css file.

Image 2

Follow the Below Couple of Steps to Achieve the design,

  1. Configure User Profile Service Application in Central Admin
  2. Create a Custom Web Part to Display User Profile Picture

Configure User Profile Service Application

This service application synchronize the user information from Active directory to SharePoint site. It will store user profile information in the user profile service application database. Many of them may know the steps to configure user profile service application. If you don’t know, please follow the below steps to configure the service application,

  1. Navigate to Central Admin->Application Management->Manage Service ApplicationImage 3
  2. Click New->User Profile Service Application from ribbon menuImage 4
  3. In the Create New User Profile Service Application page, Type name of service application and Select existing application pool to run this service application or create a new one. “The selected security account for this service application must have permission to access active directory service”.

  4. Type profile data base server and data base name where you want to store the user information. In the database authentication section provide the user name and password who has access for existing database server. Similarly provide database details for synchronization database and social tagging database. Finally press “Create” button.Image 5

  5. Once the Profile Service Application Is Created, Open the User Profile Service ApplicationImage 6

  6. Click Configure Synchronization Connection under Synchronization group to set up connection string for fetching data from active directory , LDAP Directory and business connectivity. If not created already.Image 7

  7. Fill the configuration details,Image 8

  8. Then click on populate container button and select the user check box Image 9

  9. Finally Press “Ok”.

Manager user profile properties

In this page, we can map active directory properties to SharePoint properties,Image 10

Configure Synchronization Timer Job

In this section, we can configure synchronization time job schedule. Select the Configure Synchronization Timer Job

Image 11

 

Provide Configuration details for the timer job

Image 12

 

For first time, click Start Profile Synchronization to immediately run the timer job.  Next time the job will be run based on the job scheduled interval.

Image 13

 

Once the timer job is completed, see the profile count which was imported from active directory,

Image 14

Create a User Control to display user profile picture

  1. Open Visual Studio and create a new Empty project, give proper name “User Profile Picture”Image 15
  2. Deploy the solution as Farm solution as the code should be executed in server side to retrieve profile information from UPS application.Image 16

  3. Once the project is created, add a new item and select “User control” then press “Ok”                     “Why we choose user control project is we may need this control for more project and it is going to present in the master page as a delegate control” Image 17

  4. After created the control, the solution explore looks like belowImage 18

Form Code - Usercontrol1.ascx

 This section going to render in the master page

<div class="username">
     <asp:Literal  ID="ltUserName" runat="server"></asp:Literal>
</div>

Code behind -  Usercontrol1.ascx.cs

To exposure UserProfileManager class for getting user profile properties, we need to add the following assembly,

  1. Microsoft.Office.Server
  2. Microsoft.Office.Server.UserProfiles

In the code behind, get the user profile picture url and render it as html

<div class="username">
    <div style="text-align: center">
        <img style="border-radius: 50%; width: 50px;" src="http/server/my/User Photos/Profile Pictures/sgopal_MThumb.jpg"></div>
    <div style="text-align: center">Senthil Gopal</div>
</div>

getUserProfilePictureUrl()

We need to display the user profile picture for all the user since the user doesn’t have permission for UPA application. So we used RunWithElevatedPrivileges method to execute the code using administrative privilege to read the user profile properties.

private string getUserProfilePictureUrl(SPUser currentUser)
        {
            string pictureURL = string.Empty;
            SPSecurity.RunWithElevatedPrivileges(delegate() {
            using (SPSite mySitesCollection = new SPSite(SPContext.Current.Site.Url))
            {
                using (SPWeb myweb = mySitesCollection.OpenWeb())
                {
                    string currentUserlogin = currentUser.LoginName;
                    //Get the user profile manager
                    SPServiceContext context = SPServiceContext.GetContext(mySitesCollection);
                    UserProfileManager profileManager = new UserProfileManager(context);
                    UserProfile currentProfile = profileManager.GetUserProfile(currentUserlogin);
                    //PicutreURL - property name
                    ProfileValueCollectionBase profileValueCollection = currentProfile.GetProfileValueCollection("PictureURL");
                    //Only display something if the user has set their picture.
                    if ((profileValueCollection != null) && (profileValueCollection.Value != null))
                    {
                        //There is a picture so display it
                        pictureURL = profileValueCollection.Value.ToString();
                    }
                    else
                    {
                        //no image found url
                        pictureURL = "/Style library/AH/Images/user.png";
                    }
                }
            }
            });
            return pictureURL;
        }

Also you could see the available properties name by debugging the code Image 19

Create deletegate control

By using this delegate control, we can call the usercontrol1.ascx page

  1. Add new item and select empty element, give propery name “UserProfilePic”Image 20
  2. Open Element.xml and paste below code
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="<a href="http://schemas.microsoft.com/sharepoint/">http://schemas.microsoft.com/sharepoint/</a>">
  <Control Id="UserProfilePic" Sequence="11" ControlSrc="~/_controltemplates/15/UserProfilePicture/UserControl1.ascx" xmlns="<a href="http://schemas.microsoft.com/sharepoint/">http://schemas.microsoft.com/sharepoint/</a>" />
</Elements><span style="display: none;"</span><span style="display: none;"</span>

   3. Change the scope of element.xml feature as site level

Image 21

By using the below tage we can place this control in the master page where we want to display the profile picture photo

<!--SPM:<SharePoint:DelegateControl runat="server" ControlId="UserProfilePic "/>-->

 

History

3rd Aug 2016  - initial version created.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
India India
I am Senthil Gopal, a SharePoint Lead based out of Chennai, India.
I have around 9+ years of experience in Microsoft technologies such as C#,Asp.net, SharePoint 2010 and 2013.
This is a Social Group

4 members

Comments and Discussions

 
QuestionVote 5 Pin
EhabAhmed23-Aug-19 4:23
EhabAhmed23-Aug-19 4:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.