Show/Hide Service Catalog Variable Help Text

///Show/Hide Service Catalog Variable Help Text

Show/Hide Service Catalog Variable Help Text

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();
By | 2018-07-09T15:01:30-06:00 February 2nd, 2010|Categories: Client scripts|Tags: , |57 Comments

About the Author:

57 Comments

  1. Alex February 17, 2010 at 7:29 pm - Reply

    Works great.. Thanks!

  2. Rox March 23, 2011 at 5:37 am - Reply

    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

    • Mark Stanger March 23, 2011 at 6:51 am - Reply

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

      • Thais January 5, 2017 at 11:35 am - Reply

        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…

        • Mark Stanger January 5, 2017 at 11:38 am - Reply

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

  3. Daniel Styer April 27, 2011 at 1:49 am - Reply

    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.

    • Mark Stanger April 27, 2011 at 4:42 am - Reply

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

  4. Amol June 21, 2011 at 4:48 am - Reply

    HI Mark,

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

    • Mark Stanger June 21, 2011 at 5:58 am - Reply

      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.', ''));
      }
      • Amol June 21, 2011 at 8:02 am - Reply

        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.

      • Shane C January 15, 2015 at 5:16 pm - Reply

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

        Thanks.

        • Mark Stanger January 15, 2015 at 5:31 pm - Reply

          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.

          • Shane C January 15, 2015 at 5:38 pm - Reply

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

          • Shane C January 16, 2015 at 10:38 am - Reply

            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!

  5. Benjamin Burdick March 8, 2012 at 6:50 am - Reply

    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.

    • Mark Stanger March 8, 2012 at 1:09 pm - Reply

      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');
  6. Travis Toulson March 16, 2012 at 11:07 am - Reply

    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.

    • Mark Stanger March 16, 2012 at 1:24 pm - Reply

      Cool. Thanks for sharing this.

    • joan October 2, 2014 at 6:44 pm - Reply

      How do you call it in the catalog client script?

      • Mark Stanger October 3, 2014 at 11:36 am - Reply

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

  7. Tim August 17, 2012 at 1:30 pm - Reply

    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?

    • Mark Stanger August 17, 2012 at 4:27 pm - Reply

      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.

    • Travis Toulson August 18, 2012 at 8:24 am - Reply

      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.

  8. Simon Brown November 1, 2012 at 10:02 am - Reply

    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.

    • Mark Stanger November 1, 2012 at 12:31 pm - Reply

      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.

      • Justin Catchings January 7, 2014 at 6:27 am - Reply

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

        • Mark Stanger January 7, 2014 at 8:15 am - Reply

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

  9. Anish March 13, 2013 at 8:58 am - Reply

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

  10. neetu September 18, 2013 at 7:35 am - Reply

    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.

  11. Nate October 23, 2013 at 1:06 pm - Reply

    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.

  12. Nancy August 1, 2014 at 10:58 am - Reply

    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?

    • Mark Stanger August 1, 2014 at 3:37 pm - Reply

      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.

  13. Mark Stanger January 15, 2015 at 5:43 pm - Reply

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

  14. Richard Norton April 2, 2015 at 12:33 pm - Reply

    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?

    • Mark Stanger April 2, 2015 at 12:49 pm - Reply

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

      • Richard Norton April 4, 2015 at 9:08 pm - Reply

        Awesome as always!

  15. Jenny April 27, 2015 at 1:28 pm - Reply

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

  16. David May 13, 2015 at 4:51 am - Reply

    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

    • Mark Stanger May 13, 2015 at 6:09 am - Reply

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

  17. Ramandeep Garg September 18, 2015 at 1:19 am - Reply

    This is exactly what I was looking for.

  18. Shashank Vashist September 18, 2015 at 2:19 am - Reply

    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?

    • Mark Stanger September 18, 2015 at 8:34 am - Reply

      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.

  19. Shane C. April 4, 2016 at 12:10 pm - Reply

    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

    • Mark Stanger April 5, 2016 at 7:19 am - Reply

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

      • Tyson W October 17, 2016 at 8:00 am - Reply

        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?

        • Mark Stanger October 17, 2016 at 9:17 am - Reply

          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

  20. Virag Shah July 9, 2016 at 12:28 pm - Reply

    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

    • Mark Stanger July 9, 2016 at 1:58 pm - Reply

      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.

  21. K.Lee July 13, 2016 at 10:26 am - Reply

    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?

    • Mark Stanger July 13, 2016 at 11:44 am - Reply

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

  22. Nick September 19, 2016 at 1:56 pm - Reply

    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?

    • Mark Stanger September 19, 2016 at 2:15 pm - Reply

      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.

  23. Brett November 14, 2016 at 9:18 pm - Reply

    Thanks ServiceNow Guru,

    Saved me plenty of hours as a novice coder!

    Works a treat.

  24. Steven February 28, 2017 at 1:02 pm - Reply

    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?

    • Mark Stanger February 28, 2017 at 1:34 pm - Reply

      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.

  25. Saran May 3, 2017 at 2:09 am - Reply

    hai mark
    can i change help text dynamically for select box?
    how?

Leave A Comment