Search the Community

Has anyone added a digital signature field to a submission form, as written in this Caspio post: http://forums.caspio.com/index.php/topic/4693-js-adding-a-digital-signature-to-a-submission-form/ I've tried this on two different websites and did exactly what is written but for some reason, I can't get the signature box to work. This is a test site where I have set up a submission form with a digital signature: http://www.reduceincidents.co/dominique/index.html Do you have any suggestions on how to resolve this issue. Has somebody this digital signature working? Thanks so much for your help, Dominique

I am having a problem with the Signature Pad working correctly on an html page that has more than one datapage embedded in it. As per http://forums.caspio.com/index.php?/topic/4693-js-adding-a-digital-signature-to-a-submission-form The sig pad works as desired only in the first datapage embedded on an HTML page. Any additional datapages embedded into the html page throw console errors accessing the sig canvas. The problem is.. I have an HTML page that displays an invoice. The first embedded datapage displays customer information, a second embedded datpage displays inventory items used and a third datapage containing the sigpad script, requires a customer signature and collects closing details then submits the invoice. The third datapage throws console errors running the sig pad script. If I move the third datpage (the page that contains the signature script) to the top of the html page above the 1st and 2nd datapages the sigpag works correctly. Proving the script works only if it is contained within the first embedded datapage. To work around this I created an HTML popup window that handles the signature. except now I find that I must have the signature script within the third datpage. Any help on getting the sigpad working on an additional embedded datapage is greatly appreciated.

Has anyone had any experience using the digital signature pad (http://forums.caspio.com/index.php?/topic/4693-js-adding-a-digital-signature-to-a-submission-form/) on a tablet? It mentions in the App notes that the pad is compatible with mobile devices. The signature works fine with a mouse on my desktop, but nothing on a touch screen tablet (Galaxy S2). Is there a setting in the tablet, or a plug-in that I need to enable (mouse drawing) functionality for the signature pad to work on a mobile device? UPDATE: my apologies for posting this thread without thoroughly researching the problem. After successfully testing the signature box on my phone and another tablet. I have concluded the issue is with my tablet. After a system reset the signature pad woks fine onthe tablet. Thank you Caspio and All for posting such helpful javascript snippets.

I have followed the Caspio instructions for setting up a digital signature pad (http://forums.caspio.com/index.php?/topic/4693-js-adding-a-digital-signature-to-a-submission-form/ I have used this code on two separate pages, one submission form, where the signature capture works. The second is on a details page where I both want to capture the signature (if previously not received) and I want to display the signature (if already signed). On this page, the capture portion works but I cannot get the display portion to work. So, if it was previously signed I am not able to see the signature. Here is the deployed page: http://www.wgaportal.org/reviewcertifications.html?ApplicationID=226 Help would be appreciated.

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. Implementation: This solution can be used "as-is", without any changes if: It is used in a Submission Form DataPage. Ajax is disabled 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> <div id="cb_sign_wrapper"> 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. <canvas class="pad" 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;" width="218"></canvas><br /> <span style="margin: 0px 0px 0px 264px;"><input class="clearButton" type="reset" value="Clear" /></span> <input class="output" name="output" type="hidden" /> <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> 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 "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 HTML Block on step "d" above. To display the signature in a results page of a Report DataPage, Details 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.