Auto select values based in list collector base on another variable..

KaMmILa__ · ‎09-17-2020

We have a multiple choice variable with choices A, B, C and a list collector which is referred to a table and the list in list collector are 1,2,3,4,5,6,7,8

My requirement is when the user select Option A, then in the list collector should auto select 1,2,3 and make them read-only as we don't want the user to remove those

can we remove the 1,2,3 from the left panel of the list collector?

and the user may need to select the other values too(4,5,6,7,8)

, I came across this link and tried implementing this but stuck

https://www.servicenowguru.com/scripting/client-scripts-scripting/move-list-collector-options/

I created an on change client script based on the above link and selected the option A where exactly I need to set 1,2 3, values ?

function onChange(control, oldValue, newValue, isLoading) {
   if (isLoading || newValue == '') {
      return;
   }
if(newValue=="A")
	{
		//Name of variable to move options from
var varName = 'csv_netbadge_int_ldap_attributes1';
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(rightBucket);
	}
   //Type appropriate comment here, and begin script below
   
}

Harsh Vardhan · ‎09-20-2020

This requirement can be done using below steps:

Create one onChange catalog client based on choice value, where you will filter those auto populate value from list collector and then user will see rest of other values to select and add it manually from left to right bucket.
Create onSubmit Client to set those auto populate value while submitting the form request, you have to use here glide ajax and client callable script include

Sample Code:

First onChange catalog client script

function onChange(control, oldValue, newValue, isLoading) {
	if (isLoading || newValue == '') {
		return;
	}


	var collectorName = 'u_ldap'; // your list collector name
	var filterString = '';
	if(newValue == 'Option A')
		filterString='name!=Test 1^ORname=NULL^name!=Test 2^ORname=NULL^name!=Test 3';
	else if(newValue == 'Option B')
		filterString='name!=Test 3^ORname=NULL^name!=Test 4^ORname=NULL';

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

}

onSubmit Catalog Client script using glide ajax :

function onSubmit() {
	//Type appropriate comment here, and begin script below
	// 	var newValue = g_form.getValue('choose_option_here');

	var ajax = new GlideAjax('checkSubmit');
	ajax.addParam('sysparm_name', 'checkgp');
	ajax.addParam('sysparm_name_choice', g_form.getValue('choose_option_here'));
	ajax.getXML(populateValues);

	function populateValues(response) {
		var answer = response.responseXML.documentElement.getAttribute("answer");

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

		var res = JSON.parse(answer);

		for(var i= 0; i< res.length ; i ++){

			var option = document.createElement("option");

			option.value =  res[i].id;
			option.text = res[i].name;

			rightBucket.add(option);
		}

		sortSelect(rightBucket);

	}


	return false; // to test i set it so you can see the value
}

Script Include:

var checkSubmit = Class.create();
checkSubmit.prototype = Object.extendsObject(AbstractAjaxProcessor, {

	checkgp: function(){

		var parm = this.getParameter('sysparm_name_choice');
		var qr='';
		if(parm == 'Option A'){
			qr +='name=Test 1^ORname=Test 2^ORname=Test 3';
		}
		else if(parm == 'Option B'){
			qr +='name=Test 3^ORname=Test 4';
		}
		var arr = [];
		var gr= new GlideRecord('cmdb_ci_endpoint_ldap');
		gr.addEncodedQuery(qr);
		gr.query();
		while (gr.next()) {
			var obj={};

			obj.name = gr.getValue('name');
			obj.id = gr.getUniqueValue();
			arr.push(obj);
		}
		var json = new JSON().encode(arr);
		return json;


	},

	type: 'checkSubmit'
});

Hope it will help

Note: This way you can restrict user to not remove the autopopulated values in list collector.

View solution in original post

Brad Bowman · ‎09-18-2020

OK, so when this form loads the 12 records are seen in the left box? Then when you select A it changes to loading and stays there? If this script is deactivated it doesn't change to loading when A is selected? If this is the case, try commenting out the lines from var leftBucket to sortSelect(leftBucket) so that it's not first clearing the selections from right to left.

KaMmILa__ · ‎09-18-2020

This is doing on load and when I to commenting the code it is displaying the values

 //now move 1,2, and 3 if Option A is selected, etc.
 var leftBucket2 = gel(varName + '_select_0');
 var rightBucket2 = gel(varName + '_select_1');
 var selectedOptions2 = leftBucket2.options;
 var selectedIDs2 = new Array();
 var index2 = 0;
 for(var j = 0; j < selectedOptions2.length; j++){
  if(newValue == 'A');
   if(selectedOptions2[j].value == '1' || selectedOptions2[j].value == '2' || selectedOptions2[j].value == '3'){
    selectedIDs2[index2] = j;
    index2++;
   }
  }
  //repeat the 2 if blocks inside the for loop if Option B, then select 4,5,6 - or whatever your requirements are...
 }
 rightBucket2.options.length = '0';
 moveSelectedOptions(selectedIDs2, leftBucket2, rightBucket2);
 sortSelect(rightBucket2);
}

Can you try in my personal instance , just replicated the issue

https://dev77529.service-now.com/nav_to.do?uri=%2Fcom.glideapp.servicecatalog_cat_item_view.do%3Fsysparm_id%3D4ceb56cadbd71010b010e9c94896196d%26v%3D1

admin/Bv0tXmjk8MWC

when option A is selected then Test1, test2 should be in the right panel , and user can still select other options

if option B then just test 3 and test 4 should select

Brad Bowman · ‎09-18-2020

That was helpful to have access to the PDI. It's working now. I had to add the Isolate script field to the catalog client script form and uncheck the box, but even so the Loading condition remained. I turned on my browser developer tools and saw a console error on load that rightBucket2 was not defined. Curious as the script wasn't even running yet, but I guess it checks these things on form load. This confused me for a bit, but it turns out I had a ; at the of the if(newValue == 'A') line instead of a {. After correcting that, the records loaded on the left, but nothing happened when I chose Option A. In this case you want the if condition to evaluate selectedOptions2[j].label (the Display Value / Name field), not .value (the sys_id). I corrected the script in my earlier post to reflect these changes.

KaMmILa__ · ‎09-18-2020

I really appreciate your help Brad

Can you please add some comments so that I will know what exactly the code is doing here and also

just curious when I select the Option A the test 1 and test 2 are coming from left to right ( as expected ) when we click on option B they are going back to left side ( expected ) is there a way we can NOT show the highlighted part ?(gray color on left panel and Blue on RIght

Brad Bowman · ‎09-18-2020

I added these 2 lines to the end of the script in your PDI and got pretty close - no highlighting on the left, only the first one in blue on the right. I couldn't figure out how to not highlight anything on the right.

 window[varName + 'acRequest'](null);
 rightBucket2.options.selectedIndex = '0';