S
ervice-now.com 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 Service-now 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…
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 myTabs = $('tabs2_section').select('h3[class="tab_header"]');
var answer = 0;
for (i = 0; i < myTabs.length; i++) {
var inner = myTabs[i].innerHTML.replace(/ /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…
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 myTabs = $('tabs2_list').select('h3[class="tab_header"]');
var answer = 0;
for (i = 0; i < myTabs.length; i++) {
var inner = myTabs[i].innerHTML.replace(/ /g, ' ');
if(inner.indexOf(tabName) > -1) {
answer = i;
break;
}
}
//Display the selected section
g_tabs2List.setActive(answer);
Comments
Posted On
Jul 08, 2011Posted By
Andrew KincaidI 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:
Specifying the ampersand with it’s hex code seems to trick whatever wants to replace it with a space.
Posted On
Oct 01, 2011Posted By
Andrew KincaidAnother 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);
Posted On
Oct 03, 2011Posted By
Andrew KincaidWhoops! The code above doesn’t work in IE. I guess it doesn’t like substr?
The following worked in IE6 and Chrome:
g_tabs2Sections.setActive($(g_form.getTableName()+’.do’).select(‘span[tab_caption="'+tabName+'"]‘)[0].className.match(/.$/)-1);