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. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer
   
   
3. Click the Create New Form button and fill up the Form Details as follows:
   
   1. Form ID: signature
   2. Form Name:  Signature
   3. Table Name: j_expense_claim
      
      
      
      
4. Drag and drop a Signature element onto the canvas.
   
5. 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.

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.

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
  • Date and Time Duplicate Validator
  • Directory
  • Duplicate Value
  • Equal Value
  • Multi Form Validator
  • Password
  • Plugin Template - Validator
• Width: Width of the element in characters. For example, 300px
• Height: Height of the element in characters. For example, 300px
• Readonly: Determines if the element is editable.

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