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

what is your script include code?


Sure,



-----------Script Include--------------


var DisplayTypeList = Class.create();


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


getListDetails : function() {


var list = [];


var gr = new GlideRecord('x_12345_app_inventory'); //Replace with your table name


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


//gr.addQuery('element', order); //Add your queries here


gr.addQuery('inventory_cat',cat);


gr.query();


while(gr.next())


{


var item_val = gr.getValue('inventory_type'); // Replace the field names from where you have to fetch the value


list.push(item_val);


}


return JSON.stringify(list);


},


      type: 'DisplayTypeList'


});


okay, in your client script you are using variable sysparm_order but in script include you are using this sysparm_category, it should be same. Please change this in client script to



listDetails.addParam("sysparm_category", newValue);


Thank you Shishir,



Copying my script-include & client-script below,


At the moment, I am doing alert(myObj); in my client script before the for loop to see if it has anything before it enters the loop. But it still prints null.


Is it because Category dropdown on the front end & Inventory_Cat on the backend are Reference Variables?


Also, I did not make any change to the line listDetails.addParam("sysparm_name", "getListDetails"); from your original code. Not sure if its applicable to my case?



-------Script Include-------


var DisplayTypeList = Class.create();


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


getListDetails : function() {


var list = [];


var gr = new GlideRecord('x_12345_app_inventory'); //Replace with your table name


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


//gr.addQuery('element', order); //Add your queries here


gr.addQuery('inventory_cat',order);


gr.query();


while(gr.next())


{


var item_val = gr.getValue('value'); // Replace the field names from where you have to fetch the value


list.push(item_val);


}


return JSON.stringify(list);


},


      type: 'DisplayTypeList'


});




------------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("DisplayTypeList");


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


}


}


}


}


Hope you have the script include client callable, let me know your instance details, i can have a look.