How to Remove the Help Icon in Umbraco 13 Backoffice?

Questions
1

Hello,

I’m trying to remove the small Help icon from the Umbraco 13 back office dashboard.

image
image650×502 24.6 KB

I assumed this would be simple, but I haven’t been able to find a way to do it. I’ve tried:

  • Using a composer with builder.Dashboards().Remove<>(), but I can’t find a HelpDashboard or something similar to target.
  • Checking appsettings.json for any relevant settings, but I haven’t found anything that controls this.

Does anyone know the correct way to remove or hide this icon? Is there an official approach, or does it require a workaround?

Any help would be appreciated!

Thank you

2

I’m not sure it’s possible in Umbraco 13. In Umbraco 15, almost everything is an extension point and I know it’s possible to add and removed buttons in the upper right corner.

The workaround would be to simply use a stylesheet.

1 Like
3

Thanks for the quick response @LuukPeters!

My next approach was going to be using display: none, but I was hoping there was a cleaner solution in version 13 using config or composer.

Appreciate your help!

4

I don’t know for sure, but I do know that the extension points are more limited than in 14+. But I wouldn’t want to spend too much time on it when a stylesheet will do the trick. When you upgrade past Umbraco 13, you need to rework this anyway, so any time spend coming up with a nicer solution is more or less wasted time.

1 Like
5

Everything is possible - just not necessarily worth it :slight_smile:

if you are comfortable with angular, you can reach in and remove the help button from there . (although display none - certainly quicker and easier).

if you load something on ‘app.ready’ then that will run as umbraco backoffice starts in the browser.

some of this is guessed based on some code i have that is simiar

(function() {
    'use strict';

    function loader(eventsService) {

        // fired when a user is authenticated and logged in
        // so we can load anything into the back office here.
        eventsService.on('app.ready', function (event, data) {
            removeHelp();
        });

        function removeHelp() {
            // here you can go find the header remove the icon.
        }
    }

    angular.module('umbraco').run(loader);

})();

i have a findHeaderActions method in another bit of code

 function findHeaderActions() {

    var actionsList = angular.element(document)
        .find('.umb-app-header__actions');

    if (actionsList != null && actionsList.length == 1) {

         // from here you should have the list of actions and you can 'remove'
       // the help element.

        // as you are not adding anything, you probibly don't need the scope
        // but if you did, it would look a little something like this... 
        //   $compile(item)($rootScope);
    }
}

So that would be in theory. and should work, but really. removing it with styles is probibly way eaiser !

3 Likes
6

Thanks @KevinJump , i will take a look at this later and see what I can achieve.

Much appreciated :slight_smile: