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)

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.

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)

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.

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.

Adnan, a distinguished professional, boasts an impressive track record as a Microsoft MVP, having achieved this prestigious recognition for the eighth consecutive year since 2015. With an extensive career spanning over 18 years, Adnan has honed his expertise in various domains, notably excelling in SharePoint, Microsoft 365, Microsoft Teams, the .Net Platform, and Microsoft BI. Presently, he holds the esteemed position of Senior Microsoft Consultant at Olive + Goose. Notably, Adnan served as the MCT Regional Lead for the Pakistan Chapter from 2012 to 2017, showcasing his leadership and commitment to fostering growth within the tech community. His journey in the realm of SharePoint spans 14 years, during which he has undertaken diverse projects involving both intranet and internet solutions for both private and government sectors. His impact has transcended geographical boundaries, leaving a mark on projects in the United States and the Gulf region, often collaborating with Fortune 500 companies. Beyond his roles, Adnan is a dedicated educator, sharing his insights and knowledge as a trainer. He also passionately advocates for technology, frequently engaging with the community through speaking engagements in various forums. His multifaceted contributions exemplify his dedication to the tech field and his role in driving its evolution.

Leave a Reply

One reply on “Hide fields from SharePoint List Forms”