Changing the Active Tab Selection in ServiceNow

///Changing the Active Tab Selection in ServiceNow

Changing the Active Tab Selection in ServiceNow

S

erviceNow has a nice tabbed form interface that allows users to save some screen real estate by collapsing all form sections and related lists and presenting them in a tabbed format. Tabbed forms are explained on the ServiceNow wiki.
This post explains how you can use client scripting to change the active tab selection in a form section or a related list. This might come in handy if you want to make a particular tab of information more visible in different situations. Special thanks to Joseph Bennett for doing the real work figuring this out for me :).



These functions are pretty simple. The key is figuring out the ID number of the tab that you want to select. Tabs are numbered in order, left to right, starting at 0.

Change Active Tab Selection for Form Sections

So, if I wanted to select the ‘Change, Backout, and Test Plan’ tab in the image above I would use this line of code in a client script…

g_tabs2Sections.setActive(1);

You can change the active tab selection by name by using a script like this (where ‘Change, Backout, and Test Plan’ is the name of your tab)

var tabName = 'Change, Backout, and Test Plan';
var myTabs = $('tabs2_section').select('span[class="tab_header"]');
var answer = 0;
for (i = 0; i < myTabs.length; i++) {
   var inner = myTabs[i].innerHTML.replace(/&amp;nbsp;/g, ' ');
   if(inner.indexOf(tabName) > -1) {
      answer = i;
      break;
    }
}
//Display the selected section
g_tabs2Sections.setActive(answer);

Change Active Tab Selection for Related Lists

If I wanted to select the ‘Affected CIs’ related list tab in the image above I would use this line of code in a client script…

g_tabs2List.setActive(3);

You can change the active tab selection by name by using a script like this (where ‘Affected CIs’ is the name of your tab)

var tabName = 'Affected CIs';
var myTabs = $('tabs2_list').select('span[class="tab_header"]');
var answer = 0;
for (i = 0; i < myTabs.length; i++) {
   var inner = myTabs[i].innerHTML.replace(/&amp;nbsp;/g, ' ');
   if(inner.indexOf(tabName) > -1) {
      answer = i;
      break;
    }
}
//Display the selected section
g_tabs2List.setActive(answer);

Want to learn more about controlling the behavior of tabs and form sections in ServiceNow? Check out these other articles for more information!

By | 2018-07-09T15:00:06-06:00 September 29th, 2010|Categories: Client scripts|Tags: , , , |15 Comments

About the Author:

15 Comments

  1. Andrew Kincaid July 8, 2011 at 4:45 pm - Reply

    I just discovered some odd behavior when it comes to putting

    &nbsp;

    into a client script. Testing with the June 2011 release, if you do not have High Security enabled, the

    &nbsp;

    in the above script will be replaced with a space when you save the script and it won’t work. If you have High Security on, it will be left alone and the above script will work.

    If you don’t have High Security turned on or if you find you just can’t get it to stick when you save, I recommend changing the regular expression to this:

    var inner = myTabs[i].innerHTML.replace(/\x26nbsp;/g, ' ');

    Specifying the ampersand with it’s hex code seems to trick whatever wants to replace it with a space.

    • Mark Stanger December 11, 2012 at 8:50 am - Reply

      Thanks Andrew. It looks like this issue reared its ugly head again in Berlin. I’ve updated the code above with a similar escaping technique to the one you list here. Thanks again for the feedback!

  2. Andrew Kincaid October 1, 2011 at 5:50 pm - Reply

    Another way to make a tab active by its name (tested on June 2011 release):

    var tabName = ‘Related Records’;
    g_tabs2Sections.setActive($(g_form.getTableName()+’.do’).select(‘span[tab_caption=”‘+tabName+'”]’)[0].className.substr(-1,1)-1);

    • Andrew Kincaid October 3, 2011 at 3:50 pm - Reply

      Whoops! The code above doesn’t work in IE. I guess it doesn’t like substr? 🙂 The following worked in IE6 and Chrome:

      var tabName = ‘Related Records’;
      g_tabs2Sections.setActive($(g_form.getTableName()+’.do’).select(‘span[tab_caption="'+tabName+'"]‘)[0].className.match(/.$/)-1);
  3. ND November 20, 2013 at 11:06 am - Reply

    Hi Mark,

    Is it possible to set the focus on the active Related list?

    Regards,
    ND

  4. Xavier Bob November 22, 2013 at 3:27 am - Reply

    Hey Mark,

    If i want the Releated Records tab to be visible on selecting state ‘Awaiting Problem’,shouldnt this work fine if i include only “g_tabs2List.setActive(2);” in my client script…. this isnt working do we have to include the whole script which is provided above

    • Mark Stanger November 22, 2013 at 5:03 am - Reply

      The ‘Related Records’ tab is a form section, not a related list I believe. It is also the ‘1’ position by default on the ServiceNow incident form. This should work correctly in a SN demo instance. You’ll have to make sure your configuration matches or adjust the script accordingly.

      g_tabs2Sections.setActive(1);

  5. Michael Sabia January 5, 2016 at 9:52 am - Reply

    The var myTabs = $(‘tabs2_section’).select(‘h3[class=”tab_header”]’); line seems to have stopped working in Fuji. As a workaround, I’m using the following which first locates a tab by looking for a field and then setting focus to that tab

    g_tabs2Sections.setActive(g_tabs2Sections.findTabIndex(‘close_notes’));

    • Mark Stanger January 5, 2016 at 10:03 am - Reply

      Thanks for letting me know. You can simply replace ‘h3’ with ‘span’ in the code you’re referencing to make this work in Fuji. I’ve corrected the code in the article above.

  6. Stephanie McCally July 5, 2016 at 12:52 pm - Reply

    Thank you, this was very helpful and exactly what I was looking for!!

  7. Rahul Gubbala March 30, 2017 at 8:50 am - Reply

    Hi Mark,

    I’ve been struggling of late regarding the tabbed forms and lists in the service portal. Is there any way that I could use your line of code in the widgets that I use for the portal pages?

    Regards,
    Rahul.

    • Mark Stanger March 30, 2017 at 10:48 am - Reply

      Unfortunately, I’m not aware of anything that can handle this type of thing in the Service Portal scripting API at the moment. I’ll be sure to post that here if there is anything that comes available.

  8. Kumarr Satyam May 25, 2017 at 12:17 am - Reply

    Can we change tab name also using g_tabs2Sections ? if yes then what we have to do?

Leave A Comment