Back to Blog
2025-12-18 4 min read

Integrating an HTML Signature Pad with FileMaker WebDirect

Introduction

FileMaker WebDirect enables users to interact with FileMaker solutions through a web browser. Capturing handwritten signatures within this environment requires a combination of client-side HTML/JavaScript and server-side FileMaker scripting. This article describes the architecture, implementation details, and best practices for embedding a high-quality signature pad in a Web Viewer and persisting the result in a container field.

Signature Pad Library

The Signature Pad library (version 4.1.7) provides a canvas‑based drawing surface that produces smooth, vector‑like strokes. It is delivered via a CDN and requires no additional dependencies. The library exposes a SignaturePad object with methods such as toDataURL(), clear(), and event hooks like beginStroke.

Embedding the Pad in a Web Viewer

  1. HTML Structure – A minimal page contains a <canvas> element, a placeholder instruction, and two buttons (Clear and Submit). The page uses a responsive layout with CSS variables for a premium visual appearance.
  2. Canvas Resizing – The script calculates the device pixel ratio, adjusts the canvas dimensions, and scales the drawing context. Resizing clears the pad to avoid state corruption.
  3. User Interaction – The beginStroke event hides the instruction text, while the Clear button resets the canvas and restores the instruction.

Adding the HTML to FileMaker

  1. Create a new layout text object off the side of the layout and name it "signature_html". This is how our Web Viewer will reference the HTML code.
  2. Set the text of the object to the complete HTML source code for the signature pad.

Setting up the Webviewer

  1. Create a new Web Viewer object in your layout.
  2. Set the Web Viewer to a custom url page with the following calculation:
    Case ( 
        PatternCount ( Get ( ApplicationVersion ) ; "Web" ) ;
        "data:text/html;base64," & Base64Encode ( GetLayoutObjectAttribute ( "signature_html" ; "content" ) ) ;
        "data:text/html," & GetLayoutObjectAttribute ( "signature_html" ; "content" )
    )
  1. Set the object properties to Allow JavaScript to perform FileMaker scripts.

Set up the FileMaker Script to Receive the Signature

The receiving script, WebDirect_ReceiveSignature, performs the following steps:

  1. Retrieve the data URL via Get ( ScriptParameter ).
  2. Verify that the data URL is not empty.
  3. Extracts the Base64 data from the parameter.
  4. Inserts the Base64 data into the container field as signature.png.
  5. Commits the record.
# WebDirect_ReceiveSignature
Set Variable [ $dataURL ; Value: Get ( ScriptParameter ) ]
If [ IsEmpty ( $dataURL ) ]
    Exit Script []
End If

# Get just the Base64 data
Set Variable [ $base64Data ; Value: Let ( [
        ~commaPos = Position ( $dataURL ; "," ; 1 ; 1 )
    ] ;
        Middle ( $dataURL ; ~commaPos + 1 ; Length ( $dataURL ) )
    ) ]

# Store in Container
Set Field [ YourTable::SignatureContainer ; Base64Decode ( $base64Data ; "signature.png" ) ]

Commit Records/Requests [ With dialog: Off ]

Security and Configuration

  • Enable Allow JavaScript to perform FileMaker scripts in the Web Viewer options.
  • Verify that the Web Viewer object name is set if you need to refresh the view from FileMaker.
  • Ensure the user’s privilege set includes the necessary extended privileges for script execution.

Testing the Integration

  1. Open the layout containing the Web Viewer in WebDirect.
  2. Draw a signature, clear it, and redraw to confirm the instruction toggles correctly.
  3. Submit the signature and verify that the container field displays the captured image.
  4. Review the console output when testing outside WebDirect to confirm the data URL is generated.

Source Code

The complete code for this integration, including the signature HTML and setup instructions, is available in the following GitHub repository: https://github.com/JeffHenry/filemaker-webdirect-esign

Conclusion

By combining a lightweight JavaScript library with FileMaker’s PerformScript and Base64Decode capabilities, developers can deliver a seamless signature capture experience within WebDirect. The approach maintains a premium user interface, requires minimal server configuration, and stores signatures directly in container fields for downstream processing.

Further Reading

Integrating an HTML Signature Pad with FileMaker WebDirect | Jeffrey Henry