Collapse Variable Annotations on Catalog Tasks

[Punahele Tanne1]

One of the biggest complaints from our fulfillers is the expanded annotations in the Variables section of Catalog Tasks.  Since we pack the annotations with non-technical, customer-facing information on how to submit the form correctly, and because those annotations are typically flagged as "Always Expanded" for the Catalog Item, they can crowd the screen when fulfillers view their SCTASK.  They can click to collapse, but that can be tedious when the best scenario is to be to "View, then Do".

To that end, I dug into the HTML and developed a rudimentary onLoad Client Script the queries the SCTASK rendered page DOM for a CSS class specific to annotations, "icon-vcr-down", and simulates a click.

NAME: onLoad.collapseAnnotations
TABLE: SC_TASK (can be applied to SC_REQ_ITEM as well)
UI TYPE: Desktop
TYPE: onLoad

function onLoad()
{
	var annot = document.querySelectorAll('[id^=question_help_ni]');
	for (var i=0; i<annot.length; i++)
	{
		var classList = annot[i].className.split(/\s+/);
		for (var j=0; j<classList.length; j++)
		{
			if (classList[j] == 'icon-vcr-down')
			{
				//alert(classList[j]);
				annot[i].click();
			}
		}
	}
}

This has been soaking in our production instance for nearly a year without issue.  I'm happy to share this small UI improvement with the greater community.

All feedback is welcomed.  I hope others find this useful, or perhaps inspires ServiceNow to bifurcate the "Always Expanded" checkbox on the Variable » Annotation tab with some contextual options, like "Expand on Catalog Item", "Expand on Catalog Task", etc.

Thank you!

[Benjamin Charle]

Thanks for this! and I agree there should be any option to disable the "Always Expanded" for tasks

[Punahele Tanne1]

It appears I neglected to post the improved version of this script.  Any yes, it is still DOM manipulation, but since it's only fulfiller-visible and gel() methods would not work here, it may be considered forgivable.

function onLoad() {
    // Select all help icons with the class 'icon-vcr-down'
    var expandedHelpIcons = document.querySelectorAll('.icon-vcr-down');

    // Iterate and collapse via simulated click
    expandedHelpIcons.forEach(function(icon) {
        icon.click();
    });
}

Far less overhead without the double For loops.