Extending Nintex Mobile Signature control to desktop/browser

  • 26 February 2016
  • 77 replies
  • 89 views

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

178449_pastedImage_2.png

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.

178450_pastedImage_3.png

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.

178454_pastedImage_4.png

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.

178455_pastedImage_5.png

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.

178457_pastedImage_15.png

178458_pastedImage_16.png


77 replies

Userlevel 7
Badge +11

boom

Userlevel 3
Badge +8

This is great! Thank you!

Userlevel 1
Badge +4

Thank you for this!

I'm by no means a developer, so pardon my ignorance

Would it be possible to have more than 1 signature control on the same form? I am trying to modify the javascript but I haven't completely managed to figure it out.

Based on my understanding, the mobile side only regconised the 'Signature' multi-line control to store the signature data, so i don't think you can add more. But on the dekstop browser end using jsignature library, you should be able to add multiple signature on one form. I have not yet try thus out, it will be great if you could try this out and share it here so others could also learn from what you have learned.

Userlevel 7
Badge +17

I just followed these instructions and it worked great on desktop and mobile. This is a great approach. Just a couple of things I would note from my experience:

  • Start these instructions from the Desktop view first, adding the signature control. Set the jsignature client id value.
    • Then copy the control, go to the mobile layout, and paste the control
    • Going to the mobile layout first and adding the control and settings resulted in an error. Doing it in the above order also links the controls together which is preferred.

That's about it. Didn't take but 5 minutes to add the functionality. Both layouts work really well. Tested on an iPhone 5.

Userlevel 1
Badge +4

When viewing the record on desktop I am noticing a large amount of blank form directly following the signature. Did you encounter this? If I save without signing on desktop the blank space is gone.

Badge +3

I know this is a few months old, but I a had the same issue and found a solution.

Edit the settings for the signature control and in the Advanced part change Resizing to "No".  That  fixed it for me.  It seems to have to do with a validation DIV and the long base64 string that the field creates.

Userlevel 1
Badge +4

Wow thanks Matt! That was surprisingly obvious in hindsight.

Badge +4

Hi Kok Koon Gan,

How do i lock/ disable signature in edit mode after i submit the form. After i submit the form, when i go back and edit the form the signature is gone. Is there a way to lock signature after submitting but let remainder of fields editable?

Thank you!

uh...ic, I have looked at the Javascript code again, line 26 to 35 are the codes to tell if it is edit mode or view mode, but not checking against if it is new form or existing. So i guessed you will need to add additional check here. I will check against the "Signature" control's value if it is empty or with value to decide branching to line 27-30 or 31-35. Please try it out and share your code here for others to benefit as well... Thanks,

Badge +4

Hi Kok Koon Gan,

Thank you for the prompt reply. I had it working when I inserted a panel control, placed signature multiline text box inside it, and disabled the edit form by using rule. It works until you really change the value of any columns and submit it.

I also tried to remove the setControlValue(); for the save and submit bottom, but I did not get lucky. I have also added display:none; to the css to stop signature box from extending in view form. I am not sure whether that is causing this problem.

Thank you!

Badge +3

Does anyone know the best way to use this if there is more that one signature you need on a form?

Based on how the control works in a mobile device in Dan Stoll​'s blog Embedding Signature Pad in Nintex Form you will need to name the control "Signature" or "signature", as such i am afraid you can only get one in the mobile. For desktop form, there is no issue for you to have more than one.

Badge +3

I tested this using two fields in the list -- one called "Signature" and one called "Signature2".  I only had to modify one line of the code like this:

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

() {

This allowed me to capture two signatures in the mobile form, no problem:

Each of those fields is just set up in the list as a multi-line text field. I have not tested it, but I imagine you could add more signature lines in the same way.

Badge +4

Dean,

Is there a way to lock the signature after you have submitted. It should stay locked even if you edit the list item. This is because once customer signs, in future there may be a case manager edits the list item. When doing so, the signature gets cleared.

Thanks!

Userlevel 3
Badge +8

Could you make a formatting rule that disables the field if it's not empty?

Badge +4

It works, until you really edit an item and submit it.

Badge +3

For me, I have 2 permission groups -- an Add Only group, for the users who will be filling in the form, and a Contribute/Approve group for the supervisors who will be reviewing the forms. The Add Only group submits the form, including the signature(s) using Nintex Mobile and then they can't edit the form anymore after it's submitted. The supervisor group actually approves the form (via a workflow), so I guess technically they could edit the signature but they can also edit everything else. The workflow I use also assigns item permissions, changing it to Read Only for the non-supervisor group, so that locks it down further.

Badge +4

My scenario is different where users are in the field inputting items using tablets, and we see errors (typos and stuff) quite often. Customer signature verifies the data inputted by users, which is very important for future references (litigation stuff maybe). So it is very important that it is not changed, even when edited.

Thanks!

Badge +3

Has any been able to get the Print to PDF function to display the signature? It looks fine if they just print the page from the window however the formatting has excess items, but when it comes to Print to PDF it is blank.

Userlevel 7
Badge +17

Yes, this is an accepted form to add multiple signature controls. the .add() method and line 6 is simply locating all of the signature controls and running the following function on each found element or object. So you continue to add them for each named control you have.

Userlevel 7
Badge +17

Print to PDF shows the images for me, my code is the same as above. But do you mean your form is 10,000 pixels larger than it should be? that is the issue I currently have.

Badge +1

Hey bhashwar bhattarai, if you haven't figured this out yet, please try the following script. Great post , thanks for sharing!

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)); 
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Badge +4

Thank you Wisam. Currently my signature requirement has been changed, but I will definitely try this soon.

Badge +2

are there any issues with this being added to nintex forms 2016 on SP 2016 on prem?  I have had no luck so far.

Reply