Tags

The Context : Some Forms like loan application or insurance application, are first filled on paper by the prospective client. Enterprises scan these paper application forms and store it. Later these paper forms are manually entered into the database through UI Forms.
When data entry happens through the forms, either the data entry operator has the paper form with them or refer to the scanned copy (Image file).

The itch : Data entry would be very effective if when the input field in the Form receives focus, the portion of the image that has the relevant data is displayed to the user. The user glances at the image portion and re-enters the data.

The solution :
The solution is pretty straightforward.
1. map the region of the image (say x,y co-ordinates of the top-left and bottom-right points) to the domain attribute and a unique key. for example { (x1,y1), (x2,y2), Customer.FirstName, ID01}.
2. at runtime, when the form field receives focus, invoke the code that will display the area of the image bounded by (x1,y1) and (x2,y2). Use the ID01 key mapping to lookup the co-ordinate information.

The solution uses the concept of “Image Panning” to move the image so that the relevant portion is moved to the View area and the rest of the form is not visible (think overflow:hidden).

As someone using jQuery for the first time, I could cookup a working protoype in around 2hrs using jQuery plugins like this, this and this.

The verdict: jQuery is addictive.

Advertisements