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.

Important note!!! Changing the size of your list collector has NO effect on the number of items displayed in that list collector. The number of entries in list collectors in your system is controlled by a global property. You can increase the number of entries in your filter, but that also incurs a performance hit when working with slushbucket filters since that whole number of items needs to be loaded every time in the slushbucket. You really don’t want to increase this number to much more than the default of 100.

The property is called ‘glide.xmlhttp.excessive’ and is documented here. It applies to all slushbuckets in your system (including those for list collectors).

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.

As of the Winter 2010 Stable 2 release, it is now possible to hide the filter portion of a list collector variable completely. This can be accomplished by adding the ‘no_filter’ attribute to the ‘Attributes’ field on the variable form.
function onLoad(){
    var varName = 'YOUR_VARIABLE_NAME_HERE';
    var height = '100'; //Optional
    var width = '250'; //Optional
    try{
        //Get the left and right bucket input elements
        var leftBucket = $(varName + '_select_0');
        var rightBucket = $(varName + '_select_1');
       
        //If the element exists
        if(leftBucket){
            //Adjust the bucket height (default is 300px)
            if(height){
                leftBucket.style.height = height + 'px';
                rightBucket.style.height = height + 'px';
            }
           
            if(width){
                //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');
        }
    }catch(e){}
}

Here’s the result!