Raghu's SharePoint Column : SharePoint - My Lifeline!!

Raghu's SharePoint Column

SP2013: Setting people picker value in NewForm.aspx

In SharePoint 2013 the people picker has revamped and now it supports auto complete. You will not see the address book and the resolve user button any more on the new form.aspx.  If you are looking for a short cut key to resolve the user you can still use Cntrl + K  key combination.

What’s new with SharePoint 2013 people picker?

In order to provide support for people picker in apps, Microsoft has come up with three new files as given below and is located in the 15 hive.

  1. clientform.js
  2. clientpeoplepicker.js
  3. autofill.js

The above 3 files contains most of the functionality required to be performed by people picker. If you have not got a chance to see how the new people profile looks given below is the snapshot of it.

People Picker

People Picker

I have been working on SharePoint Foundation 2013 for quite some time now and I ended up in a scenario where I have to auto populate the Supervisor people picker in the NewForm.aspx based on the logged in user.  Initially I thought of using SPFindPeoplePicker method of SPService but it didn’t work since the rendering of people picker has changed in SharePoint 2013. You must go through the discussion on one of the blog post of Marc D Andersons Blog which has multiple scenarios discussed.

After some research I came up with the below method which requires you to pass fieldname (.i.e. Display Name of the field) and the userAccountName (.i.e. domain account ex:domain\rhs)

function SetAndResolvePeoplePicker(fieldName, userAccountName) {

var controlName = fieldName;

var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + controlName + "']");

var peoplePickerEditor = peoplePickerDiv.find("[title='" + controlName + "']");

var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];

peoplePickerEditor.val(userAccountName);

spPeoplePicker.AddUnresolvedUserFromEditor(true);

//disable the field

spPeoplePicker.SetEnabledState(false);

//hide the delete/remove use image from the people picker

$('.sp-peoplepicker-delImage').css('display','none');

}

 

Hope this posts helps. Please drop a comment if you have a better way of doing this or any other alternate.

Updated on 03-09-2013: Disabling of field using SetEnabledState (instead of using peoplePickerDiv[0].disabled = true; ) and added hiding of remove image from the people picker
 
Comments

Hi Raghavendra,

Thanks for the above article.

Currently i am working on PP in SharePoint 2013. I have a requirement to make PP readonly in edit form, so that no body can change the user in the PP.

after using your above code, i am able to make the PP disable but I can still click on ‘x’ sign to delete the user from the people picker.

Could you please help me to resolve this.

Hi Yogendra,

Updated the code snippet to disable and remove the x sign.

Suresh Kumar Senapati

This code works executes perfectly for people pickers that accept one user value.
Any solution for the people pickers that accept multiple user names in them…??
Thanks in advance :)

Is there a way to actually pull the current users supervisor and post to a field?
btw, thanks for the code above!

Hi Davidatek,
i know its late to reply you, better late than never – yes you can use SP2013 People rest service get manager and set to the required people picker fiedl – go through the blog post http://www.vrdmn.com/2013/07/sharepoint-2013-get-userprofile.html

Hi Raghavendra,

I want to get the people picker value selected by user while adding new item in newform.aspx (This page is OOBX). I have created a people picker field manaully.I am using SP2013 and content editor webpart.Please suggest.

Thanks,
Iranna G

Thanks for posting.

Welcome – glad to know that it helped.

How to set values in multiple allow people picker?

Suresh kumar senapati

For setting values to a Multi User field, call the same function again with the new user name.

Where can I retrieve the fieldName?

Thank you so much, great code!

Mayank Kukadia

Excellent !! You saved my life.

There are many articles on this topic but this is the perfect and accurate.

Thanks a load.

Hiding ‘x’ image is not working when the people picker field is disabled/read-only? Any alternate solution?

Hi Aswath, – Try hiding the x image first and then make it read only/disable.

Leave a Reply
*

Protected by WP Anti Spam