Embedding Signature Pad in Nintex Form

  • 24 January 2016
  • 59 replies
  • 311 views

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,

168591_pastedImage_1.png

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

168592_pastedImage_3.png

 

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.

169539_pastedImage_5.png

 

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.

169540_pastedImage_6.png

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

169541_pastedImage_7.png

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.

169542_pastedImage_8.png

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

169543_pastedImage_9.png

 

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.


59 replies

Userlevel 7
Badge +17

This is pretty fantastic! Thank you for sharing. Now if only JS was available for Nintex Mobile I have a few projects to build. We have used Image Annotation in the mean time.

Stay tuned, you will be getting the mobile edition very soon....

Badge +2

This looks great, I've been waiting for this feature. Do you have a rough idea when it will be available for Nintex Mobile?

Userlevel 6
Badge +12

Hi KK,

Great post.  Without testing this, I'm assuming we can hide the signature text box using the standard Nintex Forms hide condition without affecting functionality?

Cheers,

Chris

Userlevel 7
Badge +11

KK,

this is awesome mate!!  What a great solution.

We get so many questions about doing something like this.  Great stuff!!

cheers,

Vadim

i used css style visibility:hidden to hide it, I am sure that is just one of the many ways?

I was making the assumption it should. But bear in mind the jSignature library might have dependency on some browser version, so far I tested it works for IE, Chrome, even on my iOS device if open from browser. I remembered there were discussion on that around browser version... so please do a search for that on jSignature could be the direction, and I am sure there will be answers to workaround that...

The form I attached is from my office 365 site, just in case, you should create one for your on-prem....?

Badge +8

Oh this is really nice. We have a lot of forms that need signatures on it and we where looking at a bunch of different 3rd party tools that might be helpful to us. But if i can get this to work correctly it could solve a lot of our issues.

Userlevel 5
Badge +12

Don't you just love how extensible the product is

Badge +6

Did anyone get this to work on Sharepoint 2013 on premises?

I tried including the min.js as well as the min.noconflict.js, but I still get the message "Object doesn't support property or method 'jSignature'"...

check out also the later Signature control... Extending Nintex Mobile Signature control to desktop/browser

Badge +6

I finally got it to work, but when i include the rich textbox within a panel (to enforce paging navigation), it doesn't render correctly... any suggestions?

Badge +6

It seems the signature was rendered incorrectly because the containing panel was hidden when the form was opened in the browser... Did anyone else encounter this issue?

Also FYI Kok Koon Gan, there is a problem when you try to View the record, the script crashes with the following error:

jSignature is unable to find import plugin with for format 'undefined'.

From what I can tell, in View mode savedSig is not equal to '', but it is equal to null.

tge rendering and capturing is actually provided by jsignature instead of the rich text, rich text control is just to include the jsignature to the page. for formatting of other behavior of the signature pad in the briwser, you will need to look at the available settings in the jsignature library. i remembered checking on settings such as color, pad size, etc.

Badge +6

Hey Kok Koon Gan​,

The rendering issue within the hidden panel seems to be a bug between Nintex and jSignature... in any case, I fixed it by calling .empty() on the richTextBox and re-rendering the signature as soon as the panel became visible.

The View Mode issue seems more critical, however... Can you please try opening the form via "View Item" and let us know what happens?

Badge +6

Manfred Lauer​ found the solution here:

https://community.nintex.com/message/39857?et=watches.email.thread#comment-39857

To make it work in View mode, use the control's CSS class to retrieve the signature's value instead of var savedSig = NWF$('#'+sig).val();

That helps all others... thanks

Badge +3

Has anyone encountered issues saving back to teh list? The JSignature works but is not being stored into the Signature fields. I am using SP2010 and using the provided function from Matthew Skinner.

Thanks

Make sure u included the required script in the save button and references are correct?

Get Outlook for iOS<https://aka.ms/o0ukef>

Badge +3

My field is named Signature and the variable is Sig1:

NWF$('#'+Sig1).val($('#Signature').jSignature('getData', 'base30'));

Badge +4

How do we set a validation rule for signature field?

Badge

Nice Article. Quick question though - can this be incorporated in "Save to PDF" button click as well?

Userlevel 6
Badge +13

Hi ,

Could you expand on your solution to the hidden panel issue please? I have the same issue.

Thanks

Userlevel 6
Badge +13

This would be useful to ensure a signature is provided before the form is submitted.

I'm not sure how this can be achieved as the Rich text field cannot have a rule run against it.

Ideas ‌???

Userlevel 6
Badge +13

Has anyone had an issue using this on a touch device?

I've embedded this in a form and it works fine with a mouse and fine on a surface pro with a surface pen, but on a generic Windows tablet, running 8.1 and IE11 I just get dots where the finger or stylus touches the screen but no line when you start moving your finger across the pad.

Reply