cancel
Showing results for 
Search instead for 
Did you mean: 

Embedding Signature Pad in Nintex Form

Nintex Employee
Nintex Employee
27 60 17K

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.

60 Comments
Automation Master
Automation Master

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.

Nintex Employee
Nintex Employee

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

Nintex Newbie

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

Automation Master
Automation Master

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

Nintex Employee
Nintex Employee

KK,

this is awesome mate!!  What a great solution.

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

cheers,

Vadim

Nintex Employee
Nintex Employee

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

Nintex Employee
Nintex Employee

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....?

Nintex Newbie

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.

Automation Master
Automation Master

Don't you just love how extensible the product is

Not applicable

HelloKok Koon Gan - thank you for a great post!

I have SharePoint 2010 Foundation with Nintex Forms 2010 but I haven't been able to get this solution to work. Do you have any ideas on why these steps might not work with SharePoint / Nintex 2010 on premise?

I will continue to troubleshoot - hope you might have an idea though!

Not applicable

FYI I was able to get this to work in SharePoint 2010 by changing the code snippet to this.

NWF.FormFiller.Events.RegisterAfterReady(function () { 

   var savedSig = $('#'+sig).val();

   var sigdata = $('#signature').jSignature();

   if (savedSig != "") {

     var dataurl='data:'+ savedSig;

     sigdata.jSignature('importData',dataurl);

   }

})

Nintex Newbie

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'"...

Nintex Employee
Nintex Employee

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

Nintex Newbie

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?

Nintex Newbie

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.

Nintex Employee
Nintex Employee

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.

Nintex Newbie

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?

Nintex Newbie

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();

Nintex Employee
Nintex Employee

That helps all others... thanks

Nintex Newbie

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

Nintex Employee
Nintex Employee

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

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

Nintex Newbie

My field is named Signature and the variable is Sig1:

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

Nintex Newbie

How do we set a validation rule for signature field?

Nintex Newbie

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

Automation Master
Automation Master

Hi ,

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

Thanks

Automation Master
Automation Master

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 ‌???

Automation Master
Automation Master

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.

Nintex Employee
Nintex Employee

Maybe can look at if javascript could be used to perform validation...

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

Nintex Employee
Nintex Employee

I have tested it on my surface pro 3 without issue...

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

Automation Master
Automation Master

Works fine on the Surface Pro we have as well, but it's a more generic Windows tablet without stylus that doesn't work. Trying to ascertain whether it's the device or the script that's the issue.

Nintex Employee
Nintex Employee

If I remembered correctly, there were some settings available on the behaviour or characteristic of the JSignature script library such as line thickness, colour, etc. You might want to take a look at the documentation or discussion of the jSignature (i.e. link is provided in the post content i think). Or there are other alternatives of Signature pad scripts as well if the one used here is not working well with the devices you have.

Nintex Newbie

I was able to make the code work with a mouse..  Has anyone applied this code to a signature pad (Topaz)?  

If so, could you share the code changes for JSignature &/or Jquery.

Thank you..

Nintex Employee
Nintex Employee

You might need to download it here : http://willowsystems.github.io/jSignature/#/about/

Guessing

Nintex Newbie

where is the jSignature.min.js file ???

Automation Master
Automation Master
Nintex Newbie
  1. Thank you, mine is working in our 2016 On Prem form.
Nintex Newbie

Seems to work OK except when saving, mine tells me that it should be less than 255 characters.  Any ideas?

I tried changing the Signature to Multiple lines of text, but that does not seem to do the trick

Thank you

Nintex Newbie

Is your multiple line of text set to Plain text? It does not default that way. ALSO, if you change the configuration of the column, then you have to delete the control on the form, add it back and then test. I can email you my form file and list template file where I have this working on a desktop form if you want. This won't let me attach a file to the comment.

Nintex Newbie

Thank you Emily.  Your suggestion worked!  It was able to now save back to the Signature column.  Next issue When I click on the Title to open the item, it opens but the signature is not there...only the signature line.  Also, I can use my mouse to sign even though the item is not in Edit mode??

Nintex Newbie

What kind of environment is your SharePoint? I believe someone had this issue up above in the comments. I have SP 2016, Nintex Forms 2016 and On-Premise.

Nintex Newbie

Hi Emily

1.  Thanks again

2.  I read through the whole post and I think I need to address the Include jQuery...as I have not added that yet

3.  Apologies...I'm very new at this and, although a site administrator for my location, not an administrator for our entire environment

4.  Running SP/Nintex 2013 on-premise and don't know where the jQuery library is located in order to add the link per the instructions from Kok Koon Gan 

Nintex Employee
Nintex Employee

If I remembered correctly, i have included the link in my post. In case it isn't there, just do a search you should be able to find it.

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

Nintex Newbie

1. Your Welcome   

2. Go here http://willowsystems.github.io/jSignature/#/about/ and click on download on the top of the page.

3. Save the  jSignature.min.js file to your desktop

4. Then drag and drop that file into your site assets library on the site that you built this form on

5. Does that help?

Nintex Newbie

Dears,

I've got the same issue, do you find the solution on that, in other to have the visualisation of the signature after ?

Thanks

Julien

Nintex Newbie

I'm also having the issue with hidden panels and the rendering of the signature. Any help?

Nintex Newbie

Hi All,

I have followed the directions above and all works great except when the form is in VIEW mode you can still modify the signature pad field..  I have the jSignature.min,  jquery-2.2.4.min  in the assets library.      I am using IE 11 and/or Chrome.   How do I only display the signature in View mode - prevent a user from changing the value?

Nintex Newbie

Will it work if you put a hide or disable rule on the control when the form in in display mode?

Nintex Newbie

Double click the signature field (multi line text field) to go to control settings, under Advanced change the control mode to auto.

Nintex Newbie

Hi Bhashwar,  I checked the value and it defaults to 'auto'... still can't see the text signature.. I see the xml code in the rich text field but no signature appears.   I can't sign again in view mode. 

Nintex Newbie

Hi Pam,

If you are seeing the xml, I would delete the signature field (multi line text field) and add it again. Please make sure signature field (multi line text field) is a plain text field, CSS class is: nf-form-input nf-section, Client ID JavaScript variable name is jsignature, submit button has setControlValue(); on the Client click etc..