Dynamic Dropdown Menu

cc11
Tera Contributor

I have three fields as shows in the screenshot below,

find_real_file.png

1 User selects Category = 'Software'

2 On clicking Type dropdown, we want to query a Table called 'Inventory' (where we have Category, Type & Subtype columns data) and pull matching Type values from there.

But here is another thing - while displaying Type values, we need to transform them by appending Type & Subtype together with a dot(.) and making them lowercase.

So the Type dropdown should show the values in this format ->   type.subtype

Is this possible?

Thank you,

Yogesh

1 ACCEPTED SOLUTION

Hi Yogesh,



Please check below code with few modifications.



********** Script Include *****************


var DisplayTypeMenu = Class.create();


DisplayTypeMenu.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {


getListDetails : function() {


var list = [];


var order = this.getParameter('sysparm_category');


var gr = new GlideRecord('x_137749_test_menuvalue'); // Table name was wrong, it had x_137749_test_menuvalues (extra s) instead of x_137749_test_menuvalue


gr.addQuery('localmenuname', order); // Field name was wrong, filed backend name is localmenuname


gr.query();


while(gr.next())


{


var item_val = gr.getDisplayValue('menuvalue');


list.push(item_val);


}


return JSON.stringify(list);


},


type: 'DisplayTypeMenu'


});



*********** Client Script ******************


function onChange(control, oldValue, newValue, isLoading, isTemplate) {


if (isLoading || newValue === '') {


return;


}


//g_form.clearOptions('type'); //change the field name with dependent field name


var listDetails = new GlideAjax("DisplayTypeMenu");


listDetails.addParam("sysparm_name", "getListDetails");


listDetails.addParam("sysparm_category", newValue);


listDetails.getXML(ajaxResponse);


function ajaxResponse(serverResponse) {


var answer = serverResponse.responseXML.documentElement.getAttribute("answer");


var myObj = JSON.parse(answer);


alert(myObj);


// if(myObj.length > 0)


// {


// for(var i = 0; i<myObj.length; i++)


// {


// //g_form.addOption('type', myObj[i].toLowerCase(), myObj[i].toLowerCase()); //Replace the field name where you have to assign the value


// alert(myObj[i].toLowerCase());


// }


// }


}


}



Result:


find_real_file.png


find_real_file.png


View solution in original post

39 REPLIES 39

cc11
Tera Contributor

Thanks Antin, that sounds very good!



One question -


Every time a choice list is created, do we need to provide permission to our BusinessAdmin group to the newly created Choice Record?



Thank you,


Yogesh


antin_s
ServiceNow Employee
ServiceNow Employee

No, you dont have to. You would have to create the ACL in generic way so that Business Admin has access to edit/add choice lists for certain table.



Hope this helps. Mark the answer as correct/helpful based on impact.



Thanks


Antin


cc11
Tera Contributor

Thank you very much Antin,



I will use this.


I will also wait for Shishir to see if he could get the Scripts working. The script approach would give us some more control over the menus, like doing some calculations on the values before displaying them.



Thank you again,


Yogesh


cc11
Tera Contributor

Also, in some cases, I need to pull the dropdown values from a column that exists on another table - example 'Inventory'


The script will be useful in that case as well.


Hi Yogesh,



Please check below code with few modifications.



********** Script Include *****************


var DisplayTypeMenu = Class.create();


DisplayTypeMenu.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {


getListDetails : function() {


var list = [];


var order = this.getParameter('sysparm_category');


var gr = new GlideRecord('x_137749_test_menuvalue'); // Table name was wrong, it had x_137749_test_menuvalues (extra s) instead of x_137749_test_menuvalue


gr.addQuery('localmenuname', order); // Field name was wrong, filed backend name is localmenuname


gr.query();


while(gr.next())


{


var item_val = gr.getDisplayValue('menuvalue');


list.push(item_val);


}


return JSON.stringify(list);


},


type: 'DisplayTypeMenu'


});



*********** Client Script ******************


function onChange(control, oldValue, newValue, isLoading, isTemplate) {


if (isLoading || newValue === '') {


return;


}


//g_form.clearOptions('type'); //change the field name with dependent field name


var listDetails = new GlideAjax("DisplayTypeMenu");


listDetails.addParam("sysparm_name", "getListDetails");


listDetails.addParam("sysparm_category", newValue);


listDetails.getXML(ajaxResponse);


function ajaxResponse(serverResponse) {


var answer = serverResponse.responseXML.documentElement.getAttribute("answer");


var myObj = JSON.parse(answer);


alert(myObj);


// if(myObj.length > 0)


// {


// for(var i = 0; i<myObj.length; i++)


// {


// //g_form.addOption('type', myObj[i].toLowerCase(), myObj[i].toLowerCase()); //Replace the field name where you have to assign the value


// alert(myObj[i].toLowerCase());


// }


// }


}


}



Result:


find_real_file.png


find_real_file.png