Share via

Sharepoint: Working with People Picker control in Custom List Forms using jQuery

  • Article

While working with Custom SharePoint List forms, you might come across few issues related to People Picker field listed down here.

People picker border not visible

Solution

Create a style class say 'PeoplePickerBorder'   

  <  style type="text/css"> 

 ``.PeoplePickerBorder{    

   ``border: 1px solid gray !important;    

   }  

  </``style``>    

jQuery is used to set this style when document is ready using below line of code:

$("div[title='People Picker']").addClass("PeoplePickerBorder");

This sets a gray color solid border with 1px width to all people picker controls on page.

Set width of people picker textbox

Solution

Create a style class say 'PeoplePickerWidth'

  <style type="text/css"> 

   .PeoplePickerWidth{    

   ``width: 300px !important;    

   }  

  </``style``> 

$("div[title='People Picker']").addClass("PeoplePickerWidth");

This sets 300px width for textbox to all people picker controls on page.

How to set the people picker field by default with some user eg. Current SharePoint User

 First of all get current user display name using below code:


      var user = $().SPServices.SPGetCurrentUser({fieldName: "Title"});

 

 Set this user as default user for people picker control:

$("div[title='People Picker']").text(user);

Disable People Picker control to not accept any value

Possible scenario when you don't want user to change its default value:

$("div[title='People Picker']").attr("disabled","disabled");

 Make control non-editable:

$("div[title='People Picker']").attr("contentEditable",false);

Hide image associated with picker control:

$("div[title='People Picker']").closest("tr").closest("table").closest("td").next("td").find("img").hide();

If you have multiple people picker controls on a page, above line codes will be applicable to all controls on a page but what if you want to set the above styles/fixes only for specific people picker.

Then you have to specify the control index using below syntax:

  

      $("div[title='People Picker']").eq(0).addClass("PeoplePickerBorder");

This will get the first people picker control and add class. 

See Also