SharePoint Modern - Hide Style element in IFrame

Question

Hello community!

I am working in SharePoint Online Modern, with Embedded web parts which is connected to a source. When a source element is chosen as a filter the embedded display shows the filtered view. Problem is it also shows the command bar with filter select, etc. which I don't want:

I've tried to hide the toolbar by changing the div class visibility to hidden, and pass that in from the Iframe code as shown...

<iframe width="50%" height="50%" src="https://nmgov.sharepoint.com/sites/IDEABGrant/Lists/LEAAnalysisPlans/AllItems.aspx?FilterField1=LEAID&FilterValue1=[$ID]&FilterType1=Text&viewid=d4f24387%2D4193%2D4263%2D8246%2D34563f60d99f&env=Embedded" frameborder="3" style="'.root-40 button {visibility: hidden !important}'">

</iframe>

...but that doesn't work.

Does anyone have a suggestion as to how the command bar in an embed web part once a filter is applied? If so please provide clear guidance and code 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);
    }

Copy URL

Put URL in src:

Here is test 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