Hiding fields in a SharePoint form can be tedious, or sometimes not even possible using out-of-the-box features. One common solution is to modify the forms in SharePoint Designer. However, this takes time and is prone to user error.
A simpler solution is to use Javascript & jQuery, and the following code outlines how to hide any field on your SharePoint form. If you are unfamiliar with Javascript, no problem! Just edit the fieldsToHide line with whatever fields you wish to hide. Separate fields using commas, and surround each field with quotations.
If you would like to understand how the code works in detail, read the following section. If not, skip to Adding the Code to Your SharePoint Site.
The Code
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
function HideFields() {
//Enter the fields you would like to hide here.
fieldsToHide = ["Enter", "Field Names", "Here"];
//Get all SharePoint fields
var formFieldTitles = $(".ms-formtable td.ms-formlabel h3.ms-standardheader");
//Iterate over each row in the form
formFieldTitles.each(function () {
//Get the text of the field title
var textToMatch = $(this).text();
//Get the table row associated with this title
var currentRow = $(this).closest('tr');
//Iterate over our list of fields we wish to hide
for (var i = 0; i < fieldsToHide.length; i++){
var field = fieldsToHide[i];
//Match the SharePoint field name to our field name
if (textToMatch.toLowerCase().replace("*", "").trim() === field.toLowerCase().replace("*", "").trim()){
//Hide this field
$(currentRow).hide();
}
}
});
}
function AddToBodyOnLoad(){
//Ensure that our function is called last by pushing it again
_spBodyOnLoadFunctionNames.push("HideFields");
}
//Add our function to the array of onload functions
_spBodyOnLoadFunctionNames.push("AddToBodyOnLoad");
</script>
The first line imports the jQuery library, which makes it easier to select and hide elements on a page. To learn more about jQuery, visit their official website.
The first line in HideFields() defines which fields we are going to hide. This is the line that you should change to match the fields on your form, and add additional fields if desired.
The AddToBodyOnLoad() function forces our function to be loaded last on the page. This ensures that the fields have been created and are viewable in the DOM.
The HideFields() function iterates over each field on the form, then iterates over each field in our list of fields we want to hide. If there’s a match, the entire row is hidden from view. Unfortunately, we cannot remove this row from the DOM, since there will be unintended side-effects, and SharePoint will not be able to save the list item.
Adding the Code to Your SharePoint Site
SharePoint 2013 & Office 365
- Navigate to your SharePoint list.
- In your browser url, replace AllItems.aspx with the name of the form (default forms are NewForm.aspx, EditForm.aspx, and DispForm.aspx).
- Click the Gear icon in the top right, then “Edit Page”.
- Click “Add a Web Part”.
- Under “Categories”, select “Media and Content”.
- Under “Parts”, select “Script Editor”.
- On the new Webpart, click “Edit Snippet”.
- Copy the code from above, and paste the contents into the dialog.
- Edit the 5th line with the fields you want to hide on this form.
- Click “Insert”.
- In the top left, click “Page”, then “Stop Editing”.
- Your fields should now be hidden from view.
SharePoint 2010
- Navigate to your SharePoint list.
- In your browser URL, replace AllItems.aspx with the name of the form (default forms are NewForm.aspx, EditForm.aspx, and DispForm.aspx).
- Click the “Site Actions” in the top left, then “Edit Page”.
- Click “Add a Web Part”.
- Under “Categories”, select “Media and Content”.
- Under “Parts”, select “Content Editor”.
- On the new Webpart, click “Click here to add new content”.
- In the “Editing Tools” ribbon section, click “Format Text”.
- In the “Markup” section, click “HTML”, then click “Edit HTML Source”.
- Copy the code from above, and paste the contents into the dialog.
- Edit the 5th line with the fields you want to hide on this form.
- Click “OK”.
- In the top left, click “Page”, then “Stop Editing”.
- Your fields should now be hidden from view.
Learn more about DMC's SharePoint services.
Contact us for SharePoint consulting.