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.

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

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

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)

var arrFields = ["PercentComplete", "SPBookmark_PercentComplete", "SPBookmark_Predecessors", "SPBookmark_Priority", "SPBookmark_TaskOutcome"];
for (var i = 0; i < arrFields.length; i++) {
    try {
        var element = "";
        $('a[name=' + arrFields[i] + ']').closest('tr').hide();
    }
    catch (err) {
        Console.log(err.message)
    }
}
$("a[id*='add_related_items']").each(function (i, el) {
    try {
        $(this).parent().hide()
    }
    catch (err) {
        Console.log(err.message)
    }
});

Css to hide See Aslo

Add below css on the script editor under style tag.

.ms-recommendations-panel {
        display: none !important;
    }

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.

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.

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)

var arrFields = ["PercentComplete", "StartDate", "Predecessors", "TaskOutcome"];
for (var i = 0; i < arrFields.length; i++) {

    try {
        var element = "";
        //$('a[name=' + arrFields[i] + ']').closest('tr').hide();
        $('#' + arrFields[i]).closest('tr').hide();
    }
    catch (err) {
        // alert(err.message)
    }
}
$("select[id*='ContentTypeChoice']").each(function (i, el) {
    try {
        $(this).closest('tr').hide();
        return;
    }
    catch (err) {
        //alert(err.message)
    }

});

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.

 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.