openSignatureModal

Opens the signature modal dialog for the specified signature control, allowing users to create or edit signatures.

Parameters

  • controlId (string): The id of the signature control to open for editing

Return Value

None (void)

Description

The openSignatureModal function programmatically opens the signature modal interface for the specified signature control. This allows users to:

  • Create a new signature if none exists

  • Edit or replace an existing signature

  • Use a full-screen signing interface optimized for the device

  • Take advantage of responsive design (landscape suggestions on mobile)

The modal provides:

  • Large signing area (750x300px on desktop, responsive on mobile)

  • Clear visual boundaries for the signing area

  • Icon-based controls (trash, checkmark, close)

  • Device rotation detection and adaptive layout

  • Signature scaling between preview and modal canvases

Example Usage

Basic Modal Opening

app.openSignatureModal("customerSignature");

Conditional Signature Collection

// Check if signature already exists
const currentSignature = app.getValue("approvalSignature");

if (!currentSignature) {
    // Only open modal if no signature exists
    app.openSignatureModal("approvalSignature");
    console.log("Please provide your signature");
} else {
    console.log("Signature already captured");
}

Desktop Experience

  • Size: 750x300px signing canvas

  • Layout: Centered modal with generous padding

  • Controls: Icon-based buttons (close, clear, save)

Mobile Experience

  • Responsive: Adapts to screen size automatically

  • Landscape suggestion: Shows rotation hint on portrait orientation

  • Touch-optimized: Proper touch handling for signature input

  • Dynamic scaling: Canvas resizes based on available space

Cross-Platform

  • Device detection: Identifies rotation capabilities

  • Orientation handling: Responds to device rotation

  • Signature preservation: Maintains signature during orientation changes

  • getSignatureImageBlob() - Export signature as image (supports PNG, JPG, SVG)

Last updated

Was this helpful?