Wednesday, 2 November 2011

Hiding fields in NewForm.aspx

Sometimes you may want to set a field in a SharePoint 2007 list to pre-populate with a default value. However, SP still allows your site visitors to alter the value via the New Item form. For example, when I want to capture data supplied by the visitor, but I know only admin staff will be looking at the data, I'll often assign the default value of "Edit Details" to the Title field, so that admin staff know to click on the "Edit Details" hyperlink to see details of that List row.

One answer is to edit the NewForm.aspx page so that the Title field is not displayed. That way site visitors can't change the pre-set default value for the field.

Here's how ...

1. Open SharePoint Designer and navigate to the site that contains the list or document library you wish to customize.

2. Expand the folder named “Forms” under the desired list or document library. You should see about four .aspx pages (AllItems.aspx, EditForm.aspx, NewForm.aspx, etc)


Edit the NewForm.aspx file, and add the Javascript directly ...
3. Check out and open the NewForm.aspx page and switch to the “code” view to edit the HTML of the page.

4. Paste this JavaScript code immediately below the the following HTML tag (usually line 14):
 <asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”> 

<script language="javascript" type="text/javascript">
_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("Title");
   control.parentNode.parentNode.style.display="none";
   control = findacontrol("Document Link");
   control.parentNode.parentNode.style.display="none";
   control = findacontrol("PublishDate");
   control.parentNode.parentNode.style.display="none";

}
</script>


This will add the JavaScript to the HTML inside the content placeholder tag. 
Note: be sure to include the entire script above, including the <script> and </script> tags.


5. Modify the “hidefields()” section of the JavaScript code to refer to each SharePoint list field name to hide.  For example, the code sample above will hide the SharePoint fields named Title, Document Link, and PublishDate.  Notice that you do not need to worry about internal field names or field types like other JavaScript techniques, you simply need to know the name of the field.

6. Save the changes and check the page back in.  Select “Yes” when prompted to “… customize the page from the site definition …”

7. Test the form

Please note - this method doesn't work for SharePoint Online/2013/2016.

If you're using SP Online, you'd need to add a different JavaScript function.

Try this:

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

$(document).ready(function() {

   {
    $('nobr:contains("Title")').closest('tr').hide();
    $('nobr:contains("Document Link")').closest('tr').hide();
    $('nobr:contains("PublishDate")').closest('tr').hide();
   }

});

</script>

You can add a SharePoint 2016 Script Editor Web Part to the List Form page to hold the above JavaScript ... it's less cumbersome than planting the script in Site Assets and referencing it with a Content Editor Web Part. 

Hope this helps someone.




4 comments:

  1. Sorry, this doesn't seem to work, at least when putting it in a CEWP. Of course, I'm using SP2013, but it should still work, right?

    ReplyDelete
  2. There's no CEWP in this method. You open the NewForm.aspx page in SP Designer and paste the JavaScript into the code directly .... pretty sure you won't be able to do this if you don't have SP Designer access.

    ReplyDelete
  3. This did not work with me in SharePoint 2007 either.

    ReplyDelete
    Replies
    1. No ... well, it wouldn't unless you're using SharePoint Designer.

      Delete