How to hide App Waffles for SharePoint 2019 or Office 365 using SPFX

Objective

Image 114.png

Assuming you want to customize an Office 365 SharePoint Online or SharePoint 2019 Intranet, you have your own MegaMenu so you want to hide the waffles.

We have chosen to hide the waffle menu (on SP2019 onpremise) because it only shows SharePoint, OneDrive inside.

We have chosen to add those links in our company MEGAMENU : “My SharePoint Site” and “My Documents (One drive).

So keeping the Waffle is redundant for users.

How to

This is achievable (unsupported by Microsoft though) by using an SPFX Extension.

Part of the SPFX code, inside the onInit() method :

@override
public onInit(): Promise {

hide365Waffle();

}

by calling this method

private hide365Waffle(){
console.log("MyMenuApplicationCustomizer.hide365Waffle()");
var hideO365Waffle = document.createElement("script");
hideO365Waffle.type = "text/javascript";
hideO365Waffle.innerHTML = (function(){
setTimeout(function () {
var myClasses = document.querySelectorAll('.o365cs-nav-leftAlign'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
}, 2000);
})();
;
document.head.appendChild(hideO365Waffle);
}

Conclusion

We have seen how to hide the Office 365 Menu Launcher from SharePoint 2019 or SharePoint Online.

Thanks to @_maxduca for his help !

2 thoughts on “How to hide App Waffles for SharePoint 2019 or Office 365 using SPFX

Add yours

  1. The menu is for PROGRAMS. It is possible to add more information to that menu. If the custom menu is for some source of information for the company, there are other ways to display that main menu for INFORMATION. It’s called a HOME. Or is the problem something else?

    Like

    1. Hi,
      This is a tips, not a good practice đŸ™‚
      Please adapt it to your context.

      The context is that the customer use a mega menu for its Intranet on SharePoint 2019. Users also use One Drive.
      So now they have a megamenu AND a tiles menu. Confusing for users…

      Also in your suggestion, the user experience isnt great.
      As a user i want to access a different page in the intranet :
      1. Click tiles
      2. click home
      3. click the link

      Each time he wants to navigate to a different page he has to go to different tiles ?

      So hiding the tiles menu and only using a megamenu is the way chosen to avoid extra user training and confusions. Microsoft shall give options to hide this menu by default…………..

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: