OFBiz Tutorials, Dependent Select Boxes using Prototype

Enterprise eCommerce is a rapidly growing industry. Apache OFBiz and it's developers are dedicated to adapting and improving as the spectrum of eCommerce broadens. Developers will continue to create and post OFBiz tutorial pages so that users can easily have questions answered and effectively use the platform.

This OFBiz tutorial will cover building out dependent select boxes using prototype. Today's web developers face the challenge of needing to create a contemporary user interface that lives up the expectations of web designers and end users. In these OFBiz tutorials we discuss options for keeping your interface modern using dependent select boxes.

Dependent Select Boxes | OFBiz Tutorial

Dependent class allows you to link two select boxes in a parent child relationship. Any two select boxes can be linked:

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.

The goal is to build a dependent select box that will work in complex enterprise eCommerce 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 just about any scenario that may come up.

Using the Prototype Javascript framework with it's AOP like ability, it has a AOP like ability, we can modify behavior of existing code by wrapping function inside of a custom wrapper function. A Prototype function wrap is applied to the set-Value function on Element to handle the background select value changes and disabled select box value change.

You can download the component from https://code.google.com/p/ue-protoui/. To view code for this exercise visit http://www.hotwaxmedia.com/apache-ofbiz-blog/ofbiz-tutorial-dependent-selects-for-prototype/ at HotWax Media.