Blog

Adding Top Navigation Buttons to ServiceNow

UPDATE: This only works in ServiceNow Fuji or earlier versions of ServiceNow.  For updated buttons, see this post: Top Navigation Buttons (Geneva)

This customization adds more functionality from the top menu in ServiceNow. You can add few buttons to help direct people to important ServiceNow applications.

Thanks to Drew West on the forums for starting this idea.  I just added on to his idea and added more buttons. I know, how original. :)

Version 1: Top Navigation with Update Set Picker

This version is more for developers to use on Dev and Test Instances.

 

UI Script: Development Top Navigation
Global: true
Script:

addLoadEvent(function(){
try{
if($('navpage_header_control_button') && g_user.hasRoles()){
$('nav_header_stripe_decorations').style.width ="800px";
//Live Feed Icon
var livefeedIcon = "<a target='gsft_main' href='$live_feed.do?' class='btn btn-default homepage-button' id='sneLiveFeedIcon' style='margin-left: 5px; margin-right: 5px; padding: 4px 4px 4px 4px; background-color:#767676; color:white;border-color: white;'><span class='icon-collaboration pull-left' style='margin-right: 4px;'></span>Live Feed</a>"; //);
$('gsft_logout').insert({before:livefeedIcon});

//Knowledge Icon
var knowledgeIcon = "<a target='gsft_main' href='$knowledge.do' class='btn btn-default homepage-button' id='sneKnowledgeIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; background-color:#767676; color:white;border-color: white;'><span class='icon-book pull-left' style='margin-right: 4px;'></span>Knowledge</a>"; //);
$('sneLiveFeedIcon').insert({before:knowledgeIcon});

//Self Service Icon
var selfserviceIcon = "<a target='_blank' href='/ess' class='btn btn-default homepage-button' id='sneSelfServiceIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; background-color:#767676; color:white;border-color: white;'><span class='icon-cart pull-left' style='margin-right: 4px;'></span>Self Service</a>"; //);
$('sneKnowledgeIcon').insert({before:selfserviceIcon});

//Home Icon
var homeIcon = "<a target='gsft_main' href='home.do' class='btn btn-default homepage-button' id='sneHomeIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; background-color:#767676; color:white;border-color: white;'><span class='icon-home pull-left' style='margin-right: 4px;'></span>Home</a>"; //);
$('sneSelfServiceIcon').insert({before:homeIcon});

//Move Update Set Picker
$('update_set_picker_select').className = '';
if($('update_set_picker').select('li')[0]){
$('update_set_picker').select('li')[0].className = '';
$('update_set_picker').select('li')[0].style.paddingRight="10px";
$('update_set_picker').select('li')[0].style.listStyleType ="none";
$('update_set_picker').style.height ="35px";
$('update_set_drill').style.color ="#FFF";
$('update_set_drill').style.marginTop = "2px";
$('update_set_picker').select('li')[0].select('a')[1].style.color ="#FFF";
$('update_set_picker').select('li')[0].select('a')[1].style.marginTop = "2px";
$('update_set_picker').select('li')[0].select('a')[2].style.color ="#FFF";
$('update_set_picker').select('li')[0].select('a')[2].style.marginTop = "2px";
$('update_set_picker_select').style.color ="#000";
}
if($('update_set_picker').select('legend')[0]){
$('update_set_picker').select('legend')[0].remove();
}
$('nav_header_stripe_decorations').insert({
top: $('update_set_picker')
});
$('update_set_picker').id = 'update_set_picker_new';
$('update_set_picker_select_title').id = 'update_set_picker_select_title_new';

}
}catch(e){}
});

Version 2: Top Navigation without Update Set Picker

This version could be used for any ServiceNow instance

 

UI Script: Top Navigation
Global: true
Script:

addLoadEvent(function(){
try{
if($('navpage_header_control_button') && g_user.hasRoles()){
$('nav_header_stripe_decorations').style.width ="800px";
//Live Feed Icon
var livefeedIcon = "<a target='gsft_main' href='$live_feed.do?' class='btn btn-default homepage-button' id='sneLiveFeedIcon' style='margin-left: 5px; margin-right: 5px; padding: 4px 4px 4px 4px; background-color:#767676; color:white;border-color: white;'><span class='icon-collaboration pull-left' style='margin-right: 4px;'></span>Live Feed</a>"; //); 
$('gsft_logout').insert({before:livefeedIcon}); 

//Knowledge Icon
var knowledgeIcon = "<a target='gsft_main' href='$knowledge.do' class='btn btn-default homepage-button' id='sneKnowledgeIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; background-color:#767676; color:white;border-color: white;'><span class='icon-book pull-left' style='margin-right: 4px;'></span>Knowledge</a>"; //);
$('sneLiveFeedIcon').insert({before:knowledgeIcon}); 

//Self Service Icon
var selfserviceIcon = "<a target='_blank' href='/ess' class='btn btn-default homepage-button' id='sneSelfServiceIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; background-color:#767676; color:white;border-color: white;'><span class='icon-cart pull-left' style='margin-right: 4px;'></span>Self Service</a>"; //);
$('sneKnowledgeIcon').insert({before:selfserviceIcon}); 

//Home Icon
var homeIcon = "<a target='gsft_main' href='home.do' class='btn btn-default homepage-button' id='sneHomeIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; background-color:#767676; color:white;border-color: white;'><span class='icon-home pull-left' style='margin-right: 4px;'></span>Home</a>"; //);
$('sneSelfServiceIcon').insert({before:homeIcon});

}
}catch(e){}
}); 

Version 3: More Color

Here is a version with more color to the buttons


UI Script: Top Navigation
Global: true
Script:

addLoadEvent(function(){
    try{
        if($('navpage_header_control_button') && g_user.hasRoles()){
            $('nav_header_stripe_decorations').style.width ="800px";

            //Live Feed Icon
            var livefeedIcon = "<a target='gsft_main' href='$live_feed.do?' class='btn btn-default homepage-button' id='sneLiveFeedIcon' style='margin-left: 5px; margin-right: 5px; padding: 4px 4px 4px 4px; background-color:#D02229; color:white;border-color: black;'><span class='icon-collaboration pull-left' style='margin-right: 4px;'></span>Live Feed</a>"; //);
            $('gsft_logout').insert({before:livefeedIcon});
            
            //Knowledge Icon
            var knowledgeIcon = "<a target='gsft_main' href='$knowledge.do' class='btn btn-default homepage-button' id='sneKnowledgeIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; background-color:#FA6800; color:white;border-color: black;'><span class='icon-book pull-left' style='margin-right: 4px;'></span>Knowledge</a>"; //);
            $('sneLiveFeedIcon').insert({before:knowledgeIcon});
            
            //Self Service Icon
            var selfserviceIcon = "<a target='_blank' href='/ess' class='btn btn-default homepage-button' id='sneSelfServiceIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; background-color:#692772; color:white;border-color: black;'><span class='icon-cart pull-left' style='margin-right: 4px;'></span>Self Service</a>"; //);
            $('sneKnowledgeIcon').insert({before:selfserviceIcon});
            
            //Home Icon
            var homeIcon = "<a target='gsft_main' href='home.do' class='btn btn-default homepage-button' id='sneHomeIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; background-color:#278EFC; color:white;border-color: black;'><span class='icon-home pull-left' style='margin-right: 4px;'></span>Home</a>"; //);
            $('sneSelfServiceIcon').insert({before:homeIcon});
            
            //Move Update Set Picker
            $('update_set_picker_select').className = '';
            if($('update_set_picker').select('li')[0]){
                $('update_set_picker').select('li')[0].className = '';
                $('update_set_picker').select('li')[0].style.paddingRight="10px";
                $('update_set_picker').select('li')[0].style.listStyleType ="none";
                $('update_set_picker').style.height ="35px";
                $('update_set_drill').style.color ="#FFF";
                $('update_set_drill').style.marginTop = "2px";
                $('update_set_picker').select('li')[0].select('a')[1].style.color ="#FFF";
                $('update_set_picker').select('li')[0].select('a')[1].style.marginTop = "2px";
                $('update_set_picker').select('li')[0].select('a')[2].style.color ="#FFF";
                $('update_set_picker').select('li')[0].select('a')[2].style.marginTop = "2px";
                $('update_set_picker_select').style.color ="#000";
            }
            if($('update_set_picker').select('legend')[0]){
                $('update_set_picker').select('legend')[0].remove();
            }
            $('nav_header_stripe_decorations').insert({
                top: $('update_set_picker')
            });
            $('update_set_picker').id = 'update_set_picker_new';
            $('update_set_picker_select_title').id = 'update_set_picker_select_title_new';
            
        }
    }catch(e){}
});