Representing database objects using an AJAX Tree interface

If you’ve used POG setup, you’re probably aware by now that we’ve decided to adopt an AJAX Tree to represent the database interface in the setup app. This approach is closer to a debugging interface than the database interface we tested during 1.6 beta. (using a table structure with rows and columns).

There main reason that pushed us towards this decision is that the row/column interface that we were experimenting with during BETA did not scale well enough with objects containing a large number of attributes (>10). Those of you who helped us beta test version 1.6 during January are probably aware that if your objects had many attributes, you had to use the horizontal scroll bar to see all the attributes. Horrible!

The new tree interface (see screenshot below) scales better and is closer to a real “object” representation in debugging interfaces used in IDEs such as Zend Studio.

To dynamically generate this Tree View, we use xPandMenu, an open source PHP tree library offered by Patrick Brosset under the BSD license. We had to extend the xPandMenu library to accommodate for some POG-related business rules. For example, if an object in the list is deleted, all objects below it are shifted up by 1 and all node states (expanded or collapsed) are preserved. We also used AJAX to communicate with the xPandMenu library to improve the overall responsiveness of the interface. As a refresher, there’s a simple tutorial which demonstrates how to create a simple to-do list using POG and AJAX.

All in all, creating the Tree view interface was an occasion to eat our own dog food and experience how POG actually accelerates PHP database programming. We didn’t have to write a single SQL statement and almost forgot about the database altogether. We’d like to finish this post by thanking Patrick Brosset for providing the xPandMenu library under the BSD license. It saved us many hours of coding!