Friday, May 31, 2013

Get and Set User in Client People Picker using Javascript Client Object Model

Hi Readers,

There is a unique scenario where I have to pick user from a Custom People Picker on a Custom Form and then Push that User to a Client People Picker of a List Item using Javascript Client Object Model.

InOrder to achieve this functionality, I first tried to fetch the User from the Custom People Picker on the Form using JQuery,

 var displayName = $(" div:first-child").attr("displaytext");

Problem is I do not get the ID of this User normally. So inorder to get the 'Id' of this User I searched this User into UserInformation List and then picked the ID of this User.

 function AddItems(displayName) {

        var userInfoList = siteObjects.web.get_siteUserInfoList();
        var query = new SP.CamlQuery();
        query.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + displayName + "</Value></Eq></Where></Query></View>");
        siteObjects.UserCollListItem = userInfoList.getItems(query);
        siteObjects.ctx.executeQueryAsync(Function.createDelegate(null, AddItemsSuccess), Function.createDelegate(null, AddItemsFailure));

Then I fetched the List Item ID :  userID = currentItem.get_item("ID");

Once I got the User ID , I can easily convert this String Type User into User Type using below code :

  var userFV = new SP.FieldUserValue();

and can easily set the People Picker List Item now

siteObjects.UserCourselistItem.set_item('UserName', userFV);

This is something very unique requirement and can be helpful for many.


  1. Hi,, thanks fr the blog...I have multiple people picker in my form and I am unable to save the field in the list as the above method run takes the latest value of people picker before it calls the success method...have u tried above with multiple people picker..if yes kindly share..greatly appreciate..thanks...

  2. hi, thanks for the blog.
    can i run this code inside presaveaction() call ? i am using presaveaction() function inside my sp d 2010 , custom list form's newform.aspx page.

  3. Hi Ankit, use setFieldValue() of SPService library to set multiple value.