cancel
Showing results for 
Search instead for 
Did you mean: 

Extending Nintex Mobile Signature control to desktop/browser

Workflow Hero
10 78 9,043

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.

78 Comments
Workflow Hero

boom

Workflow Hero

This is great! Thank you!

Workflow Hero

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.

Workflow Hero

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.

Workflow Hero

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.

Workflow Hero

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.

Workflow Hero

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.

Workflow Hero

Wow thanks Matt! That was surprisingly obvious in hindsight.

Workflow Hero

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!

Workflow Hero

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,

Workflow Hero

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!

Workflow Hero

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

Workflow Hero

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.

Workflow Hero

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.

Workflow Hero

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!

Workflow Hero

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

Workflow Hero

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

Workflow Hero

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.

Workflow Hero

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!

Workflow Hero

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.

Workflow Hero

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.

Workflow Hero

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.

Workflow Hero

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)); 
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Workflow Hero

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

Workflow Hero

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

Workflow Hero

Hi Jared,

I didn't tried this on SP 2016, but i find no reason why it won't work...

Get Outlook for iOS<https://aka.ms/o0ukef>

Workflow Hero

just got it to work.  There was a mistype in my jquery references. 

Not applicable

Great post! Thank you, this is exactly what I'm looking for. Tried in on-prem sharepint 2013, works perfect.  

Workflow Hero

Hi, I have tried this in Enterprise 2010 and can't seem to get it to work. My multi-line text field just looks like a multi-line text field with a cursor. Anyone else have this issue?

Workflow Hero

One thing to note with the above code, if no signature is added during the New mode, the field is locked for good. We ran into the problem where a user will partially fill out the form, save, edit and then wish to sign. In this case they will be unable.

Workflow Hero

I am using SharePoint 2010 and have been unable to get the desktop signature to work. The mobile one works great, and I can view it in desktop mode, but I am not able to add signatures in desktop mode. Using the above code from Wisam, in "Add" mode I get this:

Just a blank "Signature" area but nothing I can do with it.

When I add a signature in Mobile, and then "Edit" the form, here is what I get:

I can't edit the graphic signature at all (note: I have the text of the signature field showing below, just for reference purposes).

My JavaScript Includes are set up like this:

Has anyone been able to get this to work in SharePoint 2010 on prem? Any suggestions greatly appreciated!

Workflow Hero

Since I was using IE to test this, it occurred to me to try it in Chrome. It worked! Then I went into developer tools (F12) and manually changed the document emulation to 10 and it worked in IE as well. So, it turns out that the problem is that I am using IE11 with SharePoint 2010 so I'm running it in compatibility mode, which makes it look like IE8, so the jSignature library doesn't work.  

I found this solution: How to render a SharePoint page in IE using EDGE mode without changing the master page – paul.tavare...  which is a utility that allows you to pass the url of the page you want to load NOT in compatibility mode (like the form with the signature on it, in this case). This page is loaded in an iframe that emulates the current version of IE. This utility works for me for this signature form, so I think my problem is solved. 

Workflow Hero

Is there anyway to set signature field as a require field?

Workflow Hero

Can we also get the JavaScript to pass on nintex live forms?

Workflow Hero

This is great but doesn't work for me in IE11 or Edge but works wonderfully in Chrome & Firefox. 

I have tried to put a button to clear the signature in the event of someone drawing incorrectly.  I have assigned a function to the button clearSignature()

Then in the custom javascript after function setControlValue() have added

function clearSignature() {
          $('#signature').val('');  
}

An error occurs after publishing when the button is pressed: The form is referencing a field that does not exist. Please notify the form designer.

I haven't been able to track a field that doesn't exist and thought it may be jsignature field name.

Anyone come across problems with IE11 & Edge or have a solution to a reset signature button?

Workflow Hero

Cool! You may also check the JSignature library for all other available functions and features.

Kok Koon Gan (KK) | Technical Evangelist | Mobile: +65 8332 7738 | Office: +65 6407 1059 | @kknintex<https://twitter.com/kknintex> | 8 Marina View Asia Square Tower 1, Level 07-04, Singapore 018960

<https://twitter.com/nintex> <https://www.facebook.com/Nintex> <http://www.linkedin.com/company/nintex> <http://www.youtube.com/nintex>

Workflow Hero

Of course.  How stupid of me.

Any ideas on IE11 or Edge?  I am testing on a laptop and have created a generic tablet layout.  I am sure it worked last week.

Workflow Hero

Resolved both issues.

For a reset button create the button as a javascript button and in the client click add $('#signature').jSignature('clear').

Thanks for your help

Workflow Hero

Andrew, would you be able modify this line of code to include 4 signatures (line 6 of the js above)?  I am not experienced at JS.  My controls are Signature1, Signature2, Signature3 and Signature4

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

Workflow Hero

You should be able to replace it with

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

Workflow Hero

Hi Andrew, I'm having the same issue where I need 4 signatures. I named my controls Signature1, Signature2, Signature3 and Signature4 and used your bit of JavaScript. When I publish and run the form I'm only able to write on Signature1. I tried making the Client ID JavaScript variable name unique to each control that requires a signature but that does not work either. Could you help me get this to work? Thank you.

Workflow Hero

Make sure you change the JS code in all the appropriate places. Such as line 6 in the original post should have all the new names, but lines 38,39, 45 & 46

Workflow Hero

Thank you for getting back to me. I have very little experience using JavaScript so I apologize for my questions. I already have line 6 changed to include the .add() function, but I do not see where else I have to add that line of code. Here is a screenshot of my JavaScript.

Workflow Hero

I finally got it to work. I don't know if my issue came about because I'm on SharePoint 2010, but I ended up having to repeat a section for each individually named control. It was important to list them out in reverse order than they appeared on the list for it to work at all (this was odd to me). I had to repeat the code in the red box for each named control (Signature1, Signature2, etc.). Remember to change the highlighted sections to the name of your controls if you are using this method.

Workflow Hero

Any way of implementing this in the responsive form (the code by Wisam Fawzi) as a "in-the-box" solution for signatures on responsive forms? 

Workflow Hero

If you referring to the recent released of responsive form designer by Nintex, the answer is no as what was introduce here for the signature is by javascript which is not supported by the responsive form.

Workflow Hero

all good i ended up going back to the classic form.

Workflow Hero
Workflow Hero

got it sorted using classic forms

Workflow Hero

Hey folks! This seems like the place to ask ... anyone figure out how to pull out a sig from the form & put it into a Document Generation file? That's a requirement I have at the moment...