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.
The following catalog client script will show the help text for the ‘caller_id’ variable automatically when the catalog item form loads.
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…
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’.
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’)
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’)
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
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
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();
Works great.. Thanks!
Does anyone know how to format the help text box? I don’t want a continuous long line of text I want it to show in a list or perhaps bold some text, if anyone can help, that would be great. Thanks
Good question. The help text boxes can be formatted with straight html. You can insert line breaks, lists, etc. just by adding the correct html code. If you’re not an html expert you can use the html editor in a knowledge article to create the look you want and then copy the code :).
I am facing the same issue and I am unable to use HTML: It displays the code on the text instead of skipping lines or just work. I believe the help text on record producer doesn’t take HTML format…
You’re correct that they don’t support HTML anymore. ServiceNow removed this capability several years ago.
Is there a way to tell the state of the Help field, On or Off. I would like to have the Help On when the field is blank. But, if the user toggles the Help, I can not tell what state the Help is in.
There is a way. I just updated the article with a method to do an expand or collapse rather than a simple toggle.
HI Mark,
I have created a Label field and add a help text there. this script is not working
Interesting. It looks like label fields have a different ID format than other variables do. It should work with this script…
var myVar = g_form.getControl('YOUR_VAR_NAME_HERE');
toggleHelp(myVar.id.replace('sys_original.', ''));
}
Many Many Many Thanks Mark.
It worked. Gr8. Here at client site and we were searching this for so many days.
Thanks a lot Again Mark.You are a true Guru of Service Now.
Thanks
Amol Bhatt
Patni Americas Inc.
Would this include List Collectors? Having trouble with them, and your script.
Thanks.
Yes, it works with list collectors. If you’re seeing issues, it may be related to the timing of the form load or change. You can use your javascript executor (ctrl+alt+shift+j) to see it working. If it works there then you might need to add a ‘setTimeout’ call to delay the showing of the help until the form loads.
I must have missed a step here. I had the following code working, but it no longer is. Causes for all hidden elements of my page (by UI Scripts or Policies) to now show up. Chrome throws an error of: Uncaught TypeError: Cannot read property ‘id’ of null:
function onLoad() {
var computer = g_form.getControl(‘ExistingComputer’);
var monitor = g_form.getControl(‘ExistingMonitor’);
var SAM = g_form.getControl(‘SAMApplicationList’);
toggleHelp(computer.id);
toggleHelp(monitor.id);
toggleHelp(SAM.id.replace(‘sys_original.’, ”));
}
Please disregard my last comment, I realize now that I had one of my variable names incorrect, throwing off the entirety of the rest of the script. Once I got the name correct, everything worked as it should.
Thanks for your time Mark!
Hey Mark,
How about containers? It seems I can’t get this to work with a container. I have tried both sets of ‘togglehelp’ code, but neither seem to work with containers with help text.
There is no ‘control’ element for a container so you have to do it a bit differently. You’ll have to get the sys_id of the container start variable and use that directly like this…
If you have numerous Catalog Help nodes and you don’t want to create a UI script for each Catalog Item that needs the auto show, I am using the following script as a global UI Script:
var main = getMainWindow();
var catHelpNodes = main.$$('tr.catalog_help');
if(catHelpNodes.length > 0) {
catHelpNodes.each(function(elem) {
main.toggleHelp(elem.id.replace('label_help_',''));
});
}
return original();
});
I have it working in IE9, Chrome, and Firefox in my instance. Of course, you will need to add the extension for multiple choice variables above if you have that requirement.
Cool. Thanks for sharing this.
How do you call it in the catalog client script?
System UI -> UI scripts, there’s no need to create a client script for the solution Travis shared.
Hi Mark, I tried formatting the Help Text field using html and it didn’t work… I’m just trying to put in line breaks and or \n didn’t work. Any thoughts?
Hi Tim. Unfortunately you can’t do html formatting of help text anymore. ServiceNow has enabled a property that helps prevent cross-site scripting attacks that prevents html for these elements. So you can do html, but you open a huge security hole if you turn off the property.
Two alternatives that you could try:
1. Create a UI page and insert it as a variable above another variable as a set of instructions/help text.
2. (not recommended) Use a client side UI script to manipulate the HTML on the fly.
Hi Mark,
Great article as normal, any thoughts on how this really useful functionality on sc variables could be migrated to normal form fields? Right now Form labels have both a Help and Hint field on them, but the Wiki just says “not in use” when describing Help and the current Hint mouseover functionality is pretty hit and miss as to whether it fires.
Crossfuze Solutions (my consulting company) is actually working on a solution for that. I’m hoping to have something in the next month or so but I’m working on several other projects too.
Hi Mark, did you ever complete a solution related to this?
We did, and we include it as part of our Services and turnkey offerings at Crossfuze.
I need to show an image tooltip onmouseover on a variable of my record producer. Any suggestions….
Hi Mark,
Can you please let me know if we can change the help text of the variable on Loading i.e changing the help text dynamically.
Is it possible to change the tooltip to a different type of text? I’d like to add a link to allow users to preview the catalog items that they are selecting.
Is there a way to do this in a catalog script to cycle through all the variables and display the helptext if show_help == true? So you don’t have to specify each variable?
Hey Nancy, there is probably a way, but I don’t have any sort of solution currently to do that. It would likely involve a client script, script include, and a GlideAJAX call to put it all together. Possible, but not incredibly simple.
@Shane. That error indicates you’re attempting to get a control that doesn’t exist on the form. Then you’re trying to get to the ‘id’ attribute of an unfound element.
Hey mark,
The code under Switching help text open or closed instead of a toggle above don’t seem to be working in Fuji.
Have you identified another solution?
Looks like you’re right. I’ve updated the article above with a solution that should be compatible with Fuji as well.
Awesome as always!
Hi. Should this work in Dublin? I’m pretty sure I’ve got the script right but there’s no change to my form.
Yes, it should.
Hi,
Can you tell me how you actually implement this? Do you create this as a UI Script? Is it possible to apply it only to one record producer?
thanks,
David
Yes, you would implement this as a catalog client script.
This is exactly what I was looking for.
The information provided is very helpful. I also faced the similar problem and was able to resolve it using the above mentioned information . Can you please provide the source from where we can learn about such functions/ the source from where you were able to find the toggleHelp function?
I discovered this by using a dom inspector in my browser to look at the ‘onclick’ function being used on the catalog help text. It’s not documented anywhere, but you can find out quite a bit just by viewing the dom.
This looks to be broken in Geneva, as it’s throwing an error of “Uncaught TypeError: Cannot read property ‘style’ of null, for the line of code: if (wrapper.style.display==”block”) {
Have you made any updates to this script for Geneva? It has been extremely useful for my use since you’ve developed it.
Thanks
I have. Check out the article above for the Geneva workaround I identified and posted a couple of months ago.
Hi Mark,
I was using your code (not the toggle method) to auto expand help text in Fuji using a Catalog UI Policy. This no longer works in Geneva. I saw your workaround for the toggle method, is there a workaround for the other method?
Looks like the Helsinki workaround I posted before is also applicable for Geneva instances. I’ve updated the descriptions above to indicate this. Give that a try and let me know how it goes
Is there a way to add the tooltip and not the Help Text for variables like Single Line Text, Reference.
It would be a great help
Thanks in advance
Sure. There is a ‘Tooltip’ field provided out-of-box on the variable table that you can add and use. The standard dictionary length is 40 characters so you’ll probably need to expand that to make it useful. I’m not aware of any other solution.
It seems that unfortunately, “Switching help text open or closed instead of a toggle” script(s) do not work in Helsinki. Would you please be able to offer some guidance?
Thanks for letting me know. I’ve updated the article with working scripts for Helsinki.
I have tried all 5 variations for toggling or expanding the help on a given variable, for Helsinki Patch 2. So far no dice. Anything else I need to know? Is this JS code on the Script tab of a Record Producer? A Client Script record on the producer?
All of these are catalog client scripts that run against the catalog item or record producer. I’ve confirmed that they work correctly in Helsinki so there’s likely something else going on in your instance or configuration.
Thanks ServiceNow Guru,
Saved me plenty of hours as a novice coder!
Works a treat.
Is there a way to add line breaks to the More Information/Help Text? I know it doesn’t allow HTML out of the box so just curious if you know of a way to add line breaks in the text?
I think that could be done with some client script DOM manipulation, but I really wouldn’t recommend it because it’s kind of a hack.
hai mark
can i change help text dynamically for select box?
how?