Signature Widget

Overview#Direct link to Overview

The Signature widget allows users to capture digital signatures directly within forms using an interactive canvas. Users can draw their signature using mouse, touch, or stylus input, and the signature is automatically saved as image data when complete.

Features#Direct link to Features

• Interactive Canvas: Draw signatures using mouse, touch, or stylus
• Real-time Capture: Signatures are automatically saved as the user draws
• Clear Function: Built-in clear button to reset the signature
• Responsive Design: Canvas automatically resizes based on device pixel ratio
• Form Integration: Seamlessly integrates with form validation
• Accessibility: Supports keyboard navigation and screen readers

Configuration Options#Direct link to Configuration Options

Global Settings#Direct link to Global Settings

Basic Configuration#Direct link to Basic Configuration

Name

• Description: Display label for the signature field
• Type: Text input
• Required: Yes
• Example: "Customer Signature", "Authorization Signature"

Variable/Model

• Description: Variable name to store the signature data
• Type: Text input
• Required: Yes
• Format: Valid JavaScript variable name
• Example: customer_signature, approval_sign
• Note: The signature is stored as a base64-encoded data URL

Validation Settings#Direct link to Validation Settings

Configure visibility, requirement, and accessibility across different screens/contexts.

Screen-based Validation#Direct link to Screen-based Validation

Configuration Options:

• Available: Controls if the widget appears on specific screens
• Visible: Shows/hides the widget based on conditions
• Required: Makes signature mandatory for form submission
• Disable: Prevents user interaction (signature becomes read-only)

Advanced Validation Conditions#Direct link to Advanced Validation Conditions

Use JavaScript expressions with dynamic variables:

Example Conditions:

Style Configuration#Direct link to Style Configuration

Canvas Dimensions#Direct link to Canvas Dimensions

Width

• Description: Canvas width
• Type: Text input
• Default: 100% (responsive)
• Format: CSS units (px, %, em, rem)
• Example: "400px", "100%", "20rem"

Height

• Description: Canvas height
• Type: Text input
• Default: Auto-calculated
• Format: CSS units (px, %, em, rem)
• Example: "200px", "15vh"

Styling Options#Direct link to Styling Options

Class Names

• Description: Custom CSS classes for styling
• Type: Text input
• Format: Space-separated class names
• Example: "signature-large bordered-canvas"

Dynamic Classes

• Description: Conditional CSS classes based on form state
• Type: JavaScript expression
• Example:

{
  'signature-required': {{isRequired}},
  'signature-error': {{hasError}},
  'signature-completed': {{signature}} !== undefined
}

Best Practices#Direct link to Best Practices

User Experience#Direct link to User Experience

1. Clear Instructions: Provide clear labeling and instructions
2. Appropriate Size: Ensure canvas is large enough for comfortable signing
3. Error Handling: Show clear error messages for validation failures
4. Responsive Design: Test on various devices and screen sizes

Security Considerations#Direct link to Security Considerations

1. Data Validation: Validate signature data on server-side
2. File Size: Monitor signature file sizes for performance
3. Storage: Implement appropriate data retention policies
4. Privacy: Ensure compliance with data protection regulations

Performance Optimization#Direct link to Performance Optimization

1. Canvas Size: Balance quality with performance
2. Compression: Consider image compression for large signatures
3. Caching: Implement appropriate caching strategies
4. Loading: Show loading states during signature capture

Troubleshooting#Direct link to Troubleshooting

Common Issues#Direct link to Common Issues

Signature Not Saving

• Check model name configuration
• Verify form submission handling
• Ensure canvas is properly initialized

Canvas Not Responsive

• Verify width/height settings
• Check CSS conflicts
• Test on different devices

Validation Errors

• Review required field settings
• Check validation rules syntax
• Verify screen-specific configurations

Performance Issues

• Reduce canvas dimensions if needed
• Optimize image compression
• Check for memory leaks in signature handling

Debug Information#Direct link to Debug Information

// Debug signature widget state
console.log("Signature Model:", this.models.customer_signature);
console.log("Widget Visible:", this.visible);
console.log("Widget Required:", this.required);
console.log("Widget Disabled:", this.disable);

API Reference#Direct link to API Reference

Events#Direct link to Events

• endStroke: Triggered when user completes a stroke
• beforeClear: Triggered before signature is cleared
• afterClear: Triggered after signature is cleared

Methods#Direct link to Methods

• clear(): Clears the signature canvas
• fromDataURL(): Loads signature from data URL
• toDataURL(): Exports signature as data URL
• on(): Enables signature input
• off(): Disables signature input

Properties#Direct link to Properties

• signaturePad: Reference to SignaturePad instance
• canvas: Reference to canvas element
• data: Current signature data URL
• isDisable: Current disabled state