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;
}
});
Thanks for the nod, Marc.
The great thing about this solution is that it allows me to look up a manager name from the SharePoint “User Information List,” then get that person’s userName (both, by using the SPServices library) to fill a hidden People Picker field, so the user doesn’t have to enter their manager name every time, but I can use SPD to easily send the manager an email.
“Why don’t I just set the manager using an SPD action, too,” you ask? Because, I have this list set us as an “intake,” meaning the user can only create a record, but not edit it. Which means the “create” workflow that triggers also can’t edit it, so I have to set the manager information before Save.
“How do I set this before save,” you ask? (Man, you’re full of questions!) SharePoint adds this great function call just to the Save button, called PreSaveAction. Simply create that function on your page and have it perform this service, then return true and the save will take place.
Cool, huh?
Blessings,
Jim Bob
It would be truly cool if everyone had that manager field populated in WSS, pulling from AD. Alas, that isn’t the case, but this is a great solution when you do!
See, good questions from Jim Bob as well as great explanations. (We have fun working together.)
M.
I’m pretty new to SharePoint and using what I consider advanced techniques, but I’m wondering if you could explain a bit more on how you used this code to grab the Manager of the user to populate a People Picker….I’m pretty sure I could use that in multiple ways!
Steph:
I think that this post
http://sympmarc.com/2010/10/29/capturing-the-current-users-manager-in-moss-using-spservices-and-getuserprofilebyname/
Will be closer to what you need.
M.
I’ve used this code and it works great with IE8. Have you had any success with it working in Chrome v5? I’m using SPServices to grab the username and that works fine on the Title input, but nothing happens to the People Picker. Any ideas for a noob?
To be honest, I don’t know if I’ve tried it in Chrome. I was just trying to set up a test page on my demo site so that we could both look at it and I somehow screwed up one of my lists. Erg.
In any case, it’s possible that the way the control is rendered in Chrome is different, since it uses JavaScript to do the resolution. Try looking at the control with Chrome Inspector.
M.
…um… “Great Minds…” and all that! :D
That’s funny!
M.
Hey Matt,
You’ll probably need to use the “Inspect element” function in the context menu (right click) to find out how Chrome is drawing the People Picker. You may find that it’s a bit different from IE8 or even FF.
Hope that helps.
Blessings,
Jim Bob
You guys are all over it… I’ll try my best to walk through the DOM and see what I can see.
I’m going to set up an alert on the regex to see if that’s being set appropriately and during the each function, I’d like to have an alert for each item it finds. How would I do that? I’m thinking it would be something like:
$(“td.ms-formbody”).each(function() {
alert(.this)
});
Looking at that example though, it looks wrong, but I’m allowed b/c I’m still a noob. Do you guys think these alerts will help?
Alerts rule, but yours won’t work. Something like this: alert($(this).HTML());
M.
Hi,
I’ve tested this in my solution, and works great! Thanks!
However, is there any way to extend this script to also validate the input? When the name gets put into the PeoplePicker, it’s not completely validated through the control (i.e. button to the right).
Any inputs?
Thanks,
Frank
This is how I’m doing it dynamically, I can’t take credit for the code since it wasn’t mine.
$(document).ready(function() {
var CurrentUser = $(“a:contains(‘Welcome’)”).text();
var User = CurrentUser.substr(8,CurrentUser.length);
$(“textarea[title=’People Picker’]”).val(User);
$(“div[title=’People Picker’]”).text(User);
});
This is fine until you have multiple People picker on one page
John:
This should work fine if you have multiple People Pickers. By setting the var columnName = ‘yourcolumnname’;, you can indicate which one you want to target.
M.
Frank,
Getting the form to validate the People Picker is as simple as “clicking” the Check Names image that follows it. You can do this programmatically with jQuery.
I have found that it’s necessary to set both of the fields referenced in Eric’s comment, so add the following to Marc’s code above (between the .html() set and the return false):
$(this).find("textarea[title='People Picker']").val(userName); $(this).find("img[Title='Check Names']").trigger("click");BTW, this these three lines can also be written:
$("div[Title='People Picker']", this).html(userName); $("textarea[title='People Picker']", this).val(userName); $("img[Title='Check Names']", this).trigger("click");IOW: $(this).find(“”) == $(“”, this)
Blessings,
Jim Bob
Thank you both, Eric and Jim Bob.
Jim Bob, I added your first code example, and it worked as expected.
Me happy! :-)
Thank you again.
Marc, is setting a default value to the different fields in a new form a part of your SPServices?
Frank:
No, I haven’t tried to generalize that into a function because there is such variability. However, it’s relatively straightforward to set column values using jQuery.
M.
Glad to hear it, Frank! You happy, me happy.
Has anyone found a good way to bind to the change event for a people picker? I have the current user information including the Manager information populating on load and I am making all the information except the Name disabled. My plan is to have an on change event on the Name people picker and recall the spServices functions to update the other fields based on the new user that was selected. Any help would be greatly appreciated.