Categories

How to Hide Fields on a SharePoint Form

How to Hide Fields on a SharePoint Form

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

  1. Navigate to your SharePoint list.
  2. In your browser url, replace AllItems.aspx with the name of the form (default forms are NewForm.aspx, EditForm.aspx, and DispForm.aspx).
  3. Click the Gear icon in the top right, then “Edit Page”.
  4. Click “Add a Web Part”.
  5. Under “Categories”, select “Media and Content”.
  6. Under “Parts”, select “Script Editor”.
  7. On the new Webpart, click “Edit Snippet”.
  8. Copy the code from above, and paste the contents into the dialog.
  9. Edit the 5th line with the fields you want to hide on this form.
  10. Click “Insert”.
  11. In the top left, click “Page”, then “Stop Editing”.
  12. Your fields should now be hidden from view.

SharePoint 2010

  1. Navigate to your SharePoint list.
  2. In your browser URL, replace AllItems.aspx with the name of the form (default forms are NewForm.aspx, EditForm.aspx, and DispForm.aspx).
  3. Click the “Site Actions” in the top left, then “Edit Page”.
  4. Click “Add a Web Part”.
  5. Under “Categories”, select “Media and Content”.
  6. Under “Parts”, select “Content Editor”.
  7. On the new Webpart, click “Click here to add new content”.
  8. In the “Editing Tools” ribbon section, click “Format Text”.
  9. In the “Markup” section, click “HTML”, then click “Edit HTML Source”.
  10. Copy the code from above, and paste the contents into the dialog.
  11. Edit the 5th line with the fields you want to hide on this form.
  12. Click “OK”.
  13. In the top left, click “Page”, then “Stop Editing”.
  14. Your fields should now be hidden from view.

Learn more about DMC's SharePoint services.

Comments

CD
# CD
Anyone finding this that can't get it to work on the "new interface" of SharePoint Online you may need to change line 8 from h3.ms-standardheader to span.ms-standardheader as the fields was changed.
Curtis Weir
# Curtis Weir
@aj On line 23, replace with:
$(currentRow).find('input').attr('disabled', true)
This should make the field grayed out for the user.

@Mohammed I am having trouble understanding your question. Do you mean hiding columns on a list view? You can simply edit the view (List -> Modify View) and then uncheck the columns.
Mohammed Atharudin
# Mohammed Atharudin
Greetings Curtis!

Firstly I'd like to thank for this tutorial.

Am I anticipating your support for a similar topic it's related to the above code, how would I hide multiple list columns. your response is more valuable to me.
aj
# aj
this is awesome! may I also know what's the function to be used to "make a few fields read only" on the edit form?
Vlad
# Vlad
#Mandy. the most probable issue I can think of is that the fields you hide through this script are marked as required in the content type or through another script or through column validation. Any of these 3 will make the column required and because you cannot see it in the editform.aspx to actually insert a value in it, the system will not let you save. The easiest workaround I can think of is to give the columns a default value.

#Laura. Not sure about your issue. Maybe there is a conflict in the system caused by 2 instances of your id trying to modify it in the same time?

#Mike. Maybe try something like


function AddToBody (){
$("div[title='YourField']").hide();
}


or


function AddToBody (){
$("input[title='YourField']").attr("readonly","true").css('background-color','#F6F6F6');

$("select[title='YourField']").attr("disabled","true").css('background-color','#F6F6F6');


"""Note: if your field is required in the title = 'YourField' add Required Field like so:
$("select[title='YourField Required Field']").attr("disabled","true").css('background-color','#F6F6F6');


PS: an useful tool to establish wether you use select/input/textarea/div,etc at the beginning is F12. Us CTRL+B to select the desired element on the page and it will display the code behind so you can see what to use.

Hope this helps.
}
Mike
# Mike
This doesn't seem to work for me. SharePoint via Office365 (so https://mysite.sharepoint.com/Lists/ListName/NewForm.aspx).

Seems to have no impact when tested in IE11, Edge, Firefox, or Chrome.

All columns were created in SharePoint. My suspicion is that the real field name isn't what it's labeled (for example, my field is "ParentID" but I suspect it's something else like "ParentID_x000123"). I just can't find it on the form when looking at it via SharePoint Designer, either.

Suggestions?

Laura
# Laura
Thanks for the input!!! so if you hide a custom field from the editform.aspx form and you hit the save button will the save button ignore that field as well? not try and save its contents? The reason i ask is because i have code I added to the editform.aspx file that updates 2 custom fields and it works great. when I cancel our of the form they are are updated. But when I hit save button I get an error saying the the document has already been updated by id(llmart2) ...etc...
Abhiroop
# Abhiroop
Awesome man !
Moon
There is also a good tool to hide and show fields based on other factors, check it out:
https://youtu.be/iYLykVy4s00
Mandy
# Mandy
This worked great! Except I ran into an issue. At first it seemed to work when I added an additional field but when someone tried to save the form, it wouldn't let them. Then I tried to start from scratch. With 4 fields, like I had originally done, it wouldn't hide any of them but would work with 3 fields. Thoughts on what might be going on? If I can get this to work, this will be such an awesome fix!
Vlad
# Vlad
Greetings Curtis!

Thank you very much for this great tutorial.

May I seek your help on a similar topic? Based on the above code's logic, how would a statement to add a bottom-border of 2px solid black look like after matching the SharePoint field name to our field name?
(I am a newb in web tech and have many restrictions so I need to make this work within the script editor)

Thanks again!
David
# David
THANKS!
The cleanest simplest method I found and going in my permanent toolbox. thanks.
Pieter van der Poort
# Pieter van der Poort
Works like a charm! Thanks!

Post a comment

Name (required)

Email (required)

CAPTCHA image
Enter the code shown above:

Categories

Related Blog Posts