Please note that as of the Istanbul release of ServiceNow there is a variable field setting that allows you to automatically display the help text for a particular variable. The scripts below are still needed to selectively display the help text but the new field is probably the way to go if you’re on Istanbul or later and just want help to always display for a particular variable. Click this link for more details.

Each Service Catalog variable in ServiceNow allows you to provide the end-user with some additional information about that variable and how to use it. By default, these ‘Help Text’ sections are collapsed when the service catalog item loads. You may want to automatically expand the help text for a particular variable so that it is more obvious to the user what they need to do. Here’s how you can toggle the display of the help text for variables in your service catalog.

Expanded Help Text

The following catalog client script will show the help text for the ‘caller_id’ variable automatically when the catalog item form loads.

function onLoad() {
   var myVar = g_form.getControl('caller_id');
   toggleHelp(myVar.id);
}

Geneva Workaround!!!
If you’re an early Geneva adopter it looks like ServiceNow has a bug where they’ve broken ‘toggleHelp’ because they’re not targeting the right element ID within their function. Hopefully this will get fixed but until then here’s a workaround using the same example above…

//Geneva workaround because 'toggleHelp' is broken
var myVar = g_form.getControl('caller_id');
var myVarHelp = $('question_help_IO_' + myVar.id.split(':')[1] + '_toggle');
toggleVariableHelpText(myVarHelp);

Note: There are some variable types (I’ve identified labels and multiple choice variables so far) that return an ID prefixed by ‘sys_original.’. For these variables, your catalog client script will have to replace that text in order to work correctly. Here’s an example for a multiple choice variable named ‘multichoice’.

function onLoad() {
   var myVar = g_form.getControl('multichoice');
   toggleHelp(myVar.id.replace('sys_original.', ''));
}

Switching help text open or closed instead of a toggle

If you encounter a situation where you need to open or close the help text automatically, but don’t know what state the help text will be in, then the ‘toggleHelp’ function probably won’t work for you. This is most often the case if you need to toggle the help text based on some ‘onChange’ event. For those cases you can use the following catalog client scripts, which leverage the ‘expand/collapse’ effect functionality I wrote about.

Expand the help text for a variable (‘caller_id’)

//Expand help text for a variable
var myVar = g_form.getControl('caller_id');
var wrapper = $('help_' + myVar.id + '_wrapper');
var image = $('img.help_' + myVar.id + '_wrapper');
wrapper.style.display = "block";
image.src = "images/filter_reveal16.gifx";
image.alt = getMessage("Display / Hide");
_frameChanged();

Collapse the help text for a variable (‘caller_id’)

//Collapse help text for a variable
var myVar = g_form.getControl('caller_id');
var wrapper = $('help_' + myVar.id + '_wrapper');
var image = $('img.help_' + myVar.id + '_wrapper');
wrapper.style.display = "none";
image.src = "images/filter_hide16.gifx";
image.alt = getMessage("Display / Hide");
_frameChanged();

ServiceNow has changed this…once again…in the Geneva release. Please be aware that these catalog client scripts are prone to break in future releases. I’m only providing them here for those specific cases where the business need outweighs that risk. Here are the working scripts for Geneva and beyond.

Expand the help text for a variable (‘caller_id’) – GENEVA AND BEYOND

//Expand help text for a variable
var myVar = g_form.getControl('caller_id').id;
myVar = myVar.replace(':', '_');
var wrapper = $('question_help_' + myVar + '_toggle_value');
var image = $('question_help_' + myVar + '_toggle');
wrapper.show();
image.addClassName('icon-vcr-down');
image.removeClassName('icon-vcr-right');
_frameChanged();

Collapse the help text for a variable (‘caller_id’) – GENEVA AND BEYOND

//Collapse help text for a variable
var myVar = g_form.getControl('caller_id').id;
myVar = myVar.replace(':', '_');
var wrapper = $('question_help_' + myVar + '_toggle_value');
var image = $('question_help_' + myVar + '_toggle');
wrapper.hide();
image.addClassName('icon-vcr-right');
image.removeClassName('icon-vcr-down');
_frameChanged();