Monday, October 21, 2013

ADF Mobile - Integrating Signature Capture

This article provide an example of how to write a custom user control to collect and store of an Electronic Signature created on a Android devices using stylus or a finger on the touch screen. 

I have integrated the SignaturePad jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON format in SQLite database for later regeneration.

Application screen looks like below when it deployed and run on Android Device/Emulator. Displays the Employee list on the screen.


Clicking on any employee will take you to the selected Employee details page, click on View Signature button will open up the popup, there is no signature since database doesn't have signature value for this employee.


Next click on the Edit button will navigate to the Employee details page, clicking on Capture Signature button will open up the popup and Signature Pad jQuery plugin will transform an HTML form into a signature pad. User can use stylus or a finger on the touch screen to do signature and click the Save button to save the signature value(JSON format) in SQLite database.


I wasn't able to draw signature of King properly in android emulator :). Save button will navigate back to Employee details and recorded signature value in database will be used to regenerate the signature on Signature Pad.


You can download the sample workspace from here.
[Runs with Oracle JDeveloper 11.1.2.4.0]

In this sample application I'm storing the signature value into database, even we can store captured signature value as Image format.  For more information and option visit Signature Pad.