OFBiz Tutorial – Dependent Selects for Prototype

In my first OFBiz Tutorial, I will show you how to make dependent select boxes using Prototype.

Building a web UI that lives up to the expectations of contemporary web designers is a challenge that every web developer faces. One that has remained a pain for a while is Dependent Select boxes. jQuery has a nice UI plugin that serves the purpose, but I cannot use it because I am married to Prototype javascript framework. I finally decided to implement one using Prototype. Dependent Select by Sliver, a UI plugin for jQuery is nice and simple, so I decided to base my component on the same concept.

Here it is, Dependent class allows you to link two select boxes in a parent child relationship. Any two select boxes can be linked. All you need to do is

1. Parent select box options should have unique value of title attribute.
2. On child select box, class attribute of options should be set to title of their parent.
3. In javascript Create new Dependent object by passing child and parent select boxes.

Here is sample code. (Copied from Dependent Select by Silver website)

-- select --
Flowers
Animals

-- select --
Sunflower
Rose
Dog
Cat

My goal was to build a dependent select box that will work in complex enterprise application scenarios. A nonstandard case is when the value of a parent select box value is change by background code. It gets even more complex when select boxes are disabled. Good news is, our Dependent class is smart enough to deal with these use scenarios.

In the process of solving these problems I learned about an interesting feature in Prototype, it has a AOP like ability. We can modify behavior of existing code by wraping function inside of a custom wrapper function. A Prototype function wrap is applied to the setValue function on Element to handle the background select value changes and disabled select box value change.

I have enjoyed building and using this new component. Download the component from its home on the web. I hope you will be able to find some interesting applications for it as well.

– Anil