This Old App: Retrofitting an Ext JS 4 GUI on top of an existing ColdFusion Infrastructure

Recently my company, Fig Leaf Software, was tasked by one of our longstanding customers to replace first-generation query-by-example search and admin tools that had been developed by a different vendor with a new modern interface that had to remain backwards-compatible with old versions of Microsoft Internet Explorer.

The existing application utilized an old version of ColdFusion (version 8), which isn’t normally a problem except that the original developer:

  1. Had no concept of encapsulation whatsoever (no ColdFusion CFC’s were used)
  2. Thought that using ColdFusion’s built-in (and now deprecated) Verity search engine, otherwise known as “Satan’s Favorite Indexer” was a great idea.
  3. Thought that not commenting your code leads to job security

The developer did implement a reasonably normalized database schema with most of the data access getting performed by SQL Server stored procedures.

Since the ColdFusion codebase could not be easily maintained, we partially redeveloped the app server layer as CORS-enabled, REST-based webservices using ASP.NET while the detailed display of records and user authentication leveraged their existing codebase, remaining in ColdFusion. We chose to use Ext JS 4 and Sencha Architect for the front-end client as Sencha’s tools have excellent support for REST and the most robust grid and form field controls of any Javascript framework.

The existing GUI suffered from a number of usability problems:

  • Every action required a full-page reload
  • The GUI split the search query across five different tabs, none of which actually interacted with each other
  • The search result is organized into a difficult to use, paginated html table that didn’t provide enough information to the user in order for them to make informed selections
  • Search results could not be customized by the end-user
  • Revising search criteria required the user to move back-and-forth between the search GUI and the results GUI

The old query-by-example interface:
Image

The old search results interface:
naccho2

Our revamped interface streamlines the search process by:

  • Keeping costs in-check by using the client’s existing database infrastructure (schema & stored procedures) and porting unstructured ColdFusion code into .NET RESTful services API.
  • Providing users with a single unified search form that reacts immediately to user input
  • Keeping the search form on the same page as the search results
  • Using the Ext JS 4 “infinity grid” feature that enables to easily and quickly browse through unlimited data volumes by loading pages of data in the background
  • Displays a full summary of matching records that enable the user to make a more informed choice about whether they want to see more detailed information
  • Enabling the end-user to reconfigure the grid by dragging-and-dropping columns as well as hide columns from view
  • Enabling more efficient keyword selection by displaying a taxonomy in a tree view
  • Replacing the unreliable Verity search engine
  • Includes a help video that is served from YouTube

The new Ext JS 4-based query-by-example GUI:

newgui

In addition to giving end-users a nice, modern, easy-to-use GUI, we also redeveloped NACCHO’s administrative interface into a modern desktop-browser based portal console. Features include:

  • Export of grid-based data into Microsoft Excel spreadsheets
  • Dynamically generated, interactive charts that can be customized and exported as PNG files
  • User-customizable grid controls
  • Single-signon security that integrates with NACCHO’s existing infrastructure

The new Admin portal:

toolboxadmin

Developing the application with Sencha Architect enabled us to react quickly to pre-launch design tweaks. Its drag-and-drop GUI and comprehensive refactoring enabled us to continually finesse and experiment with application layout and behavior.

Sencha Architect:

architect

Check out the new front-end of the app at http://www.naccho.org/toolbox and email sales@figleaf.com if you’d like to find out how we can help you breathe new life into your legacy web apps!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s