Skip to main content

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.

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-control-to-desktopbrowser

 

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("inputdtype=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)); 

}

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!

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

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

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.

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?

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.

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

I am using SP 2019 and having issues with the signature control rendering.



 



1. Downloaded the added the jSignatureForm.xml.zip from the original post. Unzipped and only one file was listed: jSignatureForm.xml. 



2. Uploaded jSignatureForm.xml to the Site Assets library on the site with the Nintex form needing the signature control.



3. Created the new list with a classic form (will not be using mobile; need to use a mouse for signature via browser form).  



4. Created Multi-line text field, named "Signature", and kept "Rich text" setting for field.



5. Opened Nintex Forms designer and added the new multi-line "Signature" control to the form.



6. In Signature control settings, in the Advanced section, set Store Client ID in JavaScript variable=Yes and Client ID JavaScript variable name=jsignature.



7. In Save button control settings, in the Advanced section, set Client click=setControlValue();.



8. Published the form.



 



When I open a new item form, the control isn't even appearing. I see the label for the control, but no multi line of text field on the form.  What am I missing?

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings