Tuesday, February 2, 2010

Hide People Picker control in SharePoint List Forms

I am working on a project that requires the SharePoint OOB "People Picker" control to be hidden in a List Form Page. In my case, this control was in the "NewForm.aspx" page. But you can use the same code for hiding this control in the "EditForm.aspx" page as well.

I used the following online resources to figure out the JavaScript code to hide the "People Picker" control:

http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

http://www.cleverworkarounds.com/2008/02/07/more-sharepoint-branding-customisation-using-javascript-part-1/

Here is the JavaScript code. Insert this code in the "Source Editor..." window in a Content Editor Web Part.

IMPORTANT: Insert the JavaScript OR operator () after the identifier == "" portion in the
if() statement in the getTagFromIdentifierAndTitle() function below. For some odd reason the OR operator gets removed whenever I publish the post.

<script language="javascript" type="text/javascript">

_spBodyOnLoadFunctionNames.push("hideFields");

function hideFields() {

var control = getTagFromIdentifierAndTitle("Textarea","UserField_downlevelTextBox","People Picker");

control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";

}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{

var len = identifier.length;

var tags = document.getElementsByTagName(tagName);

for (var i=0; i < tags.length; i++)

{

var tempString = tags[i].id;

if (tags[i].title == title && (identifier == "" tempString.indexOf(identifier) == tempString.length - len))

{

return tags[i];

}

}

return null;

}

</script>

NOTE: The "People Picker" control was embedded 12 levels "deep" from the <tr> tag in my NewForm.aspx, and hence I had to use the code in the hideFields() function with 12 "parent" references. I used the awesome Firebug tool to view this hierarchy and to also find out the elusive tagName, identifier, and title info for the People Picker control. The Firebug tool is a FireFox browser addon, and is incredibly helpful when you need to look at raw HTML and JavaScript code that renders SharePoint pages.

8 comments:

Neil said...

Great! This hides the people picker field for me.

I have multiple people picker fields on the same form. How do I differentiate these various people picker fields to hide a specific one.

Neil said...
This comment has been removed by the author.
Haresh Purohit said...

Hello Kiran,

I am doing some validation on the people picker values and I have multiple people picker fields on the same form.

How do I differentiate these various people picker fields to validate a specific one.

Thanks in Advance

Haresh

Rudy said...

I need same functionality with radio buttons , I tried with your concept but it's hiding all the contents

Yogendra Rawat said...

Hi Kiran,

I tried the same code in 2013 but it is not working. i am using a simple method to hide a people picker, it works fine but if there is any value in people picker, it gives me invalid argument error.

Could you please help me

aparna john said...

Hi,One of the next things we need to consider is, how easy is it to manipulate. Depending on the type of HTML editor in Web Design Cochin you are using the web page design templates you are trying to use could be very easy to work with or downright impossible.Thanks.....

lee woo said...

Acting deals with very delicate emotions. It is not putting up a mask. Each time an actor acts he
does not hide; he exposes himself. See the link below for more info.


#hide
www.ufgop.org

Silvia Jacinto said...

Life is full of many challenges. Challenges that will make you or break you depending on how you handle it. Visit my site for more updates. God Bless to your site.

n8fan.net

www.n8fan.net