SharePoint Tip: Selectively Showing/Hiding Columns in a SharePoint list

• A list with columns for modifying the "newform.aspx" and "editform.aspx" pages attached to the list with the needed javascript.
• 2 hidden Content Editor Webparts (CEWP) to hold the javascript.

Procedure

Create a blank list for the new team site requests on the desired site, and add your columns including those columns which need to be hidden from the users at runtime (in this demo I will be using my "autopopulate" list as the example). Open the “newform.aspx” page attached to this list by clicking on "Default New Form", which is found under "List Tools" - "List" - "Modify Form Webparts" on the ribbon menu.

So, click on "Add a Web Part" so that we can add a "Content Editor" web part to the form. This is where our javascript code will go instructing sharepoint to hide the columns of our choice.

Open your windows notepad (if you really want to use a proper tool, I can highly recommend notepad++. Get it here), and just copy&paste the following code:

 ___________________

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

<!--

// This is custom functionality that hides selected columns in the a list.

_spBodyOnLoadFunctionNames.push("hideFields");

function findacontrol(FieldName) {

   var arr = document.getElementsByTagName("!");

   // get all comments

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

   {

      // now match the field name

      if (arr[i].innerHTML.indexOf(FieldName) > 0)

      {         return arr[i];      }

   }

}

function hideFields() {

   var control = findacontrol("Business Unit");

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

   control = findacontrol("Department");

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

   control = findacontrol("Phone");

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

   control = findacontrol("E-mail");

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

}

//end custom functionality-->

</script>

_______________________

This script goes through all the columns on the list and when it finds those that have been specified, it changes their status to display=”none”. In the script above you can see that the fields that should not be visible to the user are “Business Unit”, “Department”, "Phone", and “E-mail”. The advantage of using this script is that the actual column names can be used, so no extra item IDs need to be found. If more columns need to be hidden then just add an extra

control = findacontrol("<!-- column name here between the quote marks -->");

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

for each column. After checking that all columns names have been added, save the document and call it "hidecolumns.txt". Close the document and upload it to "Site Assets".

Now, go to your hidden content editor webpart and at the top of the edit menu you can find the "Content link" field. Enter the path to the "hidecolumns.txt" you have just uploaded. It will look something like: /sites/[Your site name]/SiteAssets/hidecolumns.txt.

Click "OK", and then "Stop Editing". Now the "Business  Unit" (and the others specified before) column should be gone from the form when the user clicks on "add new item". Repeat the process above for the "Default Edit Form" (editform.aspx), and you are all done!

Conclusion

This demo was to show how to selectively hide columns from the different form attached to a list by using simple javascript within a hidden Content Editor web part. All of the work done was completed by using OOTB sharepoint and, other than the javascript, no custom coding was needed. Sharepoint 2010 made this process easier by allowing direct access to the newform.aspx and editform.aspx, which in MOSS 2007 were only available via SharePoint Designer.