Difference between revisions of "Dependent dropdowns"

Revision as of 10:05, 24 March 2009

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

All these solutions will have advantages and disadvantages (e.g. calling webservices, using AJAX and even the 'hidden frame solution' may work a little slower compared to pre-loading all data. On the other hand, pre-loading data may take a long time if you have hundreds of values)

Let's take a look at an implementation that pre-loads all data.

Components

When a web server gets a request to serve a page it will first parse all server side code (HTMPL) and replace that code with valid HTML code before passing that HTML back to the requester of the page.

To start, you will want to have a place in the database where you store the values of the drowndowns and their dependencies. This can be done in many different ways (having 3 custom tables, then using 2 more to store the LREL between them), but let's keep it simple for now: as you may know, the request area structure is much like denpendent dropdowns: once you select a node in the tree, you get access to the underlying nodes.

As a sidenote, you could simply use one field similar to the request area to implement this functionality instead of using all dropdown fields. But in case you still want to go ahead with the dropdowns, read on...

For this example, we will (re)use the rootcause field and the structure it provides (using . as a separator), but you could of course create your own table for this.

The values in my rootcause table are: <source lang="text"> Hardware.Server.Error Hardware.Server.Component Failure Hardware.Network.Firewall Hardware.Network.Router Hardware.Network.Cable Software.Browser.Settings Software.Browser.Version </source>

This code comes as is, and has been tested for these values only. Further finetuning may be necessary when deviating from a 3 level deep structure.

As you can see, we will be using 3 dropdown fields (list1, list2 and list3), each containing a level of the tree shown above.

All together now