SharePoint Modern Hide Filter Headers

Question

Hello Community!

I am working in SharePoint Online Modern and I have a Custom View formatted with JSON displayed in an Embed Web Part. The view works fine except for one thing, once a filter is applied it shows the "Filter Headers" or the items as shown below:

Here is my Embed Code:

<iframe width="50%" height="50%" src="https://nmgov.sharepoint.com/sites/IDEABGrant/Lists/Districts/Web%20Part%203.aspx?FilterField1=ID&FilterValue1=[$ID]&FilterType1=Text&viewid=151b4afe%2D0657%2D4f42%2D92f1%2Df2aaa4b506ce" frameborder="3">

</iframe>

Here is my JSON View Code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "__comment": "DIV 1",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            },
            "txtContent": "='District: ' + [$District]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            },
            "txtContent": "='District Code: ' + [$DistrictCode]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            },
            "txtContent": "='District Type: ' + [$DistrictType]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            },
            "txtContent": "='Display Name: ' + [$DisplayName]"
          }
        ]
      }
    ]
  }
}

I have tried query string add on like "env=Embedded", and "env=WebView", but they don't work.

I thought the JSON "'hideColumnHeader': true" would work, but it did not, the header is hidden, but not the filter header.

Has anyone managed to accomplish this? If so, please provide guidance and examples.

Thanks!

Tom

Answer 1

Hi @Tom Molskow,

Do you want the user to hide the filtering part when using a certain View?

Please try using the spfx extension to change its style to none.

Here is a test for your reference:

Before using the SPFX extension, we need to configure the environment:

Please refer to the link below to create in order:

References:
Setup Environment: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
Build an extension: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-exte...

Then arrive at the sharepoint page, press F12, open the developer mode, we need to find the class of the part in the page

Here is code:

This will use the setAttribute method to set the element's style attribute to "display: none;", thus hiding the .od-filtersHeader element. to perform styling operations when the page loads and the element becomes available.

 const canEdit = this.context.pageContext.web.permissions.hasAnyPermissions(SPPermission.manageWeb);
//Obtain permissions, and then judge, if the user does not have editing permissions, the part is display
    if (canEdit) {
      setInterval(() => {
        const element = document.querySelector(".od-filtersHeader") as HTMLElement;
        if (element) {
          element.setAttribute("style", "display: none;"); // set  style  "display: none;"
        }
      }, 100);
    }

Here is result:

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng