» Fig Leaf Software Home

We've Got You Covered.

Wednesday, February 19, 2014

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 Microsoft Internet Explorer 8, otherwise known as “Satan’s Favorite Browser”.
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 redeveloped the app server layer as CORS-enabled, REST-based webservices using ASP.NET. 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 emailsales@figleaf.com if you’d like to find out how we can help you breathe new life into your legacy web apps!
Written by: Steve Drucker
[Cross-promoted on Druck-I.T.]

No comments:

Post a Comment

About Us

Fig Leaf Software is an award-winning team of imaginative designers, innovative developers, experienced instructors, and insightful strategists.

For over 20 years, we’ve helped a diverse range of clients...

Read More

Contact Us

202-797-7711

Fig Leaf Software

1400 16th Street NW
Suite 450
Washington, DC 20036

info@figleaf.com