Set a People Picker’s Value on a Form – Revisited with jQuery
Jim Bob Howard (@jbhoward) always asks me good questions. Today he was interested in setting the value of a People Picker on a form with script. I pointed him at my old post about doing it with JavaScript, but we’re jQuery buddies, so I wanted to give him some jQuery instead. That and the fact that jQuery will be more reliable. (Jim Bob was already using jQuery on the page. If he wasn’t I would have suggested sticking with the JavaScript approach; no need for the overhead if JavaScript will do.)
Here’s the jQuery I came up with:
var columnName = 'yourcolumnname';
var userName = 'domain\\username';
// 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(userName);
return false;
}
});
I was able to adapt this post: http://www.endusersharepoint.com/STP/viewtopic.php?f=13&t=2898
to detect when the value of a peoplepicker was changed, but for me, it doesn’t work if the user enters a partial name “smith” then hits enter. the user than then click the name to choose a user from a list – but that action doesn’t seem to trigger the change event.
I’ve tried adding new delegates to the page (even to something vague like ALL anchor tags) – but I can’t capture any events that occur on items inside that popup to choose the correct user.
Any suggestions there?
Thanks
Marc et al. This is great! I’m not sure if you are interested but I have this wrapped to a stand alone function that returns form field properties (like ID and value and validation class).
var formPeoplePickerProp = [];
//===========================
//getPeoplePickerInfo(“EmplNom”);
function getPeoplePickerInfo(inFieldTitle) {
var searchText = RegExp(“FieldInternalName=\”” + inFieldTitle + “\””, “gi”);
$(“td.ms-formbody”).each(function () {
if (searchText.test($(this).html())) {
//Returns current ID of div regardless of form location
//var retTextID = $(this).find(“div[Title=’People Picker’]”).next().attr(“id”);
formPeoplePickerProp.push($(this).find(“div[Title=’People Picker’]”).attr(“id”));
//Returns current div innerText LastName, FirstName or AD display name
//var retDivVal = $(this).find(“div[Title=’People Picker’]”).attr(“innerText”);
formPeoplePickerProp.push($(this).find(“div[Title=’People Picker’]”).attr(“innerText”));
//Returns current ID of textarea regardless of form location
//var retDivID = $(this).find(“div[Title=’People Picker’]”).attr(“id”);
formPeoplePickerProp.push($(this).find(“div[Title=’People Picker’]”).next().attr(“id”));
//Returns current textarea innerText such as DOMAIN\username
//var retTextVal = $(this).find(“div[Title=’People Picker’]”).next().val();
formPeoplePickerProp.push($(this).find(“div[Title=’People Picker’]”).next().val());
//Returns current state form field for validation state ‘ms-entity-resolved’ or ‘ms-entity-unresolved’
//var retFieldClass = $(this).find(“div[Title=’People Picker’]”).find(“span”).attr(‘class’);
formPeoplePickerProp.push($(this).find(“div[Title=’People Picker’]”).find(“span”).attr(‘class’));
return formPeoplePickerProp;
}
return formPeoplePickerProp;
});
}
//alert(formPeoplePickerProp);
Nice, Richard. Thanks for posting!
M.
Hi
Great post – but I could not get it working with Sp2010. In the end I needed the following variation of your code:
$(document).ready(function(){
var userName = ‘domain\\username’;
var divPP = $(this).find(“div[title=’People Picker’]”);
divPP.html(userName);
$(this).find(“img[Title=’Check Names’]”).trigger(“click”);
});
cheers
James
Hello,
I’m using GetUserCollectionFromSite from SP services to get attributes from the users, then populate an empty custom list with rows for each user using UpdateListItems. Right now I just have a content editor webpart that has a button and that references a .htm page with my code.
//domainName = ‘domain\username’
$().SPServices({
operation: “UpdateListItems”,
async: false,
listName: “Groups by User”,
updates: “” +
“” +
“” + Groups + “” +
“” + domainName + “” +
“” +
“”,
completefunc: function(xData, Status) {
}
The Groups (multi line text field) field gets populated but the DisplayName (people picker) field does not.
Steve:
Code doesn’t always “stick” with WordPress. Why don’t you post your code over at http://sharepoint.stackexchange.com/ and ping me the link?
M.
Great job. I looked high and low to find a way to do this.
This code works great with multiple people picker fields on the form, but now when clicking on “Check Names” on *any* of the fields (or programmatically clicking it), I’m getting a Javascript error.
‘matches’ is null or not an object
entityeditor.js line 2, char 11597
Can’t find a single reference to this particular null reference on the web. It almost sounds like it’s misinterpreting the script. Any suggestions?
Marc,
First off, love your work, but I have a question related to this article I hope you can point me in the right direction. I have a list that was created from an excel spreadsheet with user’s full names. I want to use that field to get their AD name in a People picker column to show presence. I hope I explained this right.
Michael:
Thanks! When you upload content from Excel, the columns which contain people will just be text columns, as you’ve noticed. What you’ll probably want to do is add a new Person or Group column to the list, go into Datasheet view, and copy the people’s names into the new column. As long as the names are valid and match a name in the User Information List, they will resolve. You’ll probably have some cleaning up to do, but I think this apporach is the best option.
M.
Hey Marc,
This helped me a lot but I noticed that it is slow because you are looping through all of the td:ms-formbody tags. I found that using a custom list form on a new page gives you two benefits. The first is you do not need to loop through all of the tags because you can use the id of the form field. The means the loop is replaced with the following.
$(“div[id*=ff#]”).html();
The second is you are making changes to a new page and that means the original can be used as a backup in the event anything breaks – which SharePoint seems prone too. Of course this would assume that you are using SharePoint Designer and not a CEWP.
Thanks againg,
Jerimiah
Jerimiah:
Fair points. However, customizing the form just to gain a tiny bit of JavaScript efficiency may not be worth it. I also never edit the original page, but a copy. Sorry if I didn’t makle that clear.
M.
Did anyone find a solution to Kasey’s question about binding to the change event of a People Picker? I need to do the same thing. I have two people picker fields, one for employee and one for manager. I have managed to get the code working to look up the manager from an account ID passed to it, but I now need to wire this all together and have that code called when the employee people picker changes.
Jason:
Take a look at SPFindPeoplePicker in SPServices v0.7.2, which is currently in beta.
M.