Nintex Forms Digital Signature Pad using jQuery and jSignature

Learn how to embed a digital / electronic signature pad inside Nintex Forms using jQuery and jSignature. Recently we had a client that needed two signature pad areas on there Nintex Form. The requirements were to allow users to sign there signature using touch screen devices such as iPads, iPhones and Surface Pro tablets.

After some research on how to accomplish this I found this Nintex blog article and thought a video tutorial with a few adjustments would be helpful.

jSignature is a jQuery plugin that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger. We will be using jSignature to create our embed signature pad within our Office 365 SharePoint Nintex Form.

Nintex Forms Digital Signature Video Tutorial

What the final solution will look like.

Nintex Forms Digital Signature Pad - SharePointly

Using two columns - Signature and Signature2 (i.e. both are multiple lines of text) to store the jSignature canvas data, here is how the custom list setting looks like. We are using Multiple lines of text instead of Single line so we can store more data.

Signature Custom List Columns

I have customized the Signature list with Nintex Forms as captured in the screenshot below. My form consists of only 4 fields (i.e. data controls) - one Rich Text Control for the Signature Pad, and Signature Multi Line of Textbox to store the Signature data and one Rich Text Control for the Signature2 Pad, and Signature2 Multi Line of Textbox to store the Signature2 data.

Nintex Rich Text HTML Control

We need to double click the Rich Text Control and then edit the “HTML” source to insert our HTML div with unique ID where our jSignature canvas will display for the signature.

Paste Code: <div id="Signature"></div>

Next double click on Signature Multi Line Text to open the Control Settings.

Multi Line Textbox Nintex

We will add an ID called Sig1 to the Signature Multi Line Text field to Store Client ID in JavaScript variable for Nintex. See image below. The control mode must be set to edit so the canvas can render the signature based on the stored data inside the Mult Line Text field.

ID in JavaScript variable for Nintex

The Rich Text Control’s background color can be changed to white and “Bring to the Front” to hide the Signature Multi Line of Textbox where the drawing data is stored. See image below.

Nintex Form Bring to the Front

We will repeat this process for the Signature2 Rich Text Control using another HTML div with unique ID.

Paste Code: <div id="Signature2"></div>

We will add an ID called Sig2 to the Signature2 Multi Line Text field to Store Client ID in JavaScript variable for Nintex.

Now we can add the jQuery and jSignature script links along with our embedded custom script. (Visit jSignature to download the script.)

jSignature is uploaded and being stored in the mobile Site Assets. 

jSignature Site Assets

Click on "Form Settings" in the Nintex form ribbon and edit "Custom Javascript" under advanced settings and "Custom Javascript Includes" as shown below must be populated the jQuery links and custom code.

Nintex Custom JavaScript Includes Code

The JavaScript is to initiate the Signature Pad for signature drawing from the captured Sig1 and Sig2 field data if the form is opened for viewing or editing.

Custom JavaScript Includes:

  • https://code.jquery.com/jquery-2.2.3.min.js
  • https://YOURSITE.sharepoint.com/SiteAssets/jSignature.min.js

Custom JavaScript:

NWF.FormFiller.Events.RegisterAfterReady(function () {
var savedSig = $('#'+Sig1).val();
var sigdata = $('#Signature').jSignature({'UndoButton':true})
if (savedSig != "") {
var dataurl='data:'+ savedSig;
sigdata.jSignature('importData',dataurl);
}
var savedSig = $('#'+Sig2).val();
var sigdata = $('#Signature2').jSignature({'UndoButton':true})
if (savedSig != "") {
var dataurl='data:'+ savedSig;
sigdata.jSignature('importData',dataurl);
}
})

To finish up we need to update the form's "Save" button is being configured as below to include the following JavaScript (i.e. set the Signature and Signature2 control value with the #Sig1 and #Sig2 drawing data when the form is being saved). Double click the save button to open the Control Settings the open advanced settings and paste the code below in the Client click.

Nintex Client Click

Client Click Code:
NWF$('#'+Sig1).val($('#Signature').jSignature('getData', 'base30')); NWF$('#'+Sig2).val($('#Signature2').jSignature('getData','base30'));

That's all you need to embed a Signature or Drawing 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.

Leave a comment below if you have any questions or feedback.


Matthew Skinner