Geeks With Blogs
Thorvald Bøe
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.

Posted on Sunday, February 2, 2014 2:37 PM jquery , sharepoint | Back to top

Comments on this post: Disable a people picker field in SharePoint 2013 with jQuery

# re: Disable a people picker field in SharePoint 2013 with jQuery
Requesting Gravatar...
Regarding security issues, this solution is even worse than not having it because it gives the admin a false feeling that it' "fixed" but because it's "fixed" only on client side simply using Firebug (or similar tool) the user can remove the property "disabled" and modify the field.
It would be safer to create a Custom Form and simply parse the data to a label, so no input field is created.
Left by Deimos on Aug 19, 2014 10:51 AM

# re: Disable a people picker field in SharePoint 2013 with jQuery
Requesting Gravatar...
Deimos, thanks for Your input.
I agree that from a Security standpoint, this solution is in no way secure, but that was not really the point either. To describe all aspects of this was not the Scope of this post, but there are scenarios where convenience and cost will outweigh Security (like this scenario was). A custom form would be more secure, but that alone would not be completely secure either, as the Security is only tied to the form, not to the underlying list. If you could Access the underlying list by other channels (e.g. SharePoint designer or the REST api) there would be no mechanisms to prevent a user from changing the data.
In this scenario the most convenient solution was to hide the possibility to change user on the Client side - signaling to the user what the desired behaviour is. Yes, you could override this With firebug, but in reality, nobody would do that. And if they did, there would be no real harm. And if it did any harm, we could consider stronger Security mechanisms to address the problem, but that's a long string of if's that in reality doesn't make a basis for a costly implementation.
Left by Thorvald on Aug 20, 2014 11:51 AM

# re: Disable a people picker field in SharePoint 2013 with jQuery
Requesting Gravatar...
i have issue with people picker , while reset to default values , for name field i want to provide hyperlink with 'x' when we click on the 'x' it's get clear
Left by surendrap on Jan 19, 2015 7:48 AM

# re: Disable a people picker field in SharePoint 2013 with jQuery
Requesting Gravatar...
I am not quite sure if I understand what you mean, surendrap.
In my solution, I hid the 'x' completely to disable the people picker.
If the 'x' is showing, it will clear the people picker field when clicked. If you want to change this behaviour, you are probably looking to remove the existing event handler and replacing it with your own. I am not sure if that is possible. A workaround might be to hide the x, and inject your own identical image, with your own events attached to it.
Left by Thorvald on Feb 18, 2015 10:43 AM

# re: Disable a people picker field in SharePoint 2013 with jQuery
Requesting Gravatar...
Thank you for taking the time to write up this solution. Currently, I am looking to use this, but a little differently. We want to force the user to use the People chooser without being able to type anything into the field. We would like them to click on the booklet next to the field to fine their names. How would this be accomplished?
Also, when using jQuery in a new NewForm, where would I place the jQuery? Could you write out exactly what I would need to place in the "Edit File In Advanced Mode" and where exactly it should be placed?
Thank you
Left by Caleb on Jun 04, 2015 8:54 PM

# re: Disable a people picker field in SharePoint 2013 with jQuery
Requesting Gravatar...
as you might know, there is no booklet symbol next to a SharePoint 2013 person field in a standard edit/new form. I think in order to accomplish this, you are looking at a full custom solution. I would first consider if this is really a requirement, or if you could do it some other way (e.g. by developing an app). But if you need it to work exactly like this in a standard new/edit form, try this:
1.Define the field as a standard single line text field
2.Use jQuery to add a booklet icon next to the field
3.Add a click handler to the icon
4.In the click handler, launch a custom dialog using e.g. jQuery UI or another suitable framework of your choice
5.From there, it is a matter of implementing the custom dialog using REST and jQuery to search for and select people from SharePoint
6.When a person is selected, close the form and enter the name in the text field

In order to add jQuery to a new/edit form, you need to customize the form by selecting "form web parts" from the list menu, add a content editor web part to the form, and refer to a custom html file that you add using SharePoint designer.

As a warning, in order to accomplish this you will need a variety of skills in both SharePoint, REST, jQuery and general programming. But I am confident it can be done this way.
Left by Thorvald on Jun 10, 2015 2:28 PM

# re: Disable a people picker field in SharePoint 2013 with jQuery
Requesting Gravatar...
I had the same issue as Surendrap had. This had to do with the time when the Jquery was executed. Don't use the code inside $(document).ready(function() {} Try to call the code using _spBodyOnLoadFunctionNames.push("myFunction"); instead. This fixed the problem for me
Left by Sandro on Jun 22, 2015 4:15 PM

Your comment:
 (will show your gravatar)

Copyright © Thorvald Bøe | Powered by: