Search the Community

I've followed the steps from the 2014 instructions that Caspio posted here: and I have yet to get it to work. Are there updated instructions that I maybe missed on this forum? Has anyone had any success getting it to work? I am able to get the datapage to display on my site and it does appear to allow for content to be written in the signature box once deployed and it does appear to submit a signature (or at least it refreshes with a blank box after I hit the "Submit" button) but when I go to the underlying table the signature field is blank. I've tried one billion zillion times. About to give up.

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. 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 --> </header><div id="cb_sign_wrapper"><header> <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"></pcanvas><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" /> </footer></div><footer> e. Copy the code below and paste inside the Datapage Footer. <script> document.addEventListener('DataPageReady', drawSignature); function drawSignature(){ $('#cb_sign_wrapper').signaturePad({drawOnly : true}); } // puts the signatures on the proper fields document.addEventListener('BeforeFormSubmit', saveSignature); // For Single Signature function saveSignature(){ $('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 --> </header><div id="cb_sign_wrapper_1"><header> <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" /> </footer></div><footer> e. Repeat steps from above and insert in HTML Block the following code: <!-- Caspio Added --> </header><div id="cb_sign_wrapper_2"><header> <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" /> </footer></div><footer> f. Copy the code below and paste inside the Datapage Footer. <script> document.addEventListener('DataPageReady', drawSignature); function drawSignature(){ $('#cb_sign_wrapper_1').signaturePad({drawOnly : true}); $('#cb_sign_wrapper_2').signaturePad({drawOnly : true}); } // puts the signatures on the proper fields document.addEventListener('BeforeFormSubmit', saveSignature); // For Single Signature function saveSignature(){ $('input[name="InsertRecordSignature_1"]').val( $('#cb_sign_wrapper .output').val() ); $('input[name="InsertRecordSignature_2"]').val( $('#cb_sign_wrapper .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.