How can I achieve a picker like this: enter image description here

with this check control and that book icon I don't know how to call it. For data source for this picker should be a sharepoint list.

All I could make till now was this picker:

enter image description here

But I need the first one. Could any one help me on how to achieve the first data picker?


  • Is it Client side people picker or server side people picker? – Samir Khimani Jul 17 '17 at 8:07
  • it is client side, but i you now how to make it in server side it not problem – Nderon Hyseni Jul 17 '17 at 8:08
  • So do you need it for server side or client side? – Mohamed El-Qassas MVP Jul 17 '17 at 9:32
  • @M.Qassas I need it for serverside – Nderon Hyseni Jul 17 '17 at 9:34

To use PeoplePicker control in Visual WebPart in SSOM , Try to add the PeoplePicker control at your front code as the following:

<SharePoint:PeopleEditor ID="spPeoplePicker"  runat="server" Width="100" SelectionSet="User" />

In your code behind try to get the value of the PeoplePicker control as the following

SPSite oSPsite = new SPSite(SPContext.Current.Site.ID);

SPWeb oSPWeb = oSPsite.OpenWeb();

SPList list = oSPWeb.Lists["PeoplePicker"];

oSPWeb.AllowUnsafeUpdates = true;

int iPeople = spPeoplePicker.ResolvedEntities.Count;

SPListItem itemToAdd = list.Items.Add();

for (int i = 0; i < iPeople; i++)


PickerEntity peEntity = spPeoplePicker.ResolvedEntities[i] as PickerEntity;

SPUser user = SPContext.Current.Web.EnsureUser(peEntity.Key);

itemToAdd["UserName"] = user;


For more details check How to call a people picker in visual web part in sharepoint2013

  • is it working good but I want to select items from a list called employees not from active directory. do you understand what I mean ? – Nderon Hyseni Jul 17 '17 at 9:53
  • I think in this case, you would do it manually , it need more development :( – Mohamed El-Qassas MVP Jul 17 '17 at 10:56

Client side people picker in SharePoint:

Below are the JS files required to load for client side people picker using JSOM.


Please put below html in HTML file

<div id="peoplePickerDiv"></div>

Please put below code in JS file.

// Run your custom code when the DOM is ready.   
$(document).ready(function() {  
    // Specify the unique ID of the DOM element where the  
    // picker will render.  
// Render and initialize the client-side People Picker.  
function initializePeoplePicker(peoplePickerElementId) {  
    // Create a schema to store picker properties, and set the properties.  
    var schema = {};  
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';  
    schema['SearchPrincipalSource'] = 15;  
    schema['ResolvePrincipalSource'] = 15;  
    schema['AllowMultipleValues'] = true;  
    schema['MaximumEntitySuggestions'] = 50;  
    schema['Width'] = '280px';  
    // Render and initialize the picker.  
    // Pass the ID of the DOM element that contains the picker, an array of initial   
    // PickerEntity objects to set the picker value, and a schema that defines  
    // picker properties.  
    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);  

Hope it works for you.

  • I have the same code with you homie and I have the same picker but I want to create an dialog picker, just like in first picture I posted – Nderon Hyseni Jul 17 '17 at 8:16

You can customize the form with InfoPath. In InfoPath form, you will get the same control.

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.