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.