Signature

Introduction

The Signature is a special form element with a canvas allowing users to input their signature by scribbling or sketching. Additionally, you can download the Signature Hash Variable Plugin from the Joget Marketplace for enhanced functionality.

How does it work?

To see how the Signature works, follow these steps:

1. In Form Builder, drag and drop a Signature element onto the canvas.
   
2. Click Preview and try drawing in the Signature field.
   

Configure Signature

The Configure Signature section allows you to set the label, ID, and encryption for the Signature element. This setup ensures the element is identified correctly and secured in your form.

Configure the following fields:

• Label: The element label to be displayed to the end-user.
• ID: Element ID. By declaring it as signature, a corresponding database table column c_signature will be created. 
• Encryption: Determines if the value should be encrypted upon saving into the database.

Advanced options

The advanced options provide settings for data handling, encryption, and UI customization to enhance user experience and data security.

Data

Configure the following fields:

• Validator: Attach a Validator plugin to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft.
  
  • Basic
  • BeanShell
  • Directory
  • Duplicate Value
  • Equal Value
  • Password
  • Plugin Template - Validator
  • Get More Plugins from Marketplace

UI

The UI section includes settings for element size, read-only configurations, and validator plugins to ensure the signature field is user-friendly and meets validation requirements.

• Width: Width of the element in characters. For example, 300px
• Height: Height of the element in characters. For example, 300px
• Allow exporting of signature?: Checkbox to enable export button and format options in toolbar:
  • Export as PNG
  • Export as JPEG
  • Export as SVG
  • Export as SVG with Background
• Enable User Pen Color Customization?: Adds a pen color picker to the toolbar; hides manual color input when enabled.
• Pen Color: Sets the default pen color.
• Enable User Signature Background Customization?: Adds background color picker; removes manual background input when enabled.
• Signature Canvas Background: Sets the default background color.
• Enable User Pen Width Customization?: Adds pen width picker and removes manual min/max width input upon enabling from a dropdown.
• Pen Stroke Minimum Width: Set the minimum size of the pen.
• Pen Stroke Maximum Width: Set the maximum size of the pen.
• Readonly: Determines if the element is editable.

Signature features

Signature interface:

• Signature Pad: Composed of a toolbar and canvas; initial size is set by the app designer, with default values of 400×200 unless modified.
• Canvas: The drawing area where signatures are created; respects saved data formatting and adjusts rendering based on current or legacy JSON formats.
  
• Pen: Used to create strokes on the canvas; defaults to black (#000000) with width min: 1, max: 3, and mimics fountain pen style; customizable by app designer or user.
• Toolbar: Positioned above the canvas; hosts interactive components for customizing signatures, configurable via the builder.
  
• Key Shortcuts: Supports Ctrl + Z (undo) and Ctrl + Y (redo); applies to the most recently activated signature pad on the page.

Toolbar features:

• Undo Button: Removes the most recent pen stroke; appearance varies in fullscreen.
• Redo Button: Reapplies the last undone stroke if available, with fullscreen mode styling.
  
• Export Button and Dropdown: Saves signature as images in PNG, JPEG, SVG, or SVG with background.
  
• Pen Color Picker: Lets users change the pen color using a color picker.
  
• Pen Width Picker: Enables stroke width selection from 1 to 5, applied visually with specific width mapping.
  
• Canvas Background Color Picker: Lets users change the canvas background color using a color picker.
  
• Clear Button: Clears all pen strokes on the canvas and resets undo/redo history.
  
• Fullscreen Button: Toggles fullscreen mode and rearranges components. After entering fullscreen mode, you can press ESC to exit fullscreen mode.
  

Additional features:

• Backwards Compatibility: The new signature pad is backwards compatible with signatures from older versions of the signature pad. The new signature pad supports older JSON data, preserving the signature’s structure but not the exact pen styling. Pen widths may appear differently due to updated rendering. If the signature is read-only and hasn’t been edited, it will look exactly like the original version. 

  The following images demonstrate a signature from the old Signature pad and what it looks like when imported into the new Signature pad:

   

  Old:
  

  New:

• Dark Mode Support: The signature pad adapts to dark mode by changing the toolbar and component colors. In fullscreen, the app background and toolbar components adjust, while in normal mode, only the toolbar changes.

• Canvas & Pen Color Adaptation: The canvas background and pen color switch to black and white respectively, only if both the User Pen Color Customization and Signature Background Customization options are disabled, and their associated color inputs are left empty during setup.

Additional resource

Learn how to add a Signature Form Element as an image into email content for further integration and functionality.

• Add Signature Form Element as Image into Email Content