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

• Download UserProfilePicture.zip - 44.4 KB

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.

 
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.

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 Application
2. Click New->User Profile Service Application from ribbon menu

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.

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

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.

7. Fill the configuration details,

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

9. Finally Press “Ok”.

Manager user profile properties

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

Configure Synchronization Timer Job

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

Provide Configuration details for the timer job

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.

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

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”

2. Deploy the solution as Farm solution as the code should be executed in server side to retrieve profile information from UPS application.

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”

4. After created the control, the solution explore looks like below

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

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”
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

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.