Make People Picker field read-only with SPServices

Aug 8, 2012 at 5:58 PM

Hi Marc, all,

 I spent few days with finding and adapting your script example for set current user to specific people picker field, not for all people picker field on form.
  This is it:

<script language="javascript" src="/.../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script><script language="javascript" src="/..../Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript">
$(document).ready(function() {
 var userName = $().SPServices.SPGetCurrentUser({fieldName: "Title"});
 var searchText = RegExp("FieldName=\"field_name\"", "gi");
    $("td.ms-formbody").each(function() {
    if(searchText.test($(this).html())) {
    $(this).find("div[Title='People Picker']").html(userName);
    return false;
 }
   });
});</script>

My experience writing java-scripts not so good and language itself  is too heavy for debugging as for me.

I am found next example for disabling people picker field:

// put this next line in document ready or use _spBodyOnLoadFunctionNames.push("hideReqAuth");

hideReqAuth();

// I had 2 fields to hide, so I need to find them then hunt // through the HTML tags to disable the correct piecesfunction hideReqAuth() {
	var searchText = RegExp("FieldName=\"Business Requester\"", "gi");
	var searchText2 = RegExp("FieldName=\"Business Authoriser\"", "gi");
	
	//alert(searchText); //uncomment to check//alert(searchText2);// Loop through all of the ms-formbody table cells
	$("td.ms-formbody").each(function() {
	   // Check for the right commentif(searchText.test($(this).html()) ) {
	     $(this).find("a[Title='Check Names']").click();
	     $(this).find("div[Title='People Picker']").attr("disabled", "disabled");
	     $(this).find("a[Title='Browse']").attr("onclick", "");
	   }
	   if(searchText2.test($(this).html()) ) {
	     $(this).find("a[Title='Check Names']").click();
	     $(this).find("div[Title='People Picker']").attr("disabled", "disabled");
	     $(this).find("a[Title='Browse']").attr("onclick", "");
	
	     returnfalse;
	   }
	
	});
}

But i can not successfully merged it with my first example. I am trying next construction:

<script language="javascript" src="/../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script><script language="javascript" src="/.../Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript">

$(document).ready(function() 
{
 var userName = $().SPServices.SPGetCurrentUser({fieldName: "Title"});
 var searchText = RegExp("FieldName=\"field_name\"", "gi");
     $("td.ms-formbody").each(function() 
  {
    if(searchText.test($(this).html()))
    {
    $(this).find("div[Title='People Picker']").html(userName);return false;
	 $(this).find("a[Title='Check Names']").click();
	 $(this).find("div[Title='People Picker']").attr("disabled", "disabled");
	 $(this).find("a[Title='Browse']").attr("onclick", "");
    }
  }
);
});

</script>
Can I ask you to change this script to make the field read-only?

 

Aug 8, 2012 at 6:27 PM
Edited Aug 8, 2012 at 6:32 PM

So I think what you are trying to do is prepopulate a field in a form, then set the form to read only? This should work for a people picker field, and it should also work if there are multiple people pickers, you just need to supply the column display name.

var element=$("tr:contains("+columnDisplayName+"):last").find("div[title='People Picker']");
element.attr('disabled','true');

columnDisplayName is the name of the field that appears inside the form (USUALLY it is also the Display Name for the column/field). So for example if you had a people picker field called "Hockey Player" you would just need to replace columnDisplayName with a string = "Hockey Player"

One thing you NEED to make sure is to create a function called PreSaveAction(){} 

Inside that function you need something like this

var element=$("tr:contains("+columnDisplayName+"):last").find("div[title='People Picker']");
element.removeAttr('disabled');
return true;

The reason here is that the fields won't submit properly if you still have the field disabled. The 'return true' is probably not needed. PreSaveAction runs when you save or submit that form, if it returns true then the form submits, if it returns false then it will not submit. Usually people do error checking here such as improper dates, etc

Aug 9, 2012 at 11:07 AM
Edited Aug 9, 2012 at 12:08 PM

  Thanks for your answer. You are right. I want to prepopulate a field in a form, then set the form to read only. So now i know correct script for prepopulating specific People Picker field and know construction for disable it.

But, could i ask you about your recommendation for in what place i must insert your code for merging my first script and your script construction? 

It must be inserted of inside $(document).ready(function() or $("td.ms-formbody").each(function() functions or outside both of them?

Aug 9, 2012 at 6:14 PM

The first section of my code should go inside $(document).ready(function(){});

 

The second goes in a function that you need to create called PreSaveAction(){}

Aug 10, 2012 at 8:36 AM
Edited Aug 10, 2012 at 8:38 AM

I set first section of your code as showing below:

<script language="javascript" src="/.../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/.../Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {

var element=$("tr:contains("+field_name+"):last").find("div[title='People Picker']");
element.attr('disabled','true');  });

</script>
and also try field_name without "+" symbols:
<script language="javascript" src="/.../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/.../Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {

var element=$("tr:contains("field_name"):last").find("div[title='People Picker']");
element.attr('disabled','true');  });

</script>
Both variants not worked for me...
Aug 10, 2012 at 1:34 PM
Edited Aug 10, 2012 at 1:48 PM

This should work:

<script language="javascript" src="/.../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/.../Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
var field_name = "???";
var element=$("tr:contains("+field_name+"):last").find("div[title='People Picker']");
element.attr('disabled','true');  });

</script>

However, I need to ask where are you getting the variable "field_name" from? Where are you declaring and setting that variable? The variable, "field_name", should hold the name of your people picker field in it and I'm not seeing that being assigned anywhere. So if your field name for the people picker is "Employee" then "field_name" should be assigned to "Employee".

Also, is this script in a new form or edit form page or both? Either way I think you need to create a new function outside the $(document).ready and name it PreSaveAction 

function PreSaveAction(){
var element=$("tr:contains("+field_name+"):last").find("div[title='People Picker']");
element.removeAttr('disabled');
return true;
}
Alternatively, if you have only one people picker field on the form then you can use this jquery instead:
var element = $("div[title='People Picker']");
Aug 10, 2012 at 4:13 PM

Many thanks for your help. This script has created only for New Form. 

Now i can write correct script which auto-populate currently logged user to Owner field and then make this field Read-only. I also make read-only Star Date field with current date.

<script language="javascript" src="/.../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/.../Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() 
{
 $("input[Title='Start Date']").attr("disabled", "disabled");
 var userName = $().SPServices.SPGetCurrentUser({fieldName: "Title"});
 var searchText = RegExp("FieldName=\"Owner\"", "gi");
    $("td.ms-formbody").each(function() {
    if(searchText.test($(this).html())) 
       {
        $(this).find("div[Title='People Picker']").html(userName).attr('disabled','disabled');
        $(this).find("a[Title='Check Names']").click();
        $(this).find("a[Title='Browse']").attr("onclick","");
    
     return false;
	}
	  });
  
});

function PreSaveAction(){
var owner = "Owner"
var element=$("tr:contains("+owner+"):last").find("div[title='People Picker']");
element.removeAttr('disabled');
var element2=$("input[Title='Start Date']")
element2.removeAttr('disabled');

return true;
};</script>

Thanks