iHwy Development Blog

For the last 12 months or so the amount of AJAX and javascripting work we've been doing has significantly increased, even though we've been doing it since before the name "AJAX" was even coined. One of the snazziest things we've developed lately is a financial reporting system that uses some really nice technologies to create a speedy UI for our users...who wanted something "like quickbooks" (but of course, better).

After logging into a private part of the site, a user searches for orders (the data is from a POS (point of sale) system) and selects a set of reports that they want to view. A set of tabs appears, each tab with a report name on it. Clicking the tab makes an AJAX call to the server and fetches the reporting data in json format (we chose json because speed is of the essence and json data is very compact). After successfully grabbing the data, another quick AJAX call is made to fetch a reporting template (we use TrimPath Templates) and then the data and the template are used to render the report to the screen, under the tab that the user selected. No page reloading... the report just pops onto the screen in the selected tab.

If the user would like another report, they simply click another tab and that report gets rendered using the same method. Clicking any tab that is already loaded will show the report without having to refetch it from the server. That makes it very easy for an analyst to review the results of various reports by quickly flipping back and forth between them. There's no page reloading, the data is just "there".

To speed the development of this project, we used jquery and a number of jquery plugins extensively. We've been using jquery for quite a "while" (in javascript-library years) now and love it. We're also active members in the jquery community.

The reporting engine does some really neat stuff with the TrimPath templates, fixed table headers and footers (so reports can be scrolled without having to scroll the whole page) and some smooth animation (for hiding/showing report criteria) supplied by the Interface jquery plugin. We're continuing to add more reports to the system, providing a very sophisticated, but really easy to use, financial reporting system, with solid technologies and a really speedy architecture.