The CreatorCon Call for Content is officially open! Get started here.

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

KaMmILa__
Tera Expert

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
   
}
1 ACCEPTED SOLUTION

Harsh Vardhan
Giga Patron

This requirement can be done using below steps:

 

  1. 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. 
  2. 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

14 REPLIES 14

Thanks, Brad, that works 

One more last thing, imagine as we cannot make these selections read-only when the user select option A and if the user accidentally removes any list ( test 1 or test2 ) can we add those on the backend ? or some way to restrict the user not to remove those defaults? 

 

Please let me know if you have any other idea, 

what I am thinking is when user select option A instead of moving default values  to the right panel  we can remove those from the left panel and right panel and display an info message to the user that test 1 and test 2 will be automatically added 

and create a on-submit client script where we include these options based on the selection?

Harshal Gawali
Giga Guru

Hello,

 

I think you need to use reference qualifier to restict record for list collector field.

 

Regards,

Harshal.

KaMmILa__
Tera Expert

Thanks, Brad,

One more last thing, Imagine as we cannot make these selections read-only when the user select option A and if the user accidentally removes any list ( test 1 or test2 ) can we add those on the backend ? or some way to restrict the user not to remove those defaults? 

 

Please let me know if you have any other idea, 

what I am thinking is when user select option A instead of moving default values  to the right panel  we can remove those from the left panel and right panel and display an info message to the user that test 1 and test 2 will be automatically added 

and create a on-submit client script where we include these options based on the selection?

 

To enforce the selection of list collector values, it seems clearer to the user to show the required selections on the right, then use the second script I posted (untested) that runs onChange of the list collector variable.  The idea is it would check to be sure 1,2,3 are still selected when Option A, 4 & 5 when Option B, etc and adds them back to the right, in addition to whatever else the user manually selected.

Harsh Vardhan
Giga Patron

This requirement can be done using below steps:

 

  1. 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. 
  2. 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.