Sp-dev-docs: Hiding Parts in Modern Pages

[MNaujoks]

Category

• [x] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Hi together,
I´m looking for an easy and reliable way to hide the following parts of any Modern Page:

• Header:
  
• Commandbar (conditional):
  
• Mobile App and Feedbak - Buttons:
  

The reason for that is: We want to have our new Intranet based on a Modern Communication Site. And the mentioned parts have to be hidden to realize the desired Homepage-Design.

My desired way to achieve that, is to configure suchlike things on SharePoint-Side on site-collection or page level. So therefore, no code should be needed.

Observed Behavior

After I didn´t find any easy solution for this and even MS doesn´t have any suggestions for that I´ve build an Application Customizer Extension to serve that purpose. Inside the onInit-Method I call an 'ElementHidingService' which does the desired work.
In short words: It gets the relevant elements by their css-classnames and adds a new style-attribute with 'display: none' to them.
I´ve attached the ElementHidingService.txt - file to this issue - there you can see, how it works.

But there are several issues by serving the purpose this way:

1. The code will not be executed until the header is rendered already. And that means, during the page load, the header is visible for about one or two seconds.
2. Most of the mentioned components aren´t directly available / accessible when the code is executed. So I have to delay the functions for hiding that elements. And thereby, they are visible for several seconds.
3. The mobileApp- and Feedback-Buttons do have dynamic generated css class names. And that means, the currently used class name has to be determined before the appropriate element can be accessed,
4. Imho, that´s generally not a good idea to do something like that.

Do you know any better way to achieve the addressed requirements?

Steps to Reproduce

1. Download the attached file.
2. Rename it to "ElementHidingService.ts"
3. Build a new application customizer extension.
4. Add the "ElementHidingService.ts" - file to your project,
5. Import the ElementHidingService to your xxxApplicationCustomizer.ts - file. E.g
   import ElementHidingService from './components/Services/ElementHidingService';
6. Call the ElementHidingService.hideElements() - method inside your onInit - method.
7. Try the Project using any Modern Site.

Thanks in advance.
Michael

[patmill]

So, it's javascript, so you can technically do whatever you want. However, from a "supportability" perspective, it puts you into a gray area. If the IDs change, your solution might stop working, if app logic is dependent on those elements being present and visible it is your responsibility, etc.

Your best bet is to log requests in user voice. That said, your scenario isn't unique or unheard, and there should be features coming (both in the overall product as well as the SharePoint Framework) to help achieve your goals. I can't comment on specific ETAs though.

[VesaJuvonen]

Closing as @patmill already answered. Using UserVoice to show the demand for these would help.

[jca38]

Hi,

We have exactly the same requirement to hide to SharePoint Online TOP header instantly.
We do not want the default SharePoint header in our intranet.
Did you let a message in the SharePoint User Voice for this ?
Thanks for your help,
Best Regards,
Jean-Christophe AUDARD

[MNaujoks]

Hi,
there are already two suggestions for this in the User Voice:
1. remove-banner-and-header-title-from-modern-pages
2. title-banner-on-modern-pages
I´ve voted for both but I didn´t write any message ...

Regards
Michael

[jonathanhotono]

We also need for sharepoint to provide option to hide modern site header by default as there are some cases we need to hide the site header fully without having to hide it using CSS using application customizer and causing delays during the hiding process (just not great for user experience).

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues