I was asked by a partner recently on the availability of Signature pad in Nintex Form, and I am sharing how I did it using the jSignature library from jSignature. This is to demonstrate how to embed a Signature Pad in Nintex Form for Signature capture, store, and display using the said jSignature.min.js javascript library. The data of the signature is stored in a text field for redisplaying when the form is opened. What you will need is just the jSignature.min.js file to be uploaded to your site for later inclusion into your "Custom JavaScript Includes" of the Form, also don't forget you will need the jQuery liabrary to be included as well if it is not already done for the site or site collection level.
The result of the steps here is shown in below screen captured - Nintex Form with Signature Pad for signature drawing capture,
For the purpose, i have created a simple Custom List on my Office 365 Sharepoint site environment, with only two columns - Title, and Signature (i.e. both are single line of text) to store the title of the signature, and the signature data respectively, here is how the custom list setting looks like
With the custom list created, I have then customized the form with Nintex Form as captured below. My form consists of only three fields (i.e. data controls) - one for Title, one Rich Text Control for the Signature Pad, and Single Line of Textbox to store the Signature.
Include the "Custom Javascript" and "Custom Javascript Includes" as shown below, i have downloaded and saved the "jSignature.min.js" library to the SiteAssets folder of my Sharepoint site.
The JavaScript is to initiate the Signature Pad for signature drawing, or to re-draw the Signature from the captured Signature data if the form is opened for viewing or editing,
| NWF$(document).ready(function() { var savedSig = NWF$('#'+sig).val(); var sigdata = $('#signature').jSignature(); if (savedSig != "") { var dataurl='data:'+ savedSig; sigdata.jSignature('importData',dataurl); } }) |
The "Rich Text" control of the Nintex Form consists of only one line of HTML code "<div id="signature"></div>", here is how it looks like in the Control's Setting
The "Single Line of Text Box" form control is configured as below, where I have inserted the "Client ID JavaScript variable name" as "sig" for the JavaScript references.
The form's "Save" button is being configured as below to include the the following JavaScript (i.e. set the "Signature" control value with the Signature data when the form is being saved),
NWF$('#'+sig).val($('#signature').jSignature('getData', 'base30'));
under the Advanced - Client click setting
That's all you need to embed a Signature Pad in Nintex Form. Publish the form, and you should get a Signature Pad where you can draw signature, save the Signature in the Custom list, and displaying the signature when the form is opened for viewing or editing.
