I
received a client request last night asking if there was any way to provide some sort of additional highlighting to the currently-selected module in the left navigation. You’re probably already aware that when you click on a link in the left nav that link changes to a bold text. The client wanted to add a background highlight color in addition to the bolded text so that the selected module would be easier to see. The end result of this customization looks something like this…
This customization obviously isn’t for everybody, but I think it does demonstrate a good use of UI scripts. The script below needs to be set up as a Global UI script so that it will run throughout the user session. Within the script I check to see if the navigation pane is being loaded or not so we can cut down on a lot of the unnecessary code when the main frame is loading content. If the script finds the navigation pane it attaches an event to each menu item. This event is triggered when the item is clicked and it adds the highlight color to that item. In addition, it removes the highlight color from the previously-selected menu item.
You can change the highlight color by modifying the ‘lightskyblue’ text below to whatever color you want!
Name: AddNavMenuHighlight
Global: True
Description: Adds a highlight color to the background of the last-selected module in the left navigation.
Script:
var menuCheckCount = 0;
addLoadEvent( function() {
//Attach an event to the click of any nav menu item
var menuCheckInterval = setInterval(function(){checkMenu()},1000);
function checkMenu(){
try{
if(window.frames[1]){
var menuItems = window.frames[1].document.getElementsByTagName('a');
if (menuItems.length != 0 || menuCheckCount > 10) {
clearInterval(menuCheckInterval);
setHighlight(menuItems);
}
else{
menuCheckCount++;
}
}
}catch(e){}
}
function setHighlight(menuItems){
for (i=0; i < menuItems.length; i++) {
if(menuItems[i].className == 'menu'){
Event.observe(menuItems[i], 'click', function(event) {
//Remove the highlight from the previously-highlighted menu item
if (lastAppLinkColor) {
lastAppLinkColor.style.backgroundColor = "";
}
//Get the parent table row of the link clicked
var elt = Event.findElement(event, 'div'); //If UI11 target 'tr' instead of 'div'
if (elt != document) {
//Add the highlight color
$(elt).style.backgroundColor = "lightskyblue";
lastAppLinkColor = elt;
}
});
}
}
}
});
Great work, added and tested. Works perfectly.
This is fantastic Mark. The client here very much enjoys Service-now, and requested features like these are going to knock their socks off. Cheers for the script.
Works a treat, thanks Mark!
Hi Mark,
There is a strange requirement related to MSP Domain Instance, we have mutiple domain on a instance where need to disable change application for one domain.
As applying role or some permission to application in Navigation will affect all domains(the changes are global), Is there any way to just disable/hide the application for one domain by using UI Script(because UI Script will be domain specific.) like above article is highlighting modules.
Please suggest if this is possible..just from your article getting this clue!
Since this question really isn’t related at all to the solution explained in this article you should probably ask it on the ServiceNow forums. Thanks.
Have you attempted this in Berlin? I can’t seem to get it to work there.
Hi Ryan, thanks for the heads up on this. It looks like Berlin prevents UI scripts from loading in the navigation frame entirely. I have no idea why ServiceNow devs thought this needed to happen. In any case, I’ve got the UI script modified so that it should work in Berlin. It’s not near as elegant, but it does the job. Give it a try with the updated code above and let me know how it goes.
I finally got around to trying this and it does not appear to work. Still not showing up in IE chrome or firefox.
I’ve got it installed and working in all 3 browsers right now at https://demo22.service-now.com.
Hmmm….I just compared the code that I copied and it is a direct match. I must have something getting in the way somewhere.
I actually do get an error that I see using firebug.
TypeError: window.frames[1] is undefined
https://allstatedev.service-now.com/scripts/js_includes.jsx?v=08-29-2012_1059&lp=Thu_Sep_27_12_37_44_PDT_2012&c=5_41
Line 35751
Could anything from the outlook style module counts interfere?
Hi,
Did any one tried this with Berin Release?It was working fine with Aspen release but when we upgraded our instance to Berlin Release it is not working any more.
Sami.
You probably don’t have the latest UI script code in your instance. Please try again with the new code above and let me know how it goes.
Dear Mark,
I have applied the above script in our development instance but still it is not highlighting any menu.
Sami.
The only other thing I can suggest is to turn off any other custom UI scripts you’ve got and see if that makes a difference. I know that this works fine in my instance, and a ServiceNow demo instance. Without access to the instance you’re working in there’s not much I can do.
works for me after clearing cache.do
I just tried this in Calgary and it does work, However i can’t get it to work in Berlin
See above for a couple of other users with this issue. My best guess is that there’s a specific Berlin patch version that this doesn’t work on. I’ve got it working fine on my Berlin instance (Patch 5, Hotfix 1), but that’s obviously not the case for everyone. You might try updating to a later patch and see if that resolves the issue.
I have it working in Berlin, but the strange thing is, It does not work for me logged in as myself(admin) but if i impersonate a user it works great…. Any thoughts?
That’s strange for sure. I would try impersonating another user who has the exact same configuration (roles, group membership, etc.) and see if they experience the same issue. If they do, then it’s probably something related to user roles. If they don’t, then you might look at your user preferences.
What would i be looking for in user Preferences?
JJ
No idea other than differences between your preferences and a user that isn’t having the problem. User preferences really aren’t a big deal so you could even delete all of your preferences if you wanted to check quickly. Export your user preferences to XML first if you want to have a backup that you can re-import if necessary.
The user preferences did the trick, I deleted them and now working for my user log in as well Thanks Mark!!!!!!
I found the same: that it doesn’t work in Berlin unless I impersonate a different user. Then noticed: If I “Switch to old UI” it works, “Switch to new UI” it doesn’t, whatever the user. And when I impersonate a different user, I start out with the old UI (so it works).
Hi Mark,
This feature looks cool and BTW I just tried to implement this in Eureka instance it is not working. Do you have any idea is their any restrictions of this code usability in Eureka instance?
Thank you…
Regards,
Raghu
Thanks for the tip! UI14 (which is the UI used in Eureka instances of ServiceNow and beyond) changes the menu structure a bit. I’ve updated the script above with a fix. Give that a try and let me know how it works for you.
Superrrr it works now… Thanks Mark 🙂
The script mentioned doesn’t seem to be working in UI15 (Fuji), and so I reworked the script using jQuery, tested, and got it working!
_______
// since the Application Navigator was loaded
var RECENT_SELECTION = "#4bd762";
// This is the colour of the background of items that have been selected
// at least once since the Application Navigator was loaded
var PAST_SELECTION = "transparent";
// This variable will contain the last-selected nav item so that
// it can be easily modified once the next item is selected
var lastSelectedNavItem;
function highlightSelectedNavItems() {
try {
var $j = jQuery.noConflict();
// Once the Application Navigator iFrame has loaded, add an on-click
// event to call the selectItem function
$j("#gsft_nav").load(function(){
$j("#gsft_nav").contents()
.find(".nav_menu_header")
.click(selectItem);
});
} catch(e) {}
var selectItem = function () {
// If an item is already highlighted, change it's background colour to
// that of past selections.
if (lastSelectedNavItem != undefined) {
lastSelectedNavItem.css("background-color", PAST_SELECTION);
}
// We want to apply the background colour to the entire
// module, not just the link we clicked
lastSelectedNavItem = $j(this).parent('.app_module');
// Set the background colour of the clicked item to that
// of recent selections.
lastSelectedNavItem.css("background-color", RECENT_SELECTION);
}
}
addLoadEvent(highlightSelectedNavItems);
Awesome, thanks for the update. Please keep me posted on how this performs after it’s been out in the wild for a few months. If it’s stable I’ll probably just use this as the core solution once Fuji is being used by more companies.
Hello Dylan,
This is indeed a very helpful UI Script!
By any chance have you made a similar script that works in UI16 as well?
Thanks a lot in advance!
@sannthosh
Did you solve the same for UI16