The current page could have changed in the meantime. Learn more
Full versionText-only versionView sourceTip: To quickly find your search term on this page, press Ctrl+F or ⌘-F (Mac) and use the find bar.
Dependent dropdowns
From SDU
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.
- 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">
This page was last modified 05:23, 30 November 2010. This page has been accessed 11,526 times. Content is available under Attribution-Noncommercial-Share Alike 3.0 Unported. Disclaimers |
Powered by IpbWiki: Integration Of Invision Power Board and MediaWiki © GlobalSoft
Powered by MediaWiki © Wikimedia