Hide a field from NewForm.aspx

Updated (18/03/2008): There’s an extended custom web part made by Paul that does the same thing and much more. You can start reading from here.
I was faced with this problem lately: you have a optional field in your list that you’d like to leave hidden from the user (it’s used for workflow status keeping).
The first solution is to customize NewForm.aspx from SharePoint Designer and replace the default list form with Custom List Form, in which you can remove the fields you don’t need. The inconvenience is that you lose the ability to attach files to the list item. As I had to attach files to the list, this option was unacceptable.
Fortunately, there is another way to hide a field. You can customize NewForm.aspx and add a JavaScript code that hides the whole row the field is placed. I used the code snippet from SharePoint Designer blog and I came out with this small code block, to be placed on NewForm.aspx (or EditForm.aspx, as you wish).
You have to replace these fields (see the SPD blog entry for more information):

  • TAGNAME: HTML element that is being rendered ("SELECT", "INPUT"…)
  • IDENTIFIER: SharePoint field type identifier ("TextField", "DropDownChoice"…)
  • FIELD NAME: Display name of the field (e.g. "Status", "Customer Name"…)

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

_spBodyOnLoadFunctionNames.push("hideFields");

function hideFields() {

var control = getTagFromIdentifierAndTitle("TAGNAME","IDENTIFIER","FIELD NAME");

control.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>

(http://edinkapic.blogspot.com/2007/08/hide-field-from-newformaspx.html)

One Response

  1. Working with a Tasks list, I want to hide the Due Date, Start Date, Description and Assigned To fields. What code can I add to hide these fields? var control = getTagFromIdentifierAndTitle("SELECT","TextField","Due Date"); control.parentNode.parentNode.parentNode.style.display="none"; var control = getTagFromIdentifierAndTitle("SELECT","TextField","Start Date"); control.parentNode.parentNode.parentNode.style.display="none"; var control = getTagFromIdentifierAndTitle("TEXTAREA","TextField","Description"); control.parentNode.parentNode.parentNode.style.display="none";var control = getTagFromIdentifierAndTitle("SELECT","TextField","Assigned To"); control.parentNode.parentNode.parentNode.style.display="none";

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: