If you use the Variable Editor on your task forms (incident, change request items, etc.) you are aware that they are not collapsable. Depending on the amount of variables you have from your record producer or request item etc, this may result in a large portion of the displayed form. I have given the ability to expand, collapse these variables. I have even set a "startopen" variable (true/false) to determine if you want this variable editor expanded or collapse upon page load.
Interestingly enough there is really only 1 constant id that I can find in this variable editor. So I used the prototypejs DOM traversal functions using this id as the base. This does mean that if Service-Now ever modifies the HTML format of this variable editor, this may not continue to work. For now it is pretty cool.
Here is how it works:
Just to start, here is the general idea of what the variable editor looks like, for those not too familiar with it (below). It is the similar form that was created in a record producer, request item etc.
I created a single client script to run onload. You can create this on the Incident, Request Item, etc. tables, or wherever you use the variable editor, to work for you.
function onLoad() {
if ($('variable_map')){
var startopen = 'true';
var variables = $('variable_map').up(1);
var items = variables.nextSiblings();
var cline = $('variable_map').up(1).previous('tr').down('td');
if (startopen == 'false'){
mytoggler();
cline.setStyle({backgroundImage:"url(images/section_hide.gifx)", backgroundRepeat:'no-repeat', backgroundPosition:'99% 50%'});
}
else {
cline.setStyle({backgroundImage:"url(images/section_reveal.gifx)", backgroundRepeat:'no-repeat', backgroundPosition:'99% 50%'});
}
cline.observe('click', mytoggler);
}
function mytoggler() {
for (var i = 0; i < items.length; i++){
var item = items<i>;
if (item.inspect().indexOf('<script>item.toggle();
if(item.visible()){
cline.setStyle({backgroundImage:"url(images/section_reveal.gifx)", backgroundRepeat:'no-repeat', backgroundPosition:'99% 50%'});
} else {
cline.setStyle({backgroundImage:"url(images/section_hide.gifx)", backgroundRepeat:'no-repeat', backgroundPosition:'99% 50%'});
}
}
}
}
}
Here are some simple screenshots of how it looks when applied.
First, the client script adds the same collapse icon to the right.
When clicked the variables collapse and the icon changes to the same expand icon.
