cancel
Showing results for 
Search instead for 
Did you mean: 

Embedding Signature Pad in Nintex Form

Nintex Employee
Nintex Employee
27 60 16.9K

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
Nintex Newbie

responsive form??

Nintex Newbie

Hi Steven,

I have deleted, re-created a new form with only 1 signature line following all steps and still the signature is not showing in view mode.  Can see the xml code, but no signature.  I am on Sharepoint 2013 onPrem.  Anyone have any suggestions? 

Nintex Newbie

Hi,

 

I got the signature to store as an image by following the below instructions (which am colleague pointed out)

Make sure the text flied s multiple line "plain text" and with the nintex form put "nf-form-input" as the CSS class under formatting (you might also need to copy the jsignature.js file to your site as well)..

 

https://community.nintex.com/community/tech-blog/blog/2016/02/26/extending-nintex-mobile-signature-c...

 

Use the code in comments by Wisam Fawzi

 

NWF$(document).ready(function() { 

// Strings to be translated   

var NoSignatureMessage = 'No signature';   

var AddSignatureMessage = 'To add a signature please open this form in Nintex Mobile.';// Find all the signature controls (the plain multiple line text field that you named "Signature" or "signature")   

NWF$("div.nf-filler-control[data-controlname^='Signature']").add("div.nf-filler-control[data-controlname^='signature']").each(function () {   

    // Find the container element which houses the actual UI the user sees.   

    var signatureUI = NWF$(this).find("div.nf-filler-control-inner");       

    var signatureInputo365ViewMode = NWF$(signatureUI).find("div");                     //View Mode

    var signatureInputo365EditMode = NWF$(signatureUI).find("textarea");                //Edit Mode

    var signatureInputOnPremBothModes = NWF$(signatureUI).find("input[type=text]");   

    var signatureContent;   

    

    

    // Get the actual base64 value of the signature.   

    if (signatureInputOnPremBothModes.length != 0)   

        signatureContent = signatureInputOnPremBothModes.val();   

    else   

        signatureContent = signatureInputo365ViewMode.html();       

 

    // Hide all existing Nintex Forms UI elements.   

    signatureUI.css('visibility', 'hidden'); 

    

    var startIndex = signatureContent.indexOf(">") + 1;

    var stopIndex = signatureContent.lastIndexOf("<");

    var storedSignatureContent = signatureContent.substring(startIndex,stopIndex);   

 

    // If new form

    if(storedSignatureContent == "")

    {   

        // If not in edit mode then show image   

        if (signatureInputo365EditMode.length == 0 || NWF$(signatureInputOnPremBothModes).is(':disabled')) {   

            if (signatureContent != "") {   

                // Insert the signature image.   

                signatureUI.after("<img id='img' height='" + NWF$(this).height() + "' width='" + NWF$(this).width() + "'  src='data:image/png;base64," + signatureContent + "' />");   

            } else {   

                // Insert a message saying no signature.   

                signatureUI.after('<div>' + NoSignatureMessage + '</div>'); 

            }   

        }   

        else {   

            // Insert a message saying its not supported in browser.  

            

            signatureUI.after('<div id="signature"></dv>'); 

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

        }  

    }

    else // Existing form

    {

        signatureUI.after("<img id='img' height='" + NWF$(this).height() + "' width='" + NWF$(this).width() + "'  src='data:image/png;base64," + storedSignatureContent + "' />");

    }

});  

}); 

  

function setControlValue(){ 

  var str = $('#signature').jSignature('getData'); 

  NWF$('#'+jsignature).val(str.substr(str.indexOf(",") + 1)); 

}

Nintex Newbie

Hi,

The jsignature.min.js is working great with my Nintex form (SharePoint 2013 on Premises). I'm able to sign the form with my mouse and with my finger on a tablet. The signature is saved to the corresponding field and is also visible in read mode. But I'm unable to get my Topaz sign pad running!

I've installed the latest driver and a Topaz test software to see if the sign pad is generally working, everything's fine there. But I'm unable to sign my Nintex form with the Topaz sign pad.

Does any one know how to get this running?

Thank you!

Nintex Newbie

Hi Gerhard,

I have not been able to incorporate the Topaz sign pad either.  I've contacted the company and they are not very helpful in providing working code for Nintex forms/Sharepoint too.   I'm back to working with the jSignature JS code.

If you have been able to incorporate the Topaz sign pad please share.  

Thank you. 

Pam Lewis

Nintex Newbie

Can you tell me how to reference the JQuery Library? Is this something I have to download and store in site assets?

Automation Master
Automation Master

Yes, you will need to have a copy in your site assets, it works better than referencing a CDN. See the section in the article that describes this portion and see the image 

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.

Nintex Newbie

I have been able to get the signature pad to work, however it is not saving the data in the signature text field, and when I open the form it is not displaying the signature. I have followed the screenshots. Any ideas why the signature data is  not being captured?

Automation Master
Automation Master

Is it saving and not displaying or both? Check the column if any information is stored in the column. If no data, make sure the single line of text column is connected to the SharePoint 'Signature' column. And make sure all CSS/javascript capitalizations match throughout when trying to match and locate the controls.

Nintex Newbie

Hi Andrew,

 I checked the column and connection. I am able to sign the form  but it does not save any data in the signature field.

I'm wondering if the variable is not configured correctly?

Store Client ID in JavaScript variable     sig