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');
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
Awesome. I’m glad it helped!
very helpful script.
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)
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.
Is it possible to change the size of slushbucket that comes when you click edit in a related list?
It’s not possible to modify the appearance of that slushbucket at all currently.
Thanks for the prompt response.
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.
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.
Thanks Mark, I found a conflicting script was the culprit, the script works fine.
Apologies for the mistake. Thanks again for you help.
No problem, I’m glad you got it working!
Hey Mohammed, what was the issue? Even I am facing same issue with Eureka.
Thanks in advance.
I got the solution, for the above script need to add ‘px’ to the value
Value without ‘px’ was working good in Dublin, using value followed by ‘px’ works well in Eureka.
Is there any way to do edit the size of the list collector in the workflow editor (when adding a catalog task)?
Hey Bryan, none that I’m aware of currently.
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.
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
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.
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.
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?
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.
This worked, brill thanks v.much
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!
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.
Thanks Mark. Works great and it’s just what I was looking for.
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?
Sure, you can send the script and we will check.