TMACUL

http://www.servicedeskusers.com/Dependent_dropdowns

Blog Post created by TMACUL Champion on Jan 1, 2016
This is Google's cache of http://www.servicedeskusers.com/Dependent_dropdowns. It is a snapshot of the page as it appeared on 22 Nov 2015 06:12:37 GMT.

 

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

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">

 

 

 

         
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        

Outcomes