This project has moved. For the latest updates, please go here.

Using SPFindPeoplePicker with a Client side People picker

Jan 10, 2014 at 4:56 PM
Just new to SPServices (what a find!) and getting to grips with the SPFindPeoplePicker in particular. Everyones seems to be using it with standard forms etc but I'm looking to use it with a client side pp... much like this
<div id="peoplePickerDiv" class="peoplepicker"></div> so i know the ID of the picker that i want to deal with so do i need to bother with the display name and just reference it directly?

Jan 10, 2014 at 5:50 PM
I wasn't sure from your StackOverflow post what you were doing exactly. Does it result in a standard SharePoint People Picker?

As I mentioned on SOF, you might just want to pluck the function out of SPServices and adapt it for your own use.

Jan 10, 2014 at 6:37 PM
Edited Jan 10, 2014 at 6:39 PM
Pretty sure it does...the resultant HTML looks like this.
<div id="peoplePickerDiv" title="ppEmployee" class="peoplepicker">
<div dir="">
<div class="sp-peoplepicker-topLevel" id="peoplePickerDiv_TopSpan" title="Enter names or email addresses..." spclientpeoplepicker="true" style="width: 300px;">
<input id="peoplePickerDiv_TopSpan_HiddenInput" name="peoplePickerDiv_TopSpan_HiddenInput" type="hidden"/>
<div id="peoplePickerDiv_TopSpan_AutoFillDiv" class="sp-peoplepicker-autoFillContainer"/>
<span id="peoplePickerDiv_TopSpan_InitialHelpText" class="sp-peoplepicker-initialHelpText ms-helperText">
Enter names
or email addresses...
<img class="sp-peoplepicker-waitImg" id="peoplePickerDiv_TopSpan_WaitImage" alt="This animation indicates the operation is in progress. Click to remove this animated image." src="/_layouts/15/images/gears_anv4.gif?rev=31"/>
<span id="peoplePickerDiv_TopSpan_ResolvedList" class="sp-peoplepicker-resolveList"/>
<input type="text" class="sp-peoplepicker-editorInput" size="1" autocomplete="off" value="" id="peoplePickerDiv_TopSpan_EditorInput" title="Enter names or email addresses..." autocorrect="off" autocapitalize="off" data-sp-peoplepickereditor="true"/>
I'll have a look at the function as well.

Many Thanks,

Jan 10, 2014 at 6:42 PM
Jan 10, 2014 at 10:25 PM
Edited Jan 10, 2014 at 10:29 PM
I've given this a little more thought..I think i can use the SpFindPeoplePicker as is.

if i use the following code
$('#sp-peoplepicker-topLevel').dialog('option', 'title', 'employeePP');
to rename the title of the sp-peoplepicker-topLevel DIV i can then use that to enter the peoplePickerDisplayName. Should work as normal from then on in? I'm guessing the OTB version of this does not actually know anything about the column the people picker is attached to (in my case its not)?

I've give it a try tomorrow.

Jan 12, 2014 at 3:53 PM
Edited Jan 12, 2014 at 4:00 PM
ok it would seem to me that the Client side peoplePicker seems to act a little differently to the OTB one. I'm using the following code to set it up and then update the title so it best reflects the OTB version.
// 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.

    var employee = $().SPFindPeoplePicker({
        peoplePickerDisplayName: "employeePP", // The displayName of the People Picker on the form
        valueToSet: $().SPServices.SPGetCurrentUser()


    for (i = 0; i < employee.dictionaryEntries.length; i++) {

// 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'] = false;
    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);
    // Now we need to change the title for SPServices
    $('#peoplePickerDiv_TopSpan').attr('title', 'employeePP');
    $('#peoplePickerDiv_TopSpan_EditorInput').attr('title', 'employeePP');

// Query the picker for user information.
function getUserInfo() {

    // Get the people picker object from the page.
    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

    // Get information about all users.
    var users = peoplePicker.GetAllUserInfo();
    var userInfo = '';
    for (var i = 0; i < users.length; i++) {
        var user = users[i];
        for (var userProperty in user) { 
            userInfo += userProperty + ':  ' + user[userProperty] + '<br>';

    // Get user keys.
    var keys = peoplePicker.GetAllUserKeys();

My peoplePicker is not getting pre populated with my currently logged in user and I'm a little stumped? I've confirmed that SPServices is working by just using the alert($().SPServices.SPGetCurrentUser()) method which works...