Dynamic browser window title script

///Dynamic browser window title script

Dynamic browser window title script

UI

scripts in Service-now are one of those things that can be very useful but aren’t very well known.  They allow you to do a lot of client-side javascript manipulation of places in the form that you might not otherwise be able to get to.  One good example of this is setting the browser window title dynamically based off of the content of records being displayed.



By default, Service-now displays the same window title information all of the time no matter what you’re looking at within the application.  This isn’t normally an issue, but it can be frustrating if, like me, you work with multiple browser tabs open that all have something to do with Service-now.

You might just prefer to look at a different title every now and then :).  In my client’s case, they wanted to change the window title dynamically when they opened up a task ticket. They wanted to show the Number and Short description of the task being displayed. Otherwise, they wanted to show the default title. We accomplished this with the addition of a simple global UI script as outlined in the steps below…

1Navigate to ‘System UI -> UI scripts’ and create a new UI script

2Name the script ‘DynamicWindowTitle’ and check the ‘Global’ checkbox

3Use the following script in your UI script

addLoadEvent(setTitle);
function setTitle(){
   try{
      var num = g_form.getValue('number');
      var sd = g_form.getValue('short_description');
      var nme = g_form.getValue('name');

      //Check if viewing a KB article
      if($('kb_view')){
         num = $('permalink').href.split('sysparm_article=')[1];
         sd = $$('.kb_article_header_short_description')[0].innerHTML;
      }
   }catch(e){
   //alert('Error getting title info.');
}
   if(num && sd){
      top.document.title = num + ' - ' + sd;
   }
   else if(nme){
      top.document.title = nme;
   }
   else{
      top.document.title='Service-now.com - IT Service Management Suite';
   }
}
By | 2018-07-09T15:01:33-06:00 December 23rd, 2009|Categories: UI scripts|Tags: , , |19 Comments

About the Author:

19 Comments

  1. Valor April 8, 2010 at 4:30 am - Reply

    Hey Mark–nice work!

    I made some changes to be even more developer friendly–what I really care about is the table name and view (I have a BR, a CS and Incident windows open for testing..).

    addLoadEvent(setTitle);
     
    function setTitle(){
     
       var prefix = 'VP-';
     
       var url = location.pathname;
     
       url = url.substring(1,url.length-3);
     
       var base = prefix + url;
     

     
       try{
     
          var sd = g_form.getValue('short_description');
     
          var num = g_form.getValue('number');
     
          var nme = g_form.getValue('name');
     
       } catch(e) {
     
       }
     

     
       if(sd || num || nme){
     
          var add = '';
     
          sd = (sd) ? sd : (nme) ? nme : '';
     
          add = (sd != '' && num) ? num + ' - ' + sd : (sd != '') ? sd : num;
     
          top.document.title = base + ' | ' + add;
     
       } else{
     
          top.document.title = base;
     
       }
     
    }
    • Mark Stanger April 8, 2010 at 7:57 am - Reply

      I like it! I wonder if maybe a combination of the two would work well for all users. Something more simple for itil and ess users and something like yours for admins maybe.

  2. Joe August 3, 2010 at 2:35 pm - Reply

    Great stuff!

    I agree with your last post Mark, a combo of the 2 would be good.

    Is it possible to have the title show the actual ‘Title’ rather than the name of the page, i.e. where Valor’s script shows ‘VP-kb_home’ if you select Knowledge, can the tab be titled ‘Knowledge’ instead of ‘kb_home’?

    Thanks,

    Joe

    • Mark Stanger August 3, 2010 at 3:18 pm - Reply

      It might be possible, but it certainly isn’t simple given the current system setup. These scripts rely on whatever information they can gather from the form itself. The big challenge is that the information that you need to get the display value of a table or a form isn’t in the same place every time or isn’t accessible directly by ID. I’ve actually looked at this a couple of times since Valor posted his solution and have yet to see a consistent way to show the friendly name instead of the system name.

  3. Joe August 3, 2010 at 4:42 pm - Reply

    Thanks for the quick reply Mark 🙂

    Great site by the way, only came across it today and with us being having just gone live with Service-now a couple of months ago the info you’ve got on here looks like it will be very useful.

  4. valor August 20, 2010 at 6:18 am - Reply

    Joe, that’s one of the reasons why I’m parsing out the URL instead of trying to get the page element with the “friendly” name–it’s not in a standard or easy-to-grab place.

    It’s possible (always in the same place for lists & forms), but easier the way I did it, and it just so happens that that’s what I care about anyway.

  5. Brian Broadhurst March 18, 2011 at 1:05 am - Reply

    Mark, do UI Scripts have access to g_scratchpad? I have an idea to set some values in a display business rule, which would not be accessible using g_form or g_user. How about session client data?

    Brian

    • Mark Stanger March 21, 2011 at 4:33 am - Reply

      I’d have to test to be positive, but I would imagine they would as long as they were running on a traditional form or in a catalog client script (just like g_form or g_user). Probably not available in other places though.

    • valor March 21, 2011 at 12:13 pm - Reply

      Like Mark said, you should have access to g_scratchpad (haven’t tested). Note that you have to be careful about breaking IE when you try to use g_form and the like. You do have access to the g_ objects, though.

      Also keep in mind that UI Scripts run on EVERY page (they’re loaded with the navigation), so use very sparingly!

  6. Bill Collins June 18, 2011 at 1:44 pm - Reply

    Mark, Do you think the Script Action “Set Theme” could be modified to change title based on user company?

    • Mark Stanger June 18, 2011 at 2:22 pm - Reply

      No because the script actions run server-side and this modification needs to be done client-side. You could modify the UI script above to perform an asynchronous call to the server to get the company data but that probably wouldn’t work very well. I’m not sure of a good way to do what you’re asking for off the top of my head.

      • Bill Collins June 19, 2011 at 2:44 pm - Reply

        I can display company sysID as follows, but still lack the conversion to name.

        UI Script

        addLoadEvent(setTitle);
         
        function setTitle(){
         
           try{
         
              var comp = g_user.getClientData('test');
         
           }catch(e){
         
           //alert('Error getting title info.');
         
        }
         
           if(comp){
         
              top.document.title = comp + ' - IT Service Management Suite';
         
           }
         
           else{
         
              top.document.title='Service-now.com - IT Service Management Suite';
         
           }
         
        }

        Script Action

        myCompany();
         
         
         
        function myCompany() {
         
           var cmp = gs.getUser().getCompanyID();
         
           session.putClientData("test", cmp);
         
        }

        Tried: var cmp = gs.getUser().getCompanyID().getDisplay();

        • Mark Stanger June 20, 2011 at 12:58 am - Reply

          ‘getCompanyID’ just gets you the sys_id. ‘getDisplay’ doesn’t exist…I think you meant ‘getDisplayValue’. Also, ‘getDisplayValue’ won’t work off of a sys_id string, you have to reference it from a GlideRecord. You’ll also want to be aware that this information will require you to log in again each time as you are testing since it all gets cached as the session is created. I’m also not sure that the client data is going to be available throughout the product, though it should be available on standard forms. I think this is what you are looking for…
          [code]
          var cmp = gs.getUser().getCompanyRecord().getDisplayValue();
          [/code]

  7. Roger E August 2, 2012 at 3:41 pm - Reply

    Hi,

    We actually prefer to use our pre-defined title (which is different in each environment) when a custom one cannot be used. We’ve also see that this client script is not fired off on list views so the window title will continue to be INC – DESC after the user has left the page. For this reason, we modified your version a bit to help w/ these scenarios.

    We basically store the pre-existing title and put a bind on the unload event so it will be restored after you leave the page.

    addLoadEvent(setTitle);

    function setTitle() {
        var title = top.document.title;

        try {
            var num = g_form.getValue('number');
            var sd = g_form.getValue('short_description');
            var nme = g_form.getValue('name');

            if( (num != '') && (sd != '') ){
                top.document.title = num + ' - ' + sd;
                restoreTitle(title);
            }
            else if( (typeof nme != "undefined") && (nme != 'undefined') ){
                top.document.title = nme;
                restoreTitle(title);
            }

        } catch(e) {
            // Do nothing
        }
    }

    function restoreTitle(original_title) {
        // change the title back when we leave
        $j(window).unload(function() {
            top.document.title = original_title;
        });

    }
  8. MG June 5, 2014 at 4:42 pm - Reply

    Any updates on being able to display a knowledge article’s title when viewing a knowledge article?

    The script works of course when editing the article (since it’s a form), but the reeeeally helpful boost would be when viewing the article.

    • Mark Stanger June 5, 2014 at 10:46 pm - Reply

      Not until now :). Try out the updated script above and let me know how it goes.

  9. Joshua May 6, 2016 at 5:30 am - Reply

    Hi All,
    I came to know that this dynamic window title is available as OOB feautre in Geneva.
    Is it true.
    Or we need to do the above scripts to achieve the dynamic window title

Leave A Comment