Signature Field in FileMaker

Recently a customer asked for a signature field in FileMaker. As usual we replied with a note that this can be done with web viewer and a HTML 5 canvas control doing drawing. Then capture content with JavaScript and pass to FileMaker. The MBS FileMaker Plugin may help with WebView.RunJavaScript function. To transfer bigger blocks of text WebView.SetFormTextAreaValue and WebView.GetFormTextAreaValue can help with a hidden text area control. See video:

The script to save is quite easy as it just asks canvas to save its content as base64 encoded png image into the hidden text area. Then uses WebView.GetFormTextAreaValue to query this value, cuts out the header and decodes the base64 image:

Set Variable [ $r ; Value: MBS( "WebView.RunJavaScript" ; "web"; "formtest.output.value = document.getElementsByTagName('canvas')[0].toDataURL('image/png');" ) ]
Set Variable [ $dataURL ; Value: MBS( "WebView.GetFormTextAreaValue" ; "web"; "formtest"; "output"; 0 ) ]
Set Variable [ $p ; Value: Position($DataURL; ","; 1; 1) ]
If [ $p > 0 ]
Set Variable [ $data ; Value: Middle($dataURL; $p + 1; Length($dataURL)) ]
Set Field [ Signature Field::Data ; Base64Decode ( $data; "signature.png" ) ]
End If

We hope you like this example: SignatureField.zip. We'll include it in future plugin releases as an example. Claris FileMaker Plugin