Close this search box.

Disable a people picker field in SharePoint 2013 with jQuery

jQuery is a nice tool when working with SharePoint, because it lets you create behaviour that is not available using standard configuration and improve usability and business value of your solution.

Still, it is not always trivial to perform seemingly trivial tasks with jQuery and SharePoint, because you are so much closer to the metal and the inherent complexity of SharePoint gets in the way of simple tasks.

I think for the future, Microsoft would gain from providing a client side library for manipulating SharePoint elements with jQuery that is more high-level than the barebone jQuery/HTML approach. One example of this is the following:

In an edit form, disable a people picker field so that it appears disabled and its value cannot be changed

For a text field, this would be the simple matter of setting the disabled property, like this:

$("input[title='MyFieldTitle']").prop('disabled', true);

But for a people picker field, this is a whole other story. I needed to do exactly this, which lead me to a little journey to explore the inner structure of the people picker field.

It turns out that a people picker field is not a single field, but a whole mix of div, span, a and input elements that are put together in a quite well-engineered but complex way in order to provide all the necessary functionality.

After studying the structure of the element composition, I came up with the following solution. I will assume you already know how to put jQuery to use on the form. The following code is run in the document.ready event handler.

First, I disabled the input text box that lets you write text inside the people picker control:

$("input.sp-peoplepicker-editorInput[title='SharePoint Bruker']")
    .prop('disabled', true);  // disable input textbox

Then, I hid the 'x' that allows you to remove a selected user
    : $(".sp-peoplepicker-delImage")
          .hide();  // hide the 'x' after the link

Then I set the disabled class on the control
    : $("div.sp-peoplepicker-topLevel[title='SharePoint Bruker']")
          .addClass("sp-peoplepicker-topLevelDisabled");  // set the correct css
                                                          // class for disabled

Now we’re almost there, except that the control’s border is changing when the mouse is hovering over it. This is because of css styles targeting the hover event specially, so we cannot just turn this off directly using jQuery. The workaround is to set the styles explicitly in an onmouseover event:

First we extract the outer div of the control and attach an event for mouseover:

var userDiv = $("div.sp-peoplepicker-topLevel[title='SharePoint Bruker']")[0];
$(userDiv).mouseover(function() { SharePointUserOnMouseover() });

The event handler itself is implemented like this :

    function SharePointUserOnMouseover() {
  // override the .sp-peoplepicker-topLevel:hover class
  var userDiv = $("div.sp-peoplepicker-topLevel[title='SharePoint Bruker']")[0];
  $(userDiv).css("color", "#1c4269");
  $(userDiv).css("border-top-color", "#d8dfe0");
  $(userDiv).css("border-right-color", "#d8dfe0");
  $(userDiv).css("border-bottom-color", "#d8dfe0");
  $(userDiv).css("border-left-color", "#d8dfe0");

  var userLink = $("[id^='SharePoint_x0020_Bruker']");
  $(userLink).css("color", "#99a8ad");  // the link inside the control

There are several weaknesses of this solution, I know. There are hard codings both for control name and colors, and it might not work correctly across themes. Still, it works quite nicely for me on a form with one people picker control, and it should be able to modify the solution to work in a more complex scenario as well.

Print posted @ Sunday, February 2, 2014 2:37 PM

This article is part of the GWB Archives. Original Author: Thorvald Bøe

Related Posts