L
ist collector variables are a great way (currently the only way) to allow a user to select multiple options from a referenced table in a single variable on a service catalog item. The list collector variable allows you to choose from one to many (potentially hundreds or more) selections. What if you wanted to limit the number of items that a user could select? This script does exactly that. It restricts the selected items list on a list collector variable to whatever amount you choose. Just use the catalog client script below and set the variables for the maximum number of selections and the name of the variable to apply the restriction to.
Name: Limit Selections
Type: onChange
UI type: Desktop
Script:
//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.
Name: Limit Selections
Type: onChange
UI type: Mobile
Script:
//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.');
}
}
Very cool, love this trick!
This is pretty cool. Can you do something similar with a slushbucket on an incident child ticket related list? For example, if you use the “Edit..” button and you get a slushbucket of available incidents to apply to the parent, I want to create a confirmation popup that will warn them before they submit the selected incidents. I’ve tried to find the code for the “save” and “cancel” buttons on this form. I could tie in some code to the “save” button. But in the html, it specifies it as the sysverb_save id. I can’t find this anywhere. It’s probably right in front of my face. Anyway, if you could provide something similar to what you did above for my scenario, that would be awesome and much appreciated. Thanks!
Unfortunately, you can’t run client scripts on the standard slushbucket interface without some pretty bad hacks. That interface is locked down so that there’s nothing you can do with it really aside from setting a default filter and customizing the columns that show below the slushbucket.
Mark,
Is there a way to gain access to the slush bucket values within a script and do a dot walk to the reference table based on that selected value?! Here is an example;
I pick an application from left to right and then be able to identify this selected application and dot walk to its reference table.
There’s not a way to do that directly since the values are just a comma-separated string. You would have to get the value, parse the sys_id, and then query for the record.
Hi Mark,
This is cool.
How can I do same at the form level. I have created a slushbucket variable and I want to get the value selected using client script (onLoad & onChange). I used similar approch , but it didn’t worked.
var varName = ‘u_yla_equipment_size’;
var leftBucket = gel(varName + ‘_select_0’);
var rightBucket = gel(varName + ‘_select_1’);
var selectedOptions = rightBucket.options;
alert(selectedOptions);
This is my onLoad code, I am not even getting alert popup. Could you please suggest me how to get the values of the selected items in slushbucket in form, so that I can make other dependent fields mandatory ( Based on selection).
Regards,
ND
Mark – do you know if it is possible to modify this script to increase the number of records that are displayed in the left bucket? I have a list collector that is looking at a table with 195 records. It would be nice to increase the size of the left bucket to display up to 200 records.
thanks.
There’s no way that I know of to do that with a script, but you can increase the number of items globally. Check out the ‘glide.xmlhttp.excessive’ property that’s described in this post.
https://servicenowguru.wpengine.com/scripting/client-scripts-scripting/change-size-list-collector-slushbucket-variable/
Hi Mark, I Tried creating the catalog client script from above but am getting an onChange script error:
~~~~~~~
onChange script error: TypeError: ‘null’ is not an object function h_84d736a5f88c3000ce3de67bda52717f(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 = new Array(); 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.'); } }
~~~~~~
any idea from looking at this? Thanks a bunch. Working with Theresa @ Triad on this GSA implementation.
-e
Tell her I said hello :). I’m not aware of any issue with the script. My best guess is that there’s some copy/paste issue with the script editor. You might try turning off the script editor on your text field and then re-pasting the script from this article.
Hello Mark,
I tried, re-copying the script above into a textedit on a mac with no rtf… just plain text. Then re-copied to clipboard and then went to the catalog client script. Deleted the old script, turned off syntaxt formatting, clicked update and went to the “maintain item” with the list collector variable and the error from above is still generating. Any other itdea’s? Thanks, -Erik
I just tested this on a ServiceNow demo instance and it worked perfectly there. I just pasted directly into a new ‘onChange’ catalog client script, changed the name of the variable to match in the script, and ran it. You should try to see if you can get it working on a test in demo. My guess is that there’s something else in your environment causing issues.
Cool, will do that… thanks so much for the reply…!!! Will reply back once we figure out what we did wrong… 🙂
So i am getting an error this error using this script
WARNING at line 11: Use the array literal notation [].
When I change the (); to []; it still doesn’t work. Please advise. Using Fiju
You can disregard that warning. The script should work fine regardless.
Hello, I have this working in a record producer on the CMS portal. However, the new Helsinki Service Portal does not support DOM manipulation. Is there a way to limit the number of selected options in a list collector in the Service Portal?
Unfortunately no. This is the big challenge with service portal at the moment. Lots of flash and marketing hype, but really limited API and client scripting flexibility.
Hi Mark,
Thank you for the great post. I used this script it on one of my variable and it worked fine in the servicenow native UI. But, we are on Helsinki and the business users are using service portal to log their request. List collector behave differently on service portal. By different I mean, their is no right and left slush bucket so your script doesn’t work on service portal. Can you please provide a modified version of your script that could work even on portal list collector variable?
Thank you!
Sure, check out the post above for the newly-added Service Portal version of this script. You’ll need to have 2 separate client scripts…each one running for a different UI type (Desktop and Mobile).
Hi Mark , How can i limit the number of entries on a list collector on a form?
You can use this onchange script to limit the options in the list collector in Service Catalog.
varName will be the name of list collector and maxSelections will be the maximum number options.
function onChange(control, oldValue, newValue, isLoading) {
var varName = ‘users’;
var maxSelections = 20;
$$(‘#’ + varName + ‘_select_0 option’)
.each(function(elem,index){
if(index >= maxSelections)
elem.remove();
});
}