List collector variables are a great way to collect multiple pieces of information about referenced records in a single variable in the Service Catalog. One complaint I get about these variables is that they take up a lot of space on the screen. While there’s not a lot you can do with regular slushbuckets in the system, List Collector variables have a little bit more flexibility because they can be manipulated with client scripts. Check out the SNGuru List Collector archives for more examples of cool List Collector modifications you can use.
In this article I’ll show you how you can reclaim some of that Service Catalog screen real estate by modifying the size of a list collector variable using a catalog client script.
The script is pretty simple. All you need to do is give it the name of the list collector variable you would like to resize, along with the width and height. In my testing I’ve found that the look of the variable can start to get kind of messy if you set a width less than 250 so I wouldn’t go any smaller than that.
var varName = 'YOUR_VARIABLE_NAME_HERE';
var height = '100'; //Optional
var width = '250'; //Optional
//Get the left and right bucket input elements
var leftBucket = $(varName + '_select_0');
var rightBucket = $(varName + '_select_1');
//If the element exists
//Adjust the bucket height (default is 300px)
leftBucket.style.height = height + 'px';
rightBucket.style.height = height + 'px';
//Adjust the bucket width (default is 340px)
leftBucket.style.width = width + 'px';
rightBucket.style.width = width + 'px';
//Fix Fuji/Geneva width issue
leftBucket.up('.slushbucket').style.width = width*2 + 100 + 'px';
//Fix the expanding item preview issue
$(varName + 'recordpreview').up('td').setAttribute('colSpan', '3');