Using People Picker in Custom Web Parts

People Picker in web parts:
To get people picker inside web parts, you can use the People Editor class inside Microsoft.Sharepoint.WebControls namespace.

using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Utilities;
using Microsoft.SharePoint.WebControls;

namespace PeoplePickerWebPart.PeoplePicker
{
    [ToolboxItemAttribute(false)]
    public class PeoplePicker : WebPart
    {
        private PeopleEditor userSelect;
        
        protected override void CreateChildControls()
        {
            userSelect = new PeopleEditor();
            userSelect.MultiSelect = true;
            userSelect.AllowEmpty = false;
            userSelect.AutoPostBack = false;
            userSelect.PlaceButtonsUnderEntityEditor = true;
            userSelect.ID = "PeopleEditor";
            userSelect.SelectionSet = "User,SecGroup";
            userSelect.Rows = 1;
            
            //To apply style to people picker
            LiteralControl styleControl = new LiteralControl();
            styleControl.Text = "<style> .ms-inputuserfield{ font-size:8pt; font-family:Verdana,sans-serif; border:1px solid #a5a5a5;} div.ms-inputuserfield a{color:#000000;text-decoration: none;font-weight:normal;font-style:normal;} div.ms-inputuserfield{padding-left:1px;padding-top:2px;} </style>  ";
            this.Controls.Add(styleControl);

            this.Controls.Add(userSelect);
        }
    }
}

People Picker in User control based web parts:

For user control based web parts, you can simply use the SharePoint’s user control. Here is how:

<%@ Register TagPrefix="spuc" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Once registered, you can call it anywhere in the user control

<spuc:PeopleEditor ID="PeopleEditor1" runat="server" Width="329px" Height="65px" AllowEmpty="true" MultiSelect="false" SelectionSet="User" />

Output:

People Picker in Custom Web Parts

I’ve attached both the projects here.

Thanks to https://karinebosch.wordpress.com/sharepoint-controls/

Salaudeen Rajack

Salaudeen Rajack - SharePoint Expert with Two decades of SharePoint Experience. Love to Share my knowledge and experience with the SharePoint community, through real-time articles!

10 thoughts on “Using People Picker in Custom Web Parts

  • Hey Mate,
    Do you know how to use people editor as a web part property??

    Thanks.

    Reply
  • Hi Thanks for the post,
    Can you please tel me how to use people editor in sharepoint sandboxed visual webpart for o365?

    Thanks in advance.

    Reply
  • Hi It is working fine on IE9.
    However on IE 7, when i click on browse button of people picker, it throws a javascript error:

    “An error has occured on the script of the page”
    Type is undefined.

    Reply
  • Hi, I have a question, can you tell me how to have one Person from this field to LIST? And in another form I want to get Person from item from this LIST. And I know how exactly…

    Reply
  • I have exported a list with people picker values. But after importing the list the values are empty. i don know y?

    Reply
    • Unfortunately, yes this is the default behavior. It does not fix in SharePoint 2010 either. People Picker issues are still alive! But you can paste in multiple names separated by a semicolon, like: #;#;#;

      Reply
  • I having a problem while using this inside a WebForm,
    I got a javascript error that says “TypeError: a is null”

    Any ideas ?

    Reply
    • Are you using JQuery? Looks like its from JQuery.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *