caspio

Js: Adding A Digital Signature To A Submission Form

1 post in this topic

JavaScript SolutionAdding 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.

DigitalSignature.png

 

Note: This is a simple capture and display 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 third-party solution such as DocuSign, contact Caspio Professional Services.

 

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

  • It is used in a Submission Form DataPage.
  • Enable Advanced Options is checked in the DataPage.
  • The field name in your table is "Signature" and the data type is Text (64000).
  • The DataPage is deployed with Embed method on a web page.

To use this solution:
 
a. Copy the code below and paste inside the <head> section of your web page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 
b. Download the JavaScript file from here and upload the file to your website hosting. Once uploaded, you'll need to reference this file in the <head> section of your web page.

 

Example:

<script src="http://yoursite.com/yourfolder/jquery.signaturepad.min.js"></script>

 
c. 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.
 

<canvas class="pad" width="218" height="55" style="margin: 0px 0px 0px 100px;  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;"></canvas></br>
<span style="margin: 0px 0px 0px 264px;"><input type="reset" class="clearButton" value="Clear"></span>
<input type="hidden" name="output" class="output">
<script type="text/javascript">
$(document).ready(function () {
  $('#caspioform').signaturePad({drawOnly : true});
});
$("#cb_sign_wrapper form").submit(function(){
$("#InsertRecordSignature")[0].value = $("#cb_sign_wrapper .output")[0].value;
});
</script>

 
d. Insert Header & Footer using the picker button at the lower right of the DataPage Elements. Disable HTML editor for both Header and Footer from the Advanced tab. Copy the code below and paste inside the HTML Header.

<div id="cb_sign_wrapper">

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

</div>

Tips for Customization
 
To customize the signature "window", you can adjust the width and height inside the HTML Block on step "c" 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 signature on an Update Form or a Details page of a Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the HTML Block on step "c" above.

 

To display the signature in a Details DataPage, insert an HTML Block, go to the Source of the HTML Block and insert the following code.

<div class="sigPad signed"> <div class="sigWrapper">
<canvas height="55" width="198" class="pad"></canvas></div>
</div>
<script>
var sig = eval("[@field:Signature]".replace(/"/g, '"'));
$(document).ready(function () {
$('.sigPad').signaturePad({displayOnly:true}).regenerate(sig);
});
</script>

To display the signature in the results page of a Report DataPage, insert an HTML Block, 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>

 
Tested Browsers

This JavaScript solution was tested on the following platforms and Internet Browsers only.
# MS Windows - IE 11, Firefox 29.0.1, Chrome 34.0.1847.137, Safari 5.1.7

# Macintosh - Firefox 26.0, Safari 5.1.7

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. 

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.