Tag: Signature Pad

Extending Nintex Mobile Signature control to desktop/browser

We can simply extend the recent release of Nintex Mobile Signature Control to work with desktop/browser. This exercise I will show how I did it combining the blog post Sign your name across my heart from Dan Stoll​ and my previous post on Embedding Signature Pad in Nintex Form.

The outcome will be a form supporting the capturing and displaying of Signature on both Nintex Mobile or Desktop form. The Signature data is save as base64 image data in a multi-line of text list column (i.e. “Signature” in this case).

Here are the steps I followed:

1. Create a custom list for the purpose. We are going to have only two columns defined, one for the Title (i.e. Single line of text), and the second for Signature (i.e. Multiple line of text – Plain Text), as shown here

2. Customize the List Form with Nintex Form, as shown below. And don’t forget to also create a layout for Nintex Mobile Phone if you going enable the Signature capture on Nintex Mobile Application.

3. We going to set the Signature control with “Client ID JavaScript Name” (i.e. to “jsignature” in my example) as shown below, this is needed as we going to call JavaScript to get the Signature Data and assign it to the Signature Multi Line of Text Form Control.

4. For the “Save” button of the form, we going to set the “Client Clicked” event to call a JavaScript to assign the Signature data to the Signature form control. Below diagram shows the Button’s setting.

5. I have taken the JavaScript from Dan Stoll​’s post Sign your name across my heart​, and modified it to work with the jSignature library as shared in my previous post Embedding Signature Pad in Nintex Form​, I have changed line 23rd to hide the signatureUI using the CSS instead, and line 38 and 39 to call the jSignature library’s Signature control to allow capturing of Signature on the if the form is edited in the desktop browser. The JavaScript function (i.e. setControlValue) is to be called by the Save button to set the Signature base64 data to the Signature (i.e. multi line of text) form control. And, don’t forget to also include the jSignature library as mentioned in my previous post Embedding Signature Pad in Nintex Form​.






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.  
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");      
    var signatureInputo365EditMode = NWF$(signatureUI).find("textarea");  
    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');
  
    // 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();
    }  
}); 
});

function setControlValue(){
  var str = $('#signature').jSignature('getData');
  NWF$('#'+jsignature).val(str.substr(str.indexOf(",") + 1));
}





6. With that, we are all done, the form is now capable of capturing and displaying of signature on both Nintex Mobile or Desktop form.











	


	





	

		
		
Embedding Signature Pad in Nintex Form
	


	
	
	

		

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.