Hide fields from SharePoint List Forms

Some time we got the requirement to hide few fields from a SharePoint list form but do not want to remove them from the list, some list columns used in different content types and we cannot hide them through column properties.

Most of the time we need this in task forms to hide or disable few fields from users and also on Document Sets where user do not want to have Document set metadata fields on document edit form.

In this article, I will be sharing a jQuery script which you can use to hide fields from Display and edit forms (even you can use it in add form).

The list form generates fields markup and assign ID dynamically which you cannot get directly by Element ID or Element Name properties. You need to get it using jQuery select attributes like Attribute Contains Selector [name*=”value”], or Attribute Contains Word Selector [name~=”value”] or Attribute Ends With Selector [name$=”value”].

I am taking example of a list form of a task form to hide few fields from display form and also from edit for using jQuery and CSS.

Hiding fields on Display Form

Go to task list and click on a task list item which will show you the task display form with item detail. Below is the picture of Task display form, I am going to hide the “Start Date”, “See also”, “%Complete” and “Related Items” fields from the display using custom CSS and jQuery.

SharePoint View form

Click on the Gear icon on top right and click Edit to edit this page.

SharePoint Edit Page

Click on Add a web part button and add a script editor web part to the page.

SharePoint Add Script Editor Web Part

Custom JavaScript to hide fields from page

Click EDIT SNIPPET link to add the custom script, add below script in script editor under <script> tag. You can also create a function and execute the function at end. (download script file from GitHub)

Css to hide See Aslo

Add below css on the script editor under style tag.

Save the changes on the page, it will take you to the all item page of list. Reopen the list display form by clicking on list item and you will see the difference as shown in below image.

SharePoint View form after hiding fields

Hiding Fields from Edit Form

The edit form having different form structure as it has form controls like input, drop down and buttons. In below form, you can see few fields which I am going to hide using JavaScript.

SharePoint Edit Form

Follow the similar steps as define above to add the script editor web part, below is JavaScript which can be used to hide the form fields. (download script file from GitHub)

If you check the script, it going to hide “Start Date”, “% Complete”, “Predecessors”, “Task Outcome“ and “Content Type” field from the form. You can see the hidden fields in below form.

SharePoint Edit form after hiding fields

 Hiding fields in Document Sets

This is also one of the requirements for most of customers that document should show the metadata fields of document set but hide them on the document Edit form, use the above mentioned script to hide the fields document edit form in a document set.

The following two tabs change content below.
Adnan Amin
Adnan is two time SharePoint MVP (Most Valuable Professional) with over 12 years of extensive experience with major expertise on SharePoint Server, Office 365, .Net Platform and Microsoft BI. He is currently working SharePoint Architect at FMT Consultants. He is MCT Regional Lead for Pakistan Chapter since 2012. He is working on SharePoint for past nine years and worked on different intranet/intranet solutions for private & govt. sector majorly in Gulf region, which include OOB and customized solutions. He is a trainer, technology evangelist and also speaks in community forums.

One Comment

  1. Pingback: Serverless Cloud = Physical Servers?; Hide Fields from SharePoint List Forms; VMware for Office 365 Mobile App Management

Leave a Reply

Your email address will not be published. Required fields are marked *