Function

$().SPServices.SPFindPeoplePicker

Certification

Certified for SharePoint 2007 Certified for SharePoint 2010

Functionality

The SPFindPeoplePicker function helps you find and set People Picker columns. These little buggers are problem enough as it is, and selecting them and manipulating them with jQuery is something that a lot of people want to do. Add to that the fact that the People Picker is rendered differently in IE than in other browsers, and you have a challenge not unlike simple vs. complex dropdowns.

These are the columns which let us select known users in SharePoint, and they look something like this:

image

SPFindPeoplePicker allows you to get or set the values for People Pickers. When you call it with the DisplayName of a People Picker, the function returns an object which contains information about the People Picker’s structure and current value.

IMPORTANT NOTE: In v0.7.2, this function was mistakenly named $().SPFindPeoplePicker. This was inconsistent with the other function namespacing. As of 2013.01, both $().SPServices.SPFindPeoplePicker and $().SPFindPeoplePicker will work.

Syntax

$().SPServices.SPFindPeoplePicker({
  peoplePickerDisplayName: "",
  valueToSet: "",
  checkNames: true
});

peoplePickerDisplayName
The DisplayName of the People Picker in the form. 

valueToSet 
If you'd like to set the value of the People Picker, optionally provide it here. 

checkNames 
If you'd like to "click" on the Check Names icon to resolve the name in the People Picker, set checkNames to true. The default value is true.

Returns

The function returns an object containing information and values which tell you about the People Picker you have specified:

row

This is reference to the table row which contains the People Picker. This can be useful if you want to hide or show the row conditionally based on some user action.

contents

The full contents of the div[name='upLevelDiv'] element.

currentValue

The current value set in the People Picker. If you pass a value into the function, it will be set and returned in this string. If there are multiple people specified, they are returned separated by semi-colons, as in the People Picker display.

checkNames

This is a reference to the checkNames img tag in the People Picker. It’s used by the function to initiate resolution of a Person or Group value by firing the click event on it. Once you have this reference, you can do the same.

dictionaryEntries

If the browser is Internet Explorer, then this object will contain the full dictionary entry values for each user or group in the People Picker value. If the browser is not IE, then the function calls GetUserInfo to retrieve similar values to mirror the dictionary entry structure.

Example

Assuming there is a People Picker in the form for a column named Sales Rep that is set to contain the two people Eric Mullerbeck and Marc Anderson:

var salesRep = $().SPFindPeoplePicker({
peoplePickerDisplayName: "Sales Rep"

});

salesRep will be an object with the following attributes. There are considerable differences between how the People Picker works in different browsers; the example below is from Internet Explorer. In the function I try to "smooth over" those differences.

image

Last edited Jun 28, 2013 at 4:43 PM by sympmarc, version 12

Comments

diskojoe Oct 7 at 9:42 PM 
Thanks, @vishalset -- ".row.find(... ms-entity-resolved ...)" was what I was looking for.

amccollough Aug 4 at 10:21 PM 
How do you get the DOMAIN\username of the selected name in the Picker, presuming a name was successfully picked?

BennyBartsch Feb 28 at 2:33 PM 
If you use a different display language checkNames will not work. For example in german the title attribute is "Namen Überprüfen" so jQuery will not find "img[Title='Check Names']". A workaround for german display language would be: thisRow.find("img[Title*='Namen']:first")

chloraphil Feb 24 at 10:03 PM 
I was having problems with this until I discovered that there was whitespace in the <nobr> tag. So, make sure there is no whitespace around your field name: <nobr>FieldName</nobr> is how it should be.

achaffee1 Oct 1, 2013 at 3:02 PM 
I am trying to use the "Click" event on the checkNames reference returned from the SPFindPeoplePicker function. I have tried everything I can think of and am not able to get this to work.

<label for="mimic">Copy User Settings:</label>
<nobr style="display:none">Mimic</nobr>
<SharePoint:PeopleEditor id="spPeoplePickerMimic" Name="Mimic" PlaceButtonsUnderEntityEditor="True" MultiSelect ="False"
runat="server" SelectionSet="User" CssClass="MimicName"/>

Using SPServices 7.2
Using JQuery 1.8.3


var ppCtrlMimic = $().SPFindPeoplePicker({
peoplePickerDisplayName: "Mimic",
});
var vMimic = ppCtrlMimic.currentValue;
ppCtrlMimic.checkNames.click();

I have added this as part of a button click event

Also tried blur event on object
$(".MimicName").blur(function() {
$().SPFindPeoplePicker({
peoplePickerDisplayName: "Mimic",
checkNames: true
}).checkNames.click(); });
Can you help me find in what I am missing?
Thanks
Angie

frankok May 30, 2013 at 9:24 PM 
Hi,
To clear a people picker field, do this the old way:

// There's no easy way to find one of these columns; we'll look for the comment with the columnName
var searchText = RegExp("FieldName=\"" + columnName + "\"", "gi");
// Loop through all of the ms-formbody table cells
$("td.ms-formbody").each(function() {
// Check for the right comment
if (searchText.test($(this).html())) {
$(this).find("div[Title='People Picker']").html("");
$(this).find("textarea[title='People Picker']").val("");
$(this).find("img[Title='Check Names']").trigger("click");

return false;
}
});

dzimmer276 Dec 20, 2012 at 3:16 PM 
I have been unable to get this function to work. It may be that I am too green to understand the additional code to update the form to show the changed value. I have added the following:

<script language="javascript" type="text/javascript">


$(document).ready(function() {

var pp = $().SPFindPeoplePicker({
peoplePickerDisplayName: "Name",
valueToSet: "corp\\userid"
});
$().SPServices.SPRedirectWithID({
redirectUrl: "EditForm.aspx"
});

});


</script>

The second fuction works like a charm, but I am trying to prepopulate the People Picker with the current user data. For testing I have just been puting my own ID in the ValueToSet Field. This results in still a blank field on the form.

Details:
SharePoint 2007

<script language="javascript" type="text/javascript" src="../../jscripts/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jscripts/jquery.SPServices-0.7.2.min.js"></script>

The form is a custom form based off a custom list form.

Any help or directing to a primer would be appreciated...

Cheers,

Zim

vishalseth Nov 6, 2012 at 7:52 PM 
I was able to set the value of the people picker in sharepoint 2007 with chrome and firefox using:

var $MyPicker= $().SPFindPeoplePicker({ peoplePickerDisplayName: "MyFieldName", checkNames: false});
$MyPicker.row.find("textarea[id$='_downlevelTextBox']").val("foo.com\JBo");

hope this helps someone.

vishalseth Nov 6, 2012 at 6:20 PM 
yikes - I forgot to mention that my 2 comments below were for SharePoint 2007.

vishalseth Nov 6, 2012 at 6:15 PM 
Also the CurrentValue return value has "full name" in Chrome and "fully qualified domain name" in IE. e.g. in Chrome, we'd get "Joe Bo" whereas in IE we'd get "foo.com\jBo".

I found it more consistent to use:
var MyCustomPicker.row.find("span[class='ms-entity-resolved']").attr("title");

that works in both IE and Chrome.

vishalseth Nov 6, 2012 at 6:12 PM 
The ValueToSet parameter if set, doen't work with Chrome - works with IE.

Its also mentioned that the dictionaryEntries result works in non IE browsers using GetUserInfo. But I did not get anything back using Chrome. The values do come back in IE.

jerr0000 Oct 4, 2012 at 3:29 PM 
Please how can i get the name entered in a field type People in NewForm.aspx?
I do not understand how can i get the object returned by the function.
Thanks.
Jorge