Thursday, May 17, 2012

Screenshots!

A couple of days ago I joked that I was just posting text, and no pretty pictures. Today I plan to make up for that in spades. (Though I can't promise the pictures will be pretty.)

After having successfully gotten an already-filled-out HTML Form to display in the new UI Framework we're using, I still needed to allow you to fill out a form. In the end it was a lot easier than I expected, though I still want to review what I did with Mark Goodrich (current owner of the HTML Form Entry module) so we can decide whether this is really the right approach, and how best to package it up for others to use as well.

The commit is here (and more dev-related details are after the jump).

But first, here's a screenshot-based walkthrough of the whole process of filling out an HTML Form and then viewing it:

First we find a patient and open a visit for them

Clicking the "Vitals" button opens the relevant HTML Form

VoilĂ ! The visit now contains a vitals encounter, and the "Vitals" button is gone.

Clicking on the Vitals encounter in the previous  screenshot displays it in a popup
I think it looks pretty snazzy. :-)

For our project, the two main reasons to use HTML Forms rather than just the UI Framework are that:

  1. the technology is well-tested, and behaves consistently. You don't really need to worry about a developer doing something wrong and losing form data.
  2. we can build fancy ajax-y workflows with the UI Framework where they'll provide value, but we can implement arbitrarily large forms for typical data entry tasks without too much effort, and without requiring training on the UI Framework.
(More dev details after the jump.)
More dev details:

One thing I noticed when looking at the existing htmlFormEntry.jsp page is that we've got a lot of code there, that could stand to be cleaned up from a stylistic perspective. (Though if it ain't broke...) But it was very easy to copy some snippets of the code, replace some trivial DWR with plain jQuery.getJSON, and get the submission working.

But even better, I was able to improve on the existing HTML Form Entry page by having the form submission happen via an AJAX post, and just call the existing showError javascript functions for any validation errors reported by the server. That feels like a much cleaner way to handle errors than submitting via a form POST, then redisplaying the form, then using javascript to reset field values.

I think we'll want to incorporate some parts of this back into the mainline HTML Form Entry module.

No comments:

Post a Comment