Elements of an Enterprise-Grade Web Framework – Part 3: Data-Bound Drop-downs

FormDrop-down list-of-values populated by database tables are another important component of enterprise-grade web frameworks.  Although most frameworks do support them through one technique or other, the ease of implementation is key in this often-used feature.

There are two general forms of data-bound list of values.  The first is a simple binding to a table-based query, while the second is a dynamic binding, based on parameter selection in other parts of the form.  Table-based list-of-values should support custom queries with sequencing and status (including the ability to disable certain list of values without removing the actual row and foreign key from the database).  These static drop-downs can usually be implemented directly in HTML, while drop-downs with parameters based on other form fields usually require client-side JavaScript.

Unfortunately, many web frameworks make the process of creating data-bound drop-down list-of-values much more difficult than the one-line statement the operation should merit.  ASP.NET is the greatest offender, requiring preloading of the values in a special form initialization event, with many vulnerable breaking-points in the code.  PHP and Ruby both do a fairly decent job of implementation, with PHP requiring a little more overhead, while Ruby bringing its “convention over configuration” syntax manhandling into the mix.  Node.js performs best in respect to this functionality, by enabling systematized reproduction of the drop-downs once it has been coded well the first time.

At its core, the drop-down list-of-values simply populates an HTML select object, and processes the result on the back-end.  Where .NET goes wrong with this component is with its design philosophy of isolating the user from being required to write HTML.  Unfortunately, web developers cannot escape HTML, since all code eventually generates HTML anyway, so the framework gets in the way as often as it helps.

In addition to the standard select-element drop-downs, there is more advanced alternative.  Frameworks such as Ext.is provide custom drop downs written entirely in JavaScript.  By bypassing the standard HTML component entirely, the JS drop downs can embed images and even display multicolumn data in the selection list of values.  While these are not requirements for enterprise development, in certain situations they can help to significantly improve the usability of an app, or satisfy a challenging user requirement.

In the next part of this series, we will review N-depth parent-child relationships, and their comparative implementation in various web frameworks.

Written by Andrew Palczewski

About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.

RSS Twitter LinkedIn Facebook Email

Leave a Reply

Your email address will not be published. Required fields are marked *