SATURDAY, MAY 19, 2012

Changing the Active Tab Selection in Service-now.com

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…

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('h3[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('h3[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);

Comments

Posted On
Jul 08, 2011
Posted By
Andrew Kincaid

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.

Posted On
Oct 01, 2011
Posted By
Andrew Kincaid

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);

Posted On
Oct 03, 2011
Posted By
Andrew Kincaid

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);

Leave a Reply


Notify me of followup comments via e-mail. You can also subscribe without commenting.

Latest Comments

  • Jim Coyne: I’m not sure exactly what you are looking for, but can you use “window.location” in your...
  • Ian: Might want to check the single quotes around ITIL in the condition line, they gave an error for me until I...
  • Mark Stanger: That’s correct. This returns instance URLs. I don’t have an equivalent currently that...
  • ND: Hi Mark, This is very useful information. I am looking for similar method to find URL of a site created by us. We...