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!