Highlight Selected Navigation Module

///Highlight Selected Navigation Module

Highlight Selected Navigation Module

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!

‘AddNavMenuHighlight’ UI script
Name: AddNavMenuHighlight
Global: True
Description: Adds a highlight color to the background of the last-selected module in the left navigation.
Script:

var lastAppLinkColor;
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;
               }
            });
         }
      }
   }
});
By | 2018-07-09T14:59:57+00:00 September 14th, 2011|Categories: UI scripts|Tags: , |32 Comments

About the Author:

Mark has worked in the IT industry since 2002 and with ServiceNow since 2007. He is the founder and creator of SN | Guru and the co-founder of Crossfuze, one of the worlds leading ServiceNow consulting partners. Prior to co-founding Crossfuze, he worked for ServiceNow as a Senior Architect on the Professional Services team. He has personally led dozens of successful implementations encompassing every part of the ServiceNow platform. He is also responsible for designing and developing groundbreaking ServiceNow solutions and best practices in the form of various applications, turnkey solutions, and integrations during his tenure at ServiceNow, Crossfuze and, of course, SN | Guru. These solutions are used today by ServiceNow administrators and consultants alike in hundreds of ServiceNow instances around the world!

32 Comments

  1. Prit September 14, 2011 at 8:30 am - Reply

    Great work, added and tested. Works perfectly.

  2. Mike Mesri September 14, 2011 at 8:52 am - Reply

    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.

  3. Josh September 14, 2011 at 1:22 pm - Reply

    Works a treat, thanks Mark!

  4. abhijat December 8, 2011 at 6:29 am - Reply

    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!

    • Mark Stanger December 8, 2011 at 6:31 am - Reply

      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.

  5. Ryan Cox September 20, 2012 at 11:23 am - Reply

    Have you attempted this in Berlin? I can’t seem to get it to work there.

    • Mark Stanger September 20, 2012 at 3:57 pm - Reply

      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.

  6. ryan cox October 4, 2012 at 8:19 am - Reply

    Could anything from the outlook style module counts interfere?

  7. Sami December 11, 2012 at 11:30 pm - Reply

    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.

    • Mark Stanger December 12, 2012 at 5:44 am - Reply

      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.

      • Sami Siddiqui December 15, 2012 at 1:04 am - Reply

        Dear Mark,

        I have applied the above script in our development instance but still it is not highlighting any menu.

        Sami.

        • Mark Stanger December 15, 2012 at 5:20 am - Reply

          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.

  8. John Lockett January 9, 2013 at 4:59 pm - Reply

    works for me after clearing cache.do

  9. Jeff May 14, 2013 at 1:48 pm - Reply

    I just tried this in Calgary and it does work, However i can’t get it to work in Berlin

    • Mark Stanger May 14, 2013 at 3:38 pm - Reply

      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.

  10. Jeff May 16, 2013 at 10:27 am - Reply

    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?

    • Mark Stanger May 16, 2013 at 11:12 am - Reply

      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.

      • Jeff May 16, 2013 at 11:46 am - Reply

        What would i be looking for in user Preferences?

        JJ

        • Mark Stanger May 16, 2013 at 11:49 am - Reply

          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.

          • Jeff May 16, 2013 at 11:56 am - Reply

            The user preferences did the trick, I deleted them and now working for my user log in as well Thanks Mark!!!!!!

    • Roger Metcalf June 17, 2014 at 8:40 am - Reply

      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).

  11. Raghu January 27, 2015 at 11:49 pm - Reply

    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

    • Mark Stanger January 28, 2015 at 5:14 am - Reply

      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.

  12. Raghu January 29, 2015 at 2:56 am - Reply

    Superrrr it works now… Thanks Mark 🙂

  13. Dylan Lindgren July 27, 2015 at 8:33 pm - Reply

    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!
    _______

    // This is the colour of the background of the most recent selected item
    // 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);
    • Mark Stanger July 27, 2015 at 8:59 pm - Reply

      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.

    • Sannthosh May 23, 2017 at 9:53 am - Reply

      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!

  14. Sai June 27, 2018 at 3:26 am - Reply

    @sannthosh

    Did you solve the same for UI16

Leave A Comment