The Now Platform® Washington DC release is live. Watch now!
There are a few mysterious things in ServiceNow that are often believed to be out of administrators' reach. These are various pieces of the core functionality that simply work the way they do. Tabbed forms are definitely one of them. In this post, I will show you how to deal with form tabs and teach you some tricks that you are not going to find in the Wiki.
Toggling tabs on/off is very well explained in this post by Mark Stanger. There are, however, a few other things you may want to do with tabbed forms. The table below gives an overview of methods and properties available to you in your client-side scripts:
Method / Property | Description |
---|---|
g_tabs2Sections.hasTabs(); | Returns true if the form has any tabs and false otherwise |
g_tabs2Sections.isActivated(); or g_tabs2Sections.activated | Returns true if tabbed view is ON and false otherwise |
g_tabs2Sections.deactivate(); | Switches tabs OFF |
g_tabs2Sections.activate(); | Switches tabs ON |
g_tabs2Sections.tabs.length | Returns the total number of tabs on the form |
g_tabs2Sections.activeTab | Returns the index of the currently selected tab as a String |
g_tabs2Sections.setActive(0); | Takes tab index* as its argument and switches to the corresponding tab |
g_tabs2Sections.hideTab(2); | Takes tab index* as its argument and hides the corresponding tab |
g_tabs2Sections.showTab(2); | Takes tab index* as its argument and reveals the corresponding tab |
g_tabs2Sections.hideTabByID ('section_tab.65f94d7e0a0a3c0e09d606529d29a65a'); | Takes tab ID as its argument and hides the corresponding tab |
g_tabs2Sections.showTabByID ('section_tab.65f94d7e0a0a3c0e09d606529d29a65a'); | Takes tab ID as its argument and reveals the corresponding tab |
g_tabs2Sections.findTabIndexByID ('section_tab.65f94d7e0a0a3c0e09d606529d29a65a'); | Takes tab ID as its argument and returns the index of that tab |
g_tabs2Sections.findTabIndex('comments'); | Takes a field name as its argument and returns the index of the tab that contains the field |
g_tabs2Sections.hideAll(); | Hides all form sections (but keeps tabs visible if in tabbed mode) |
g_tabs2Sections.showAll(); | Unhides all form sections (except those hidden using hideTab() method) and displays them one below another |
g_tabs2Sections.markAllTabsOK(); | Hides the red mandatory field indicator from all tabs (indicators on individual fields remain) |
g_tabs2Sections.markMandatoryTabs(); | Displays a red indicator on tabs that have mandatory fields |
g_tabs2Sections.markTabMandatoryByField('comments'); | Takes a field name as its argument and marks the form section that contains that field mandatory (but does not prevent saving the record if all mandatory fields are in fact filled in) |
* Tab indices start at 0
Examples in this table use g_tabs2Sections object and therefore work with form sections. To manage related lists in a similar manner, use g_tabs2List object instead.
To give you an idea of how some of these methods can be used in a real life scenario, here is a script that enables switching between form sections using Alt+PageUp and Alt+PageDown combinations of keys:
addLoadEvent(function() {
$$('body').each(function (elm) {
Event.observe(elm, 'keyup', function(event) {
if (g_tabs2Sections.activated && event.altKey) {
var btnCode = event.keyCode ? event.keyCode : event.charCode;
var tabsNumber = g_tabs2Sections.tabs.length;
var currentTab = g_tabs2Sections.activeTab * 1;
var nextTab = 0;
if (btnCode == 33)
nextTab = currentTab - 1;
if (btnCode == 34)
nextTab = currentTab + 1;
if (nextTab > -1 && nextTab < tabsNumber)
g_tabs2Sections.setActive(nextTab);
}
});
});
});
You can use it in an onLoad client script for a specific table, say Task, or in a global UI script to enable this feature for all forms in your instance.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.