0 comment

Remove Feedback Buttons from SharePoint Footer through Application Customizer

This blog post is outdated. I newly introduced a new solution named Whitespace and a new repository which makes this overall solution outdated. Especially it does not include the previously introduced additional design elements.

I know the Feedback and Mobile App buttons are essential for Microsoft, but many of my customers ask me to remove it. There a mainly three reasons for that. The first is the location and loading behaviour of those buttons. It takes a while until those buttons are loaded and catch a lot of attention of the user once they are visible on the page.

The second reason is that the location sticky on the bottom of the page might not be the perfect spot for those buttons. I might be more useful to have them somewhere in the header or suite bar.

The third thing that worries me personally is that it looks like an alien in the overall modern experience.

Nevertheless, it is possible to remove those buttons through CSS and an Application Customiser.

Project setup

The base setup for the application customizer follows the guidance given in the official documentation on how to build an Application Customiser.

This document also shows how to add a custom CSS for the Application Customiser.

CSS that hides the buttons

It might be possible to remove those buttons from JavaScript, but problem number one is the delayed load of the buttons. The code needs to wait until the buttons show up and this might cause troubles in performance and the overall loading experience on the page.

A better option is to remove the buttons from CSS. From my point of view, one of the most underestimated benefits of CSS is that it is not a programming language. I mean by that that when the CSS fails, the user interface looks maybe ugly but doesn’t raise any exception at all. It doesn’t even block other components from getting loaded.

The following CSS removes the buttons from the page.

// Hide any class that starts with feedback
    display: none !important;

// create a dummy app to make sure CSS gets loaded
    background-color: transparent;

The magic happens in the first lines of CSS. The CSS query all div elements where that has a class name starting with ‘feedback_’, and this matches the outer container where the buttons are. Does will be then set to ‘display: none’ with ‘!important’ to make sure. Inline style gets overwritten this way too.

The ‘.app’ class is required to compile the CSS through Module CSS correctly but doesn’t have any effect on the page; Otherwise, the CSS won’t be compiled and not added to the package.

Registration through a custom action

The solution I built can be deployed tenant wide, which makes a lot of sense. This way they can be removed from anywhere in SharePoint. The only thing that is left is to register the application customizer a custom action.

To register I use the Office 365 CLI with the following code for a specific website.

spo customaction add --url --title GoodbyeFeedback --name GoodbyeFeedback --location ClientSideExtension.ApplicationCustomizer --clientSideComponentId 1b6c8db5-6877-406a-9bb3-e866418c3c25 --clientSideComponentProperties '{}'

Once the custom action is registered the buttons are removed. The still load but are not visible anymore.

Now the feedback buttons still load but are not visible anymore

Further resources