How to add this People Picker in Sharepoint form?

Question

How can I achieve a picker like this:

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:

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

Thanks

Answer 1

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;

itemToAdd.Update();
}

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

Answer 2

Client side people picker in SharePoint:

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

clienttemplates.js
clientforms.js
clientpeoplepicker.js
autofill.js
sp.js
sp.runtime.js
sp.core.js

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.  
    initializePeoplePicker('peoplePickerDiv');  
});  
// 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.

Answer 3

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