THURSDAY, JANUARY 19, 2017

Show/Hide Service Catalog Variable Help Text

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.

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

54 Comments

Alex 17-02-2010, 19:29

Works great.. Thanks!

Reply
Rox 23-03-2011, 05:37

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

Reply
Mark Stanger 23-03-2011, 06:51

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 :).

Reply
Thais 05-01-2017, 11:35

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…

Reply
Mark Stanger 05-01-2017, 11:38

You’re correct that they don’t support HTML anymore. ServiceNow removed this capability several years ago.

Reply
Daniel Styer 27-04-2011, 01:49

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.

Reply
Mark Stanger 27-04-2011, 04:42

There is a way. I just updated the article with a method to do an expand or collapse rather than a simple toggle.

Reply
Amol 21-06-2011, 04:48

HI Mark,

I have created a Label field and add a help text there. this script is not working

Reply
Mark Stanger 21-06-2011, 05:58

Interesting. It looks like label fields have a different ID format than other variables do. It should work with this script…

function onLoad() {
   var myVar = g_form.getControl('YOUR_VAR_NAME_HERE');
   toggleHelp(myVar.id.replace('sys_original.', ''));
}
Reply
Amol 21-06-2011, 08:02

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.

Reply
Shane C 15-01-2015, 17:16

Would this include List Collectors? Having trouble with them, and your script.

Thanks.

Reply
Mark Stanger 15-01-2015, 17:31

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.

Reply
Shane C 15-01-2015, 17:38

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.’, ”));
}

Reply
Shane C 16-01-2015, 10:38

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!

Reply
Benjamin Burdick 08-03-2012, 06:50

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.

Reply
Mark Stanger 08-03-2012, 13:09

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…

toggleHelp('IO:870149177b6020005c7714aa3f4d4dde');
Reply
Travis Toulson 16-03-2012, 11:07

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:

getMainWindow().runAfterAllLoaded = getMainWindow().runAfterAllLoaded.wrap(function(original) {
  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.

Reply
Mark Stanger 16-03-2012, 13:24

Cool. Thanks for sharing this.

Reply
joan 02-10-2014, 18:44

How do you call it in the catalog client script?

Reply
Mark Stanger 03-10-2014, 11:36

System UI -> UI scripts, there’s no need to create a client script for the solution Travis shared.

Reply
Tim 17-08-2012, 13:30

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?

Reply
Mark Stanger 17-08-2012, 16:27

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.

Reply
Travis Toulson 18-08-2012, 08:24

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.

Reply
Simon Brown 01-11-2012, 10:02

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.

Reply
Mark Stanger 01-11-2012, 12:31

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.

Reply
Justin Catchings 07-01-2014, 06:27

Hi Mark, did you ever complete a solution related to this?

Reply
Mark Stanger 07-01-2014, 08:15

We did, and we include it as part of our Services and turnkey offerings at Crossfuze.

Reply
Anish 13-03-2013, 08:58

I need to show an image tooltip onmouseover on a variable of my record producer. Any suggestions….

Reply
neetu 18-09-2013, 07:35

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.

Reply
Nate 23-10-2013, 13:06

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.

Reply
Nancy 01-08-2014, 10:58

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?

Reply
Mark Stanger 01-08-2014, 15:37

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.

Reply
Mark Stanger 15-01-2015, 17:43

@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.

Reply
Richard Norton 02-04-2015, 12:33

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?

Reply
Mark Stanger 02-04-2015, 12:49

Looks like you’re right. I’ve updated the article above with a solution that should be compatible with Fuji as well.

Reply
Richard Norton 04-04-2015, 21:08

Awesome as always!

Reply
Jenny 27-04-2015, 13:28

Hi. Should this work in Dublin? I’m pretty sure I’ve got the script right but there’s no change to my form.

Reply
Mark Stanger 28-04-2015, 06:10

Yes, it should.

Reply
David 13-05-2015, 04:51

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

Reply
Mark Stanger 13-05-2015, 06:09

Yes, you would implement this as a catalog client script.

Reply
Ramandeep Garg 18-09-2015, 01:19

This is exactly what I was looking for.

Reply
Shashank Vashist 18-09-2015, 02:19

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?

Reply
Mark Stanger 18-09-2015, 08:34

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.

Reply
Shane C. 04-04-2016, 12:10

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

Reply
Mark Stanger 05-04-2016, 07:19

I have. Check out the article above for the Geneva workaround I identified and posted a couple of months ago.

Reply
Tyson W 17-10-2016, 08:00

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?

Reply
Mark Stanger 17-10-2016, 09:17

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

Reply
Virag Shah 09-07-2016, 12:28

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

Reply
Mark Stanger 09-07-2016, 13:58

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.

Reply
K.Lee 13-07-2016, 10:26

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?

Reply
Mark Stanger 13-07-2016, 11:44

Thanks for letting me know. I’ve updated the article with working scripts for Helsinki.

Reply
Nick 19-09-2016, 13:56

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?

Reply
Mark Stanger 19-09-2016, 14:15

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.

Reply
Brett 14-11-2016, 21:18

Thanks ServiceNow Guru,

Saved me plenty of hours as a novice coder!

Works a treat.

Reply

Leave a Reply


Latest Comments

  • David: It appears that I can hit sys_properties table with REST. This works, but I haven’t yet discovered the...
  • Mark Stanger: Hey David, It doesn’t surprise me that scoped apps have made this more difficult. I’m not...
  • David: Mark, do you have an example of how to do this in a scoped app? It seems there are many hoops to jump through...
  • Mark Stanger: The only possibility is to create a system property to override this in your application. Check out the...