Change the Size of a List Collector Slushbucket Variable

///Change the Size of a List Collector Slushbucket Variable

Change the Size of a List Collector Slushbucket Variable

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!

By | 2018-07-09T15:00:04-06:00 November 24th, 2010|Categories: Client scripts|Tags: , , , |28 Comments

About the Author:

28 Comments

  1. matthew April 4, 2013 at 9:18 am - Reply

    Mark-

    I found this article through a SN community post. I think it will help me with my request:

    Change the height and width of the list collector variable…out of the box it is HUGE.

    I wasn’t sure where to put this script at first (SN Novice) so I created a Catalog Client Script) and applied this script to the catalog service I created.

    Worked great after I added the variable name.

    Thanks for this info

  2. Pratibha Solanki April 18, 2013 at 6:46 am - Reply

    very helpful script.

  3. Mark Sandner January 27, 2014 at 4:33 pm - Reply

    Hi Mark,
    I was asked this question: can I change the width of all list collectors (slush-buckets) that reference the same table via a business rule or globally in some way? For example, I have variables on different cat alog items, and they all reference the Company table. The companies, for sake of argument, are all 100+ character long. Could a similar script be applied? Would it be easier if the variable were in a variable set?
    I have used the above script before, and it worked for me just fine.
    Many thanks, Mark (Sandner)

    • Mark Stanger January 27, 2014 at 4:36 pm - Reply

      There’s no way to do this globally that I’m aware of. A variable set would allow you to set up the variable and script in one place and reuse it over and over again though.

  4. Bala November 3, 2014 at 3:33 am - Reply

    Hi Mark,

    Is it possible to change the size of slushbucket that comes when you click edit in a related list?

    • Mark Stanger November 3, 2014 at 7:20 am - Reply

      It’s not possible to modify the appearance of that slushbucket at all currently.

      • Bala November 3, 2014 at 7:36 am - Reply

        Hi Mark,

        Thanks for the prompt response.

  5. Mohammed November 27, 2014 at 8:41 am - Reply

    Hi Mark,

    I’ve used the client script numerous times and it has been working perfectly for me, but I have noticed that on Eureka the width of the slush buckets don’t seem to re-size.
    Anything that you’ve noticed?
    Is there a workaround available for this?

    Thanks in advance.

    • Mark Stanger December 2, 2014 at 6:09 pm - Reply

      I’ve used this successfully on a Eureka instance, so it should work. You can test against a clean demo instance to verify. You can also check the browser error console to see if another client script is causing an issue.

      • Mohammed December 7, 2014 at 4:50 pm - Reply

        Thanks Mark, I found a conflicting script was the culprit, the script works fine.
        Apologies for the mistake. Thanks again for you help.

        • Mark Stanger December 8, 2014 at 7:29 am - Reply

          No problem, I’m glad you got it working!

        • Ashik January 23, 2015 at 3:43 am - Reply

          Hey Mohammed, what was the issue? Even I am facing same issue with Eureka.

          Thanks in advance.

          • Ashik January 27, 2015 at 6:29 am - Reply

            Hi,
            I got the solution, for the above script need to add ‘px’ to the value
            eg.var width=’250px’

            Value without ‘px’ was working good in Dublin, using value followed by ‘px’ works well in Eureka.

  6. Bryan March 24, 2015 at 12:16 pm - Reply

    Hi Mark,

    Is there any way to do edit the size of the list collector in the workflow editor (when adding a catalog task)?

    Thanks, Bryan

  7. John Gilaspy August 25, 2015 at 10:54 am - Reply

    Mark,
    Just a heads up, but it appears that Fuji, patch 6, breaks the height adjustment. I had it working in my dev instance perfectly until it got patched over the weekend. Haven’t been able to figure out a fix for it.

    Thanks,
    John

    • Mark Stanger August 25, 2015 at 11:32 am - Reply

      Looks like the height works fine, but I’ve confirmed that width doesn’t resize in demo004. I fixed that by setting the width to ‘250px’ instead of just ‘250’ as shown in the following line…

      var width = ‘250px’; //Optional

  8. Ramiro Rincon September 9, 2015 at 10:00 am - Reply

    Hi Mark,

    Is it possible to use this code to make a list collector be aligned to the left in a catalog item?
    In Fuji patch 7 hotfix 5, the list collector is displayed centered in the form, and a client wants that field aligned to the left.
    What would be the property to manipulate this?

    Thanks in advance.

    • Mark Stanger September 9, 2015 at 11:47 am - Reply

      ServiceNow has made this much more difficult to do without issues in the Fuji release. I’m not aware of any way to do this and have the end result look good at this point.

  9. Dave Edgar January 27, 2016 at 9:47 am - Reply

    Hi Mark
    I’m running Fuji patch 7 and this doesn’t seem to be changing the height, width is changing fine. I only want to show say 3 items to select in the list of items.
    I also want to hide the filter. Do you know how to do that in the same script, is that possible?

    • Mark Stanger January 27, 2016 at 10:38 am - Reply

      I’ve modified the script above with something that should work better. I’ve also included a section on the ‘no_filter’ attribute that you can add to the variable to hide the filter.

      • Dave Edgar February 1, 2016 at 11:03 am - Reply

        This worked, brill thanks v.much

  10. Jacquelyn February 5, 2016 at 9:32 am - Reply

    Hi Mark,

    Is there any way to re-size the search bar?

    I added a Container Start variable before the List Collector variable and that gives me the perfect size, but then the List Collector is no longer aligned properly, it moves to the far left of the page.

    Thanks for your help!

    • Mark Stanger February 9, 2016 at 7:16 am - Reply

      I see what you’re saying. I’ve updated the script above with something that should work better. Give it a try and let me know how it goes.

  11. Flemming February 26, 2017 at 2:31 am - Reply

    Thanks Mark. Works great and it’s just what I was looking for.

  12. Donna Lively August 23, 2017 at 7:58 am - Reply

    Mark, I tried your script to control the size of a List Collector variable but cannot get it to work. Can I send the script to and have you take a look?
    Sincerely,
    Donna Lively

    • Mila Morales August 30, 2017 at 9:28 am - Reply

      Hi Donna,
      Sure, you can send the script and we will check.

Leave A Comment