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.

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!

The post Change the Size of a List Collector Slushbucket Variable appeared first on ServiceNow Guru.

//Name of variable to move options from
var varName = 'YOUR_VARIABLE_NAME_HERE';
var leftBucket = gel(varName + '_select_0');
var rightBucket = gel(varName + '_select_1');
var selectedOptions = rightBucket.options;

//Get an array of all option IDs to move
var selectedIDs = new Array();
var index = 0;
for(var i = 0; i < selectedOptions.length; i++){
   selectedIDs[index] = i;
   index++;
}

//Move all returned options from right to left bucket and sort the results
//Switch 'rightBucket' and 'leftBucket' to move from left to right
moveSelectedOptions(selectedIDs, rightBucket, leftBucket, '--None--');
//Sort the resultant options in the left bucket
sortSelect(leftBucket);

The post Move List Collector Options appeared first on ServiceNow Guru.

function onChange(control, oldValue, newValue, isLoading) {
//Limit the number of selected options in a list collector
//Specify the max options and variable name below
var maxOptions = 5;
var varName = 'users';
var leftBucket = gel(varName + '_select_0');
var rightBucket = gel(varName + '_select_1');
var selectedOptions = rightBucket.options;
if(selectedOptions.length > maxOptions){
//Move any options with IDs greater than maxOptions back to left bucket
var selectedIDs = [];
var index = 0;
for(var i = maxOptions; i < selectedOptions.length; i++){
selectedIDs[index] = i;
index++;
}
//Move options and sort the left bucket
moveSelectedOptions(selectedIDs, rightBucket, leftBucket, '--None--');
sortSelect(leftBucket);
alert('You cannot select more than ' + maxOptions + ' options.');
}
}

Service Portal version

With the introduction of the Service Portal UI, ServiceNow severely limits the client-side API that is available. That, in addition to the completely different UI of the list collector element itself, requires a different scripting approach. The following script is designed to work as a client script in Service Portal ONLY. Just make sure you change the ‘UI type’ field to ‘Mobile’ for this script.

function onChange(control, oldValue, newValue, isLoading) {
//Limit the number of selected options in a list collector
//Specify the max options and variable name below
var maxOptions = 5;
var collectorName = 'users';
var myListCollector = g_list.get(collectorName);
var selectedOptions = g_form.getValue(collectorName).split(',');
if(selectedOptions.length > maxOptions){
//Remove the last item
myListCollector.removeItem(selectedOptions[selectedOptions.length-1]);
g_form.addErrorMessage('You cannot select more than ' + maxOptions + ' options.');
}
}

The post Limiting Number of Selections in a List Collector appeared first on ServiceNow Guru.

• The popup window view that you see when you click the ‘Edit’ button from a related list at the bottom of a form.
• The interface used to display any ‘List collector’ service catalog variable

A question that comes up pretty often is “Can I customize the slushbucket to display more information about the items shown?”. The answer to this is ‘YES’ but it might not work exactly like you think it should. Currently, you only have control over the field values shown below the slushbucket when you click on any item to highlight it. The actual values shown in the slushbucket are determined by the ‘display’ field on the dictionary entry for the referenced table. Most people would like to display multiple columns worth of data for items within the slushbucket itself, but this is not possible yet.

Adding additional fields below the slushbucket is a very simple customization though. All you have to do is personalize the ‘sys_ref_list’ list view view for the table being displayed in the slushbucket.

So, if I was displaying a slushbucket with records from the ‘Group’ (‘sys_user_group’) table would need to personalize the ‘sys_ref_list’ list view for that table. There are a couple of ways you could do this, but the way I’ll show here ensures that your updates get captured correctly so they can be migrated to another instance if necessary.

For the ‘Group’ (‘sys_user_group’) table navigate to the following URL in your browser…

https://[YOUR_INSTANCE_URL]/sys_user_group_list.do?sysparm_view=sys_ref_list

This same convention can be used for any table in your system. Simply replace ‘sys_user_group’ with the table you want to personalize. Once you’re there, just right-click the list header and personalize the list.

Any columns you add to the personalized ‘sys_ref_list’ view for a given table will be displayed below any slushbucket for that table.

The post Customizing the Slushbucket appeared first on ServiceNow Guru.

One of these differences is the List collector variable. It allows the user to select multiple items from a list of items and optionally filter those items to help in their selection. One of the most common requests I see about this type of variable deals with how to handle the filter at the top of the list collector. Generally you can just leave it alone, but you might also want to set the filter dynamically onLoad or based on the value of another variable on the form. Depending on the situation and the number of items in the list collector table you may want to remove the filter portion completely.

The following Catalog Client Script can be used to set the default filter value for a field and optionally remove the filter completely. It assumes that your List collector variable is named ‘configuration_items’. By default it sets a filter where ‘name != null’ and ‘sys_class_name (CI type)’ is anything. Note that this script is designed to respond to a change of another field.

function onChange(control, oldValue, newValue, isLoading) {
//Apply a filter to the list collector variable
var collectorName = 'configuration_items';
var filterString = 'name!=NULL^sys_class_nameANYTHING';

//Try Service Portal method
try{
var myListCollector = g_list.get(collectorName);
myListCollector.reset();
myListCollector.setQuery(filterString);
}
//Revert to Service Catalog method
catch(e){
//Find and hide the filter header elements (optional)
//Simple method for items with only one list collector
//$('ep').select('.row')[0].hide();
//Advanced method for items with more than one list collector (more prone to upgrade failure)
//var el = $('container_' + g_form.getControl(collectorName).id).select('div.row')[0].hide();

//Reset the filter query
window[collectorName + 'g_filter'].reset();
window[collectorName + 'g_filter'].setQuery(filterString);
window[collectorName + 'acRequest'](null);
}
}

function onLoad() {
//Apply a default filter to the list collector variable
var collectorName = 'configuration_items';
var filterString = 'name!=NULL^sys_class_nameANYTHING';

//Try Service Portal method
try{
var myListCollector = g_list.get(collectorName);
myListCollector.reset();
myListCollector.setQuery(filterString);
}
//Revert to Service Catalog method
catch(e){
//Hide the list collector until we've set the filter
g_form.setDisplay(collectorName, false);
setCollectorFilter();
}

function setCollectorFilter(){
//Test if the g_filter property is defined on our list collector.
//If it hasn't rendered yet, wait 100ms and try again.
if(typeof(window[collectorName + 'g_filter']) == 'undefined'){
setTimeout(setCollectorFilter, 100);
return;
}
//Find and hide the filter elements (optional)
//Simple method for items with only one list collector
//$('ep').select('.row')[0].hide();
//Advanced method for items with more than one list collector (more prone to upgrade failure)
//var el = $('container_' + g_form.getControl(collectorName).id).select('div.row')[0].hide();

//Reset the filter query
window[collectorName + 'g_filter'].reset();
window[collectorName + 'g_filter'].setQuery(filterString);
window[collectorName + 'acRequest'](null);
//Redisplay the list collector variable
g_form.setDisplay(collectorName, true);
}
}

The post Changing the Filter of a List Collector Variable via Client Script appeared first on ServiceNow Guru.