T

he ServiceNow Eureka release contains many new features and changes. Among these are some significant changes to the look and feel that are generally a very nice (and needed) improvement over previous versions of ServiceNow. I have heard a few complaints about the way that the Banner Frame has been reorganized though. Instead of having the update set, language, and application pickers, etc. available directly, they’ve been moved into a separate menu which is now accessed by clicking a gear icon in the header. While I understand ServiceNow’s reasoning for this – the old header bar was starting to look very dated and cluttered – the update set picker in particular is something that I believe really needs to be visible to admins and developers at all times. In this post I’ll show you a quick workaround you can apply to your system to bring the update set picker back where it belongs!

MoveUpdateSetPicker

The Solution…

There’s no way to get at the back-end code that controls the gear menu popup so our only option is to manipulate the UI using client scripting. Since this is a global issue independent of any specific table or form, we can use a UI script to target the Update Set picker element and move it to a different location on the page. The following script does just that, just make sure to remember to check the ‘Global’ checkbox on the UI script record. Enjoy!

‘MoveUpdateSetPicker’ UI Script
Name: MoveUpdateSetPicker
Global: true
Script:

addLoadEvent(moveUpdateSetPicker);

function moveUpdateSetPicker(){
    try{
        //Only run if UI14
        if($('navpage_header_control_button')){
            //Fix Fuji styling
            $('update_set_picker_select').className = '';
            if($('update_set_picker').select('li')[0]){
                $('update_set_picker').select('ul')[0].style.marginBottom = "0px";
                $('update_set_picker').select('li')[0].className = '';
                $('update_set_picker').select('li')[0].style.paddingRight="5px";
                $('update_set_picker').select('li')[0].style.listStyleType ="none";
                $('update_set_picker').select('li')[0].select('a')[0].style.color ="#FFF";
                $('update_set_picker').select('li')[0].select('a')[0].style.border ="none";
                $('update_set_picker').select('li')[0].select('a')[1].style.color ="#FFF";
                $('update_set_picker').select('li')[0].select('a')[1].style.border ="none";
                $('update_set_picker').select('li')[0].select('a')[2].style.color ="#FFF";
                $('update_set_picker').select('li')[0].select('a')[2].style.border ="none";
                $('update_set_picker_select').style.color ="#000";
               
                $$('.btn-icon').each(function(d){
                    d.style.lineHeight = 'inherit';
                });
            }
            if($('update_set_picker').select('legend')[0]){
                $('update_set_picker').select('legend')[0].remove();
            }
            //Move the update set picker from under the gear icon to the header
            $('nav_header_stripe_decorations').insert({
                top: $('update_set_picker')
            });
            //Make sure that UI14 doesn't change styling
            $('update_set_picker').id = 'update_set_picker_new';
        }
    }catch(e){}
}

UpdateSetPicker-Moved

Moving the Home icon…

I’ve had a few people ask about moving the home icon back as well. This one is a bit more difficult because of the lack of a decent ID to target, not to mention the old-style icon. In this case, I think it’s probably easier just to create a new icon in the header. The following code could be placed inside of the ‘if’ statement in the update set picker code above to also add a ‘home’ icon in the header.

            //Create a home icon in the header
            $('navpage_header_control_button').insert({
                before: '<a href="home_splash.do?sysparm_direct=true" target="gsft_main"><button id="navpage_header_home_button" class="nav_header_button icon-home" title="Home" style="display: inline; visibility: visible;" aria-label="Home" onmouseover="contextShow(event, &quot;homepages&quot;, 200, grabOffsetTop(this) + 20, 0, grabOffsetLeft(this) + 20);event.cancelBubble=true;" target="gsft_main" onmouseout="contextTimeout(event, &quot;homepages&quot;);"></button></a>'
            });