Hide columns in List forms

Some times, where there is a list having many columns. We want to display only selected columns in Newform.aspx and Editform.aspx. Here is the simple way to achieve it by using Javascript.

Go to Newform.aspx and by clicking Site Actions Button, you can see that, Edit Page option is not available. There is a small work around for this to make the page editable.

Go to the address bar where the url is like /Lists/<ListName>/Newform.aspx

Append the url with ?toolpaneview=2 i.e now the url becomes

/Lists/<ListName>/Newform.aspx?toolpaneview=2.  and click enter.

Now the page will be in editable format and you can add additional Webparts to it.

Add a CEWP and edit the source and include the following script

<script language="javascript" type="text/javascript">_spBodyOnLoadFunctionNames.push("hideFields");function hideFields()

{

   var control = getTagFromIdentifierAndTitle("Input","TextField",<column 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>

The script above will hide the column with name specified as a third argument.

The first argument for the function getTagFromIdentifierAndTitle is the type of control, second one states the field type of Sharepoint.

As per the above example the column which is made hidden is of Type Single line of text. The control rendered would be a html input control and the field type is Text Field.

The control would be found by this function. But as we have to hide the entire row, we will reach the <tr> element by accessing the parentNode for the control.

Usually in the list form, if you observe the source of the page, the controls are rendered as follows

<TR>

         <TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">

         <nobr>Tag No</nobr>

</H3></TD>

         <TD valign="top" class="ms-formbody" width="400px">

         <!-- FieldName="Tag No"

                 FieldInternalName="TagNo"

                 FieldType="SPFieldText"

           -->

                <span dir="none">

         <input name="ctl00$m$g_d9e24359_564a_4eef_941e_b15de04de81f$ctl00$ctl04$ctl00$ctl00$ctl00$ctl04$ctl00$ctl00$TextField" type="text" maxlength="255" id="ctl00_m_g_d9e24359_564a_4eef_941e_b15de04de81f_ctl00_ctl04_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" title="Tag No" class="ms-long" /><br>

</span>

               

               

         </TD>

</TR>

The control is embed inside a Span tag and which is inside the <TD> element.

There fore in order to reach the <tr> element, we have to go 3 levels up.

control.parentNode.parentNode.parentNode this point to the entire row. and now we can make it hidden.

Find below the list of the controls rendered for different field types of Sharepoint

Single Line of Text	TextField	input
Multiple Lines of Text	TextField	input
Number	TextField	input
Currency	TextField	input
Choice (dropdown)	DropDownChoice	select
Lookup (single)*	Lookup	select
Lookup (multiple)	SelectCandidate; SelectResult	select
Yes/No	BooleanField	input

Like wise you can hide other controls also.

But the rendering of each field type differs.

For e.g take a Multiple lines of text column. This renders as text area but the emdedding would be as follows

<TR>

  <TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">

      <nobr>Comments</nobr>

    </H3></TD>

<TD valign="top" class="ms-formbody" width="400px">

    <span dir="none">

<span dir="ltr">

        <textarea name="" rows="6" cols="20" id="" title="Comments" class="ms-long" dir="none">

        </textarea>

</span>

</span>

</TD>

</TR>

The text area embeds inside 2 span tags there fore we have to add an additional parentNode element to access the entire row. Now it becomes as follows

var control = getTagFromIdentifierAndTitle("Input","TextField","Comments");
 control.parentNode.parentNode.parentNode.parentNode.style.display="none";

Will come up with another series for other types and the display form.

Happy coding!!