[notice]2012-09-07 – Note that I’ve added a more robust version of this function into SPServices v0.7.2, which at this writing is in beta but will be released soon. See the docs for SPFindPeoplePicker.[/notice]
I was working with several People Pickers in a form for a client project last week where I needed to set or get their values at various times in the page lifecycle. These things are pesky little compound controls, I often need to find them in the page, and I get tired of writing new script every time I want to do it. I’ve posted in the past about how to get the value with JavaScript, set the value with JavaScript, set one with jQuery, and more. It seemed high time to just write a little function to give me everything I needed in one go.
Here’s what I came up with:
[important]UPDATE 2012-04-24 – I made a dumb mistake by using :contains() in the selector for thisRow, which occasionally returned unwanted results. I fixed it with the .filter() function below.[/important]
7 | $.fn.findPeoplePicker = function(options) { |
9 | var opt = $.extend({}, { |
10 | peoplePickerDisplayName: "", |
16 | var thisRow = $("nobr").filter(function() { |
17 | return $(this).text() == opt.peoplePickerDisplayName; |
19 | var thisContents = thisRow.find("div[Title='People Picker']"); |
20 | var thisCheckNames = thisRow.find("img[Title='Check Names']:first"); |
21 | if(opt.valueToSet.length > 0) thisContents.html(opt.valueToSet); |
22 | if(opt.checkNames) thisCheckNames.click(); |
23 | var thisCurrentValue = thisContents.text(); |
25 | return {row: thisRow, contents: thisContents, currentValue: thisCurrentValue, checkNames: thisCheckNames}; |
This function doesn’t just find the People Picker in the form, it also allows you to set it and, if you choose, click the Check Names image automagically. It also returns a JSON object which contains references to the important elements which make up the People Picker so that you can work with them later. Unfortunately, the only thing I can key on to find the darn things in the page is the <nobr> element which contains the DisplayName of the column. There’s just not anything else in the People Pickers which distingishes them from each other other than the standard comment, like so:
Uising that comment has always seemed even less reliable to me than the DisplayName, even though I select for it in SPServices in several places. (If I’m missing something, please let me know.)
Here are a few example calls:
2 | siteContactPeoplePicker = $().findPeoplePicker({ |
3 | peoplePickerDisplayName: "Site Contact", |
4 | valueToSet: $().SPServices.SPGetCurrentUser() |
7 | stakeholdersPeoplePicker = $().findPeoplePicker({ |
8 | peoplePickerDisplayName: "Stakeholders", |
In the first call, I’m setting the Site Contact to the current user and resolving the name. In the second call, I’m getting references to the important objects for the StakeHolders People Picker so that I can set the value variably later, like so:
2 | stakeholdersPeoplePicker.contents.html(stakeholderNames); |
3 | stakeholdersPeoplePicker.checkNames.click(); |
I think some variation of this would be helpful to add to SPServices, even though it has nothing to do with the Web Services. Would you use it? What else would you want it to do?
Definitely using and loving it! This is pure laziness speaking but it would be great if you could add a property that would let you set whether to exclude it from the SharePoint SpellCheck.asmx. I know it is a simple task now that I have this great selector to set the class and attributes but would be great “out-of-the-box” functionality.
Hi Marc,
I would like to disable the people picker in my form depending on some conditions. How do I disable this?
Thanks in advance!
Edwin
I just get object does not support findPeoplePicker script error.
Jeff:
If you’re using SPServices, the function is SPFindPeoplePicker.
M.
Hi,
i have a list A, there i have people picker employee, there will be on entry for each employee, i want to pull the items ID (A lists item ID) of the logged user through jquery, how can i do that?
guru:
The SPFindPeoplePicker function in SPServices will get that for you.
M.
how do i exclude the current logged in user from the people picker? i have the user loginId
Shiva:
You’d have to write something custom to handle that. You could do it woth script by testing the value on blur.
M.
hey, im pretty new to working with the control and have no clue on how to do it. what do you mean by blur? and im looking to validate it through the PP itself. any methods you know off?
btw this is regarding the 2013 Client People Picker.
Shiva:
There’s nothing out of the box to exclude the current user from the People Picker. You’ll need to write something custom to handle it, whether it be script or managed code.
M.
Hi, my problem seems to be easy but i’m really blocked. I just want to get the value of a people picker and show it in an alert using javascript thanks for help
ons:
Check out the function in SPServices.
M.
I just found the function that sets a value in the people picker but i need the one that gets its value
$().SPServices.SPFindPeoplePicker allows you to both get and set the People Picker value.
M.
i found this syntax
$().SPServices.SPFindPeoplePicker({
peoplePickerDisplayName: “”,
valueToSet: “”,
checkNames: true
});
can i change the arguments or remove the valueToSet ?
If you read the docs a little more closely, you’ll see that the function passes you back an object containing the current value, whether you set it or not.
M.
Marc,
I am trying to get this working on SharePoint 2013 people picker, but with no luck. Tried to debug and found that there is no div with title=’People Picker’ also no img with title=’Check Names’. Can you please help?
Check this our for SharePoint 2013 people pickers. This one works.
http://www.sharepointcolumn.com/sp2013-setting-people-picker-value-in-newform-aspx/#comment-856
How would you go about running “$().SPServices.SPFindPeoplePicker” whenever a user finishes selecting a user?
Thanks in advance.
Every time they select someone or when a “blur-like” event happens? Can you explain a little more about what you’re trying to do? It probably makes sense to post the details in the SPServices Codeplex Discussions so that we can share code more easily.
M.