Jump to: navigation, search

Introduction

On a regular basis, people ask on the forums for a solution implementing dependent dropdowns.

dependent dropdowns

values in a dropdown are depending on a selection made in an earlier dropdown field.

Since selecting a value in a dropdown is done client-side, at least some part of the solution will include (client-side) javascript coding. Possible solutions may exist out of these:

• use hidden frames to call a custom made HTMPL file containing the values for the next dropdown, then use this data to populate the dropdown in the main window
• an AJAX implementation
• find a way to call the CA Service Desk web services using javascript, get the necessary values from the server and populate the dropdown
• pre-load all data when your form gets loaded, then use javascript to display values when making selections in the dropdowns

• populate a dropwdown based on values from a previous one (fillDependantDropdown)

• save the values to the database once a selection is made in the last dropdown (setrootcause)

• display values back from the database when the form is initially loaded (readrootcause)

All together now

This solution will display 3 dependent dropdowns on the detail_cr.htmpl form and allow you to view, select and store values into the rootcause field using these dropdowns.

• At the top of your page, right after all the javascript include files, create your own javascript tag containing this:

var allRootCauses = new Array();
var thevalues = new Array();
 
var somevalue;
<PDM_LIST PREFIX=rootcauses WHERE="delete_flag = 0" FACTORY=rc>
somevalue = "$rootcauses.id" + "|" + "$rootcauses.sym";
allRootCauses[allRootCauses.length] = somevalue;
</PDM_LIST>
 
var tempArray;
var somecounter;
var temp;
var tempArr1;
var tempArr2;
var prevlevel1;
prevlevel1 = "";
var prevlevel2;
prevlevel2 = "";
var len1;
var len2;
var len3;
len1 = -1;
len2 = -1;
len3 = -1;
 


for (somecounter=0; somecounter < allRootCauses.length; somecounter++) {
 
tempArr1 = new Array();
tempArr1 = allRootCauses[somecounter].split("|");
 
tempArr2 = new Array();
tempArr2 = tempArr1[1].split(".");
 
if (tempArr2[0] != prevlevel1) {
len1+= 1;
thevalues[len1] = new Array();
prevlevel1 = tempArr2[0];
len2 = -1;
len3 = -1;
}
 
 
if (tempArr2[1] != prevlevel2) {
len2 += 1;
thevalues[len1][len2] = new Array();
prevlevel2 = tempArr2[1];
len3 = -1;
}
 
len3 += 1;
thevalues[len1][len2][len3] = allRootCauses[somecounter];
 
}
 
var thelevel1;
var thelevel2;
var thelevel3;
function readrootcause() {
var readcounter;
var readid;
var tempsplit;
for (readcounter=0; readcounter < allRootCauses.length; readcounter++) {
readid = allRootCauses[readcounter].split("|")[0];
 
if (readid == "$args.rootcause") {
tempsplit = allRootCauses[readcounter].split("|")[1].split(".");
thelevel1 = tempsplit[0];
thelevel2 = tempsplit[1];
thelevel3 = tempsplit[2];
return;
}
}
}
 
 


function fillDependantDropdown(indicator) {
 
if (_dtl.edit) {
 
var list1index;
var list2index;
 
list1index = document.main_form.list1.selectedIndex-1;
list2index = document.main_form.list2.selectedIndex-1;
 
var i;
var somevalue;
var sometext;
 
if (indicator == 1) {
for (i=document.main_form.list1.options.length; i>0; i--) {
document.main_form.list1.options[i] = null;
}
for (i=document.main_form.list2.options.length; i>0; i--) {
document.main_form.list2.options[i] = null;
}
for (i=document.main_form.list3.options.length; i>0; i--) {
document.main_form.list3.options[i] = null;
}
document.main_form.list1.options[0] = new Option("-- select --", "");
for (i=0; i<thevalues.length; i++) {
somevalue = new Array();
somevalue = thevalues[i][0][0].split("|");
sometext = new Array();
sometext = somevalue[1].split(".");
document.main_form.list1.options[i+1] = new Option(sometext[0], somevalue[0]);
if (sometext[0] == thelevel1) {
document.main_form.list1.options[i+1].selected = true;
}
}
return;
}
 
if (indicator == 2) {
for (i=document.main_form.list2.options.length; i>0; i--) {
document.main_form.list2.options[i] = null;
}
for (i=document.main_form.list3.options.length; i>0; i--) {
document.main_form.list3.options[i] = null;
}
document.main_form.list2.options[0] = new Option("-- select --", "");
for (i=0; i<thevalues[list1index].length; i++) {
somevalue = new Array();
somevalue = thevalues[list1index][i][0].split("|");
sometext = new Array();
sometext = somevalue[1].split(".");
document.main_form.list2.options[i+1] = new Option(sometext[1], somevalue[0]);
if (sometext[1] == thelevel2) {
document.main_form.list2.options[i+1].selected = true;
}
}
return;
}
if (indicator == 3) {
for (i=document.main_form.list3.options.length; i>0; i--) {
document.main_form.list3.options[i] = null;
}
document.main_form.list3.options[0] = new Option("-- select --", "");
for (i=0; i<thevalues[list1index][list2index].length; i++) {
somevalue = new Array();
somevalue = thevalues[list1index][list2index][i].split("|");
sometext = new Array();
sometext = somevalue[1].split(".");
document.main_form.list3.options[i+1] = new Option(sometext[2], somevalue[0]);
if (sometext[2] == thelevel3) {
document.main_form.list3.options[i+1].selected = true;
}
}
}
}
 
}
 


function setrootcause(thenewvalue) { document.main_form.elements["SET.rootcause"].value = thenewvalue; }
This code uses a pdm_list tag to get all rootcauses from the server and populate the allRootCauses javascript array.
After all code is parsed by the server, it should look like so:
allRootCauses[0] = "40001|Hardware.Server.Error"; 
allRootCauses[1] = "40002|Hardware.Server.Component Failure"; 
allRootCauses[2] = "40003|Hardware.Network.Firewall"; 
allRootCauses[3] = "40004|Hardware.Network.Router"; 
allRootCauses[4] = "40005|Hardware.Network.Cable"; 
allRootCauses[5] = "40006|Software.Browser.Settings"; 
allRootCauses[6] = "40007|Software.Browser.Version";
Then, the code loops through these root causes and converts them into an array of arrays much like so:
thevalues[0][0][0] = "40001|Hardware.Server.Error" 
thevalues[0][0][1] = "40002|Hardware.Server.Component Failure" 
thevalues[0][1][0] = "40003|Hardware.Network.Firewall" 
thevalues[0][1][1] = "40004|Hardware.Network.Router" 
thevalues[0][1][2] = "40005|Hardware.Network.Cable" 
thevalues[1][0][0] = "40006|Software.Browser.Settings" 
thevalues[1][0][1] = "40007|Software.Browser.Version"

This section adds the 3 dropdown fields to your form and makes sure that the saved rootcause values are set (by calling the readrootcause).

 

• on the BODY tag, make sure you add the setting of your dropdowns (for edit mode):

<BODY class=detailro onLoad="loadActions();fillDependantDropdown(1);fillDependantDropdown(2);fillDependantDropdown(3)" onUnload="unloadActions()">

</script> <input type=hidden NAME=SET.rootcause value="$args.rootcause">