Project Highlights

  • Developed a sophisticated PopupManager library to facilitate the rendering, validation, and submission of overlay popup content and forms
  • Developed an upload management interface within the application that supported multiple uploads at a time
  • Redesigned user interface with new responsive design
  • Customized jqGrid datatable code to support out-of-the box functionality

Project Details

My work on this project can be broken down into three phases.

Phase 1: Initial Application Development

  • Converted the wireframes for the user interface into an initial mockup
    • Branded a single page in the application according to the end-company’s style guidelines
    • Added a jqGrid datatable with sample data along with tabbed navigation and popups to this page
  • Added interactivity into the mockup to simulate the execution of various tasks
    • Added JavaScript code to show popups on button click
    • Added JavaScript code to simulate the submission of form data within the poups
    • Updated the jqGrid datatable to support column filtering with test data
    • Conducted demos to discuss and refine the UI
  • Converted the mockup into a working implementation
    • Worked with other developers to establish APIs for data transfer between the front end and back end layers
    • Added the necessary datatables and overlay forms across multiple pages
    • Added code to the datatables and popups to interact with the back end data
    • Added front end form validation to the popups
    • Fixed bugs along the way
    • Worked with technical writers to create Help documentation

Phase 2: UI and Code Refactoring

  • Converted the multi-page application into a single-page application
    • Combined the HTML across all pages into one page
    • Added routing functionality to hide/show various DIVs withing the page while also updating the URL hash
    • Resolved the JavaScript conflicts from combining multiple pages into one page
  • Refactored the front end JavaScript code
    • Created a PopupManager library to dynamically render and validate the popups
    • Previously all of the overlay forms were embedded within the page which overloaded the DOM and was generally inefficient
    • The new PopupManager library loaded a JSON config file for each popup which did the following:
      • Provided a description of the content within each screen of the popup, which included:
        • Screen id
        • Screen title
        • Any description/confirmation text
        • All form elements
      • Dynamically rendered the screen content using EJS templates
      • Provided automatic validation of any forms on each popup screen
    • Created hierarchical structure for datatable code to improve reusability of core functionality, e.g. column filtering, button enabling/disabling, fetching and display of detailed data, etc.
    • Added caching for dynamic data within the application, e.g. device makes and models, special groups, etc.