Signature Capture FileMaker Implementation

Sep 16, 2010 05:33 PM
signaturecapturefilemakerimplementation

One of the things we need in FileMaker Go databases is the ability to capture signatures. I just wanted to say thanks to John Sindelar for the idea and to Todd Geist for mentioning that he was able to implement this! That got us motivated to get it working as well and to create the demo file.

The idea is to have the user type their name and then use their finger to sign their name on the iPad or iPhone. Signature Pad offers this ability in a web page using jQuery. The trick is to use a webviewer to gather the persons name and signature, store the values in a FileMaker database, and be able to display the signature as needed. This solution stores the signature as an array of vectors as shown below.

SignatureAsVectors

The implementation is quite easy when broken down into three steps. This demo shows these steps in a series of tabs.

  1. Sign Signature. In the Sign Signature Tab, you can see a Webviewer that is based on a Global Field that contains the webpage source. It also references the Fields Signature Width & Height. When the record loads, an OnRecordLoad triggers a script that waits until the signature has been submitted. On the form submission, the Webviewer changes the url using JavaScript to temporarily include the values that we need to store in the fields.
  2. Captured Values. The SignatureWait script calls the SignatureSetFields script to extract the values from the Webviewer.
  3. Display Signature. The signature is displayed in a Webviewer using the Name, Signature, Width & Height fields.
  4. Problems (If you figure these out, or find other issues, please send us an email with the details! We'll add the details here and give you the credit!):

  • On loading of the Sign Signature Tab, occasionally FileMaker Go will crash.

Problems Solved:

  • Solved by Dave Wiser: We've tried and tried to either hide or move the gray bar in the draw your signature box. Dave found the "lineTop:35" attribute and suggested changing it to 33 to represent 33% from the bottom and the drawSigLine function statements to calculated the position rather than used the fixed position of 35 pixels. Thanks Dave!
  • Solved by ktwu710: We updated the example file so now on a record by record basis, you can change the percentage from 0 - 100 where the signature line appears. Setting it to 0 or 1 will make the line appear very close to the bottom of the signature area. Setting it to 100 will place it one pixel below the top line of the signature area.

FileMaker File: SignatureCapture-CampSoftware.fp7 [dead link]

Zip File: SignatureCapture-CampSoftware.fp7.zip [dead link]