Changing the Active Tab Selection in ServiceNow

ServiceNow 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(/&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(/&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!

Date Posted:

September 29, 2010

Share This:

15 Comments

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

    I just discovered some odd behavior when it comes to putting

     

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

     

    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

      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

    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

      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

    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

    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

      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

    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

      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

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

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

    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

      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

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

Comments are closed.

Categories

Tags

Loading

Fresh Content
Direct to Your Inbox

Just add your email and hit subscribe to stay informed.