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;
    }
});

44 Comments

  1. 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

    Reply
  2. 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?

    Reply
  3. 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

    Reply
  4. 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?

    Reply
  5. 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

    Reply
  6. 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);
    });

    Reply
  7. 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

    Reply
  8. 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?

    Reply
    • 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.

      Reply
  9. 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.

    Reply

Have a thought or opinion?