Limiting Number of Selections in a List Collector

List 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.


Limit Selections Catalog Client Script
Name: Limit Selections
Type: onChange
UI type: Desktop
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 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.

Limit Selections Catalog Client Script (Service Portal version)
Name: Limit Selections
Type: onChange
UI type: Mobile
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.');
}
}

Date Posted:

June 18, 2010

Share This:

21 Comments

  1. Joe July 9, 2010 at 5:55 am

    Very cool, love this trick!

  2. computerdr74 August 12, 2010 at 8:35 am

    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!

    • Mark Stanger August 12, 2010 at 9:00 am

      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.

  3. Matt Farahmand January 24, 2012 at 3:19 pm

    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.

    • Mark Stanger January 24, 2012 at 7:27 pm

      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.

  4. ND February 8, 2012 at 9:23 am

    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

  5. RickM August 9, 2012 at 10:27 am

    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.

  6. Erik Myrold August 24, 2012 at 11:53 am

    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

    • Mark Stanger August 24, 2012 at 11:57 am

      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.

      • Erik Myrold August 27, 2012 at 10:07 am

        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

        • Mark Stanger August 27, 2012 at 11:43 am

          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.

          • Erik Myrold August 27, 2012 at 11:46 am

            Cool, will do that… thanks so much for the reply…!!! Will reply back once we figure out what we did wrong… :-)

  7. Chenelle Stewart October 28, 2015 at 11:47 am

    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

    • Mark Stanger October 28, 2015 at 11:55 am

      You can disregard that warning. The script should work fine regardless.

  8. Leslie Know September 28, 2016 at 7:39 am

    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?

    • Mark Stanger September 28, 2016 at 7:47 am

      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.

  9. Mohammed March 28, 2017 at 8:37 am

    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!

    • Mark Stanger March 28, 2017 at 1:34 pm

      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).

  10. amrita June 7, 2017 at 5:48 am

    Hi Mark , How can i limit the number of entries on a list collector on a form?

    • Mila Morales September 14, 2017 at 9:00 am

      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();
      });
      }

Comments are closed.

Categories

Tags

Loading

Fresh Content
Direct to Your Inbox

Just add your email and hit subscribe to stay informed.