Js: Adding A Digital Signature To A Submission Form

[caspio]

JavaScript Solution: Adding a Digital Signature to a Submission Form
 
Feature Description:
This JavaScript solution shows how to add a digital signature to a Submission form, Update form, and Details form. It also shows how to display the signature in Details and Results page of a Report. The signature pad is compatible with mobile devices as well.

Note: This is a simple capture and displays a signature solution. It is not designed to replace a professional e-signature solution like DocuSign that assures security, legal, and visibility of all transactions with a complete audit trail.

To explore integrating your application with a third-party solution such as DocuSign, contact Caspio Professional Services.

Single Signature Pad Implementation:
This solution can be used "as-is", without any changes if:

• It is used in a Submission Form DataPage.
• The field name in your table is "Signature" and the data type is Text (64000).

To use this solution:
 
a. Download the JavaScript file from here and unzip the file. Go to "All Assets" click on "Files" and upload this file.

b. Go to app over, create an app parameter : Parameter Name = " SignaturePad", Type = "File" and for value browser the uploaded file.

c. Copy the code below and Disable HTML editor then paste inside the Header section of your DataPage

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="[@app:SignaturePad/]"></script>

d. Edit the Submission Form DataPage and choose form element "hidden" for "Signature" field in the Configure Fields screen. Insert an HTML Block after the "Signature" field. Go to the Source of the HTML Block and insert the following code.
 

<!-- Caspio Added -->
<div id="cb_sign_wrapper">
<p id="cb-sign-msg" style="display:none; color:white; background-color:red; font-weight:bold; padding:10px;"></p>

<canvas class="pad" height="130" style="margin: 0px 0px 0px 15px;  border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;" width="300"></canvas><br />
<span style="margin: 0px 0px 0px 15px;display: flex;justify-content: center;
}">

<input class="clearButton" type="reset" value="Clear" /></span> <input class="output" name="output" type="hidden" />
</div>

e. Copy the code below and paste inside the Datapage Footer.

<script>
 document.addEventListener('DataPageReady', function (event) {
  
  $('#cb_sign_wrapper').signaturePad({drawOnly : true});
  
 });

 document.addEventListener('BeforeFormSubmit', function (event) {
   
  // put the signature to the proper field
  $('input[name="InsertRecordSignature"]').val( $('#cb_sign_wrapper .output').val() );
   
 });
</script>

Two Signature Pads Implementation:

This solution can be used "as-is", without any changes if:

• It is used in a Submission Form DataPage.
• The field names in your table is "Signature_1", Signature_2" and the data type is Text (64000).

Repeat steps from a) to c) from the Single Signature Pad implementation above.

d. Edit the Submission Form DataPage and choose form element "hidden" for "Signature_1" field in the Configure Fields screen. Insert an HTML Block after the "Signature_1" field. Go to the Source of the HTML Block and insert the following code.

<!-- Caspio Added -->
<div id="cb_sign_wrapper_1">
<p id="cb-sign-msg" style="display:none; color:white; background-color:red; font-weight:bold; padding:10px;"></p>

<canvas class="pad" height="130" style="margin: 0px 0px 0px 15px;  border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;" width="300"></canvas><br />
<span style="margin: 0px 0px 0px 15px;display: flex; justify-content: center;">
<input class="clearButton" type="reset" value="Clear" /></span> <input class="output" name="output" type="hidden" />
</div>

e. Repeat steps from above and insert in HTML Block the following code:

<!-- Caspio Added -->
<div id="cb_sign_wrapper_2">
<p id="cb-sign-msg" style="display:none; color:white; background-color:red; font-weight:bold; padding:10px;"></p>

<canvas class="pad" height="130" style="margin: 0px 0px 0px 15px;  border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;" width="300"></canvas><br />
<span style="margin: 0px 0px 0px 15px;display: flex; justify-content: center;">
<input class="clearButton" type="reset" value="Clear" /></span> <input class="output" name="output" type="hidden" />
</div>

f. Copy the code below and paste inside the Datapage Footer.

<script>
 document.addEventListener('DataPageReady', function (event) {
   
  $('#cb_sign_wrapper_1').signaturePad({drawOnly : true});
  $('#cb_sign_wrapper_2').signaturePad({drawOnly : true});

 });

 document.addEventListener('BeforeFormSubmit', function (event) {
  // put the signatures on the proper fields

  $('input[name="InsertRecordSignature_1"]').val( $('#cb_sign_wrapper_1 .output').val() );
  $('input[name="InsertRecordSignature_2"]').val( $('#cb_sign_wrapper_2 .output').val() );
 });
</script>

Tips for Customization
 
To customize the signature "window", you can adjust the width and height inside the HTML Block on step "d" above. You can also modify the border width by changing the "border-width" from 1px to a desirable width.

 

To customize the script to capture a signature on an Update Form or a Details page of a Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the Datapage Footer on step "e" (single pad solution) or "f" (two pads solution)  above.

 

To display the signature in  Details, Update DataPage, insert an HTML Block, repeat step c) from the above, and go to the Source of the HTML Block and insert the following code.

<div class="sigPad"><canvas class="pad" height="100" width="220"></canvas></div>
<script>
var sig = '[@field:Signature!]';
$('.sigPad').signaturePad({displayOnly:true}).regenerate(sig);
</script>

To display the signature in a results page of a Report DataPage, insert an HTML Block, repeat step c) from the above, and go to the Source of the HTML Block and insert the following code.

<div class="sigPad[@cbRecordIndex#]"><canvas class="pad" height="150" width="300"></canvas></div>
<script>
var sig[@cbRecordIndex#] = '[@field:Signature!]';
$('.sigPad[@cbRecordIndex#]').signaturePad({displayOnly:true}).regenerate(sig[@cbRecordIndex#]);
</script>

Tested Browsers

This JavaScript solution was tested on the following platforms and Internet Browsers only.
# MS Windows - IE 11, Firefox 74.0, Chrome 81.0, MS Edge 42.0
# Mac OS - Firefox 74.0, Chrome 81.0, Safari 13.1

# Android - Firefox 74.0, Chrome 81.0
#iOs - Firefox 74.0, Chrome 81.0, Safari 13.1

Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.