Extending Nintex Mobile Signature control to desktop/browser

kkgan
Rookie
10 78 26.6K

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
kkgan
Rookie

interesting requirement. the signature control saved the drawing of signature as base64 image, feels like u might need to convert it to image for showing in Word. Office 365 word now supports new method of insertimagefrombase64, but i couldn't figure out if you can do anything from within a workflow, or maybe can invoke a web service call to do so?

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

rhia
Scout

We're in SP2016 - this is a requirement I know is going to come up a lot as we demonstrate this functionality on mobile. I felt like since it renders an image in the form itself, is there a way to grab the image that is rendered somehow and insert that to DocGen? 

Any wizards out there that might be able to do a step by step or even figure out if it's possible? Andrew Glasser  nmarples  Dan Stoll   Vadim Tabakman   

MegaJerk
Collaborator

I have never used this functionality at all so I probably won't be any help. 

That being said, is the data for the image contained anywhere in the FormData XML that gets generated?

If it's an actual image proper, maybe it's pathed somewhere, or perhaps it'll have the base64 encode which you could then maybe use to either insert inside of a Doc or as the payload of a webservice through a workflow action and have it uploaded temporarily to SharePoint and then referenced in a Doc. 

Maybe... 

(I've also never used DocGen

gah! 


Good luck

brightlight
Scout

Is there a way we can copy the converted base64 image of the signature into a column as a picture format? It would be great for us to use that into update document action. FYI: this is for on premises SP

  

BrianK
Scholar

Has anyone had luck implementing the signature pad control with the Edge browser using Nintex Live? I have the signature control working on desktop layout in Chrome, IE11 and Edge when the form is opened OnPrem but when I publish the form to Nintex Live, the sig pad (as well as images hosted onprem) will not load when using Edge but do work with Chrome and IE11.

Kok Koon Gan Rhia Wieclawek Andrew Glasser Dan Stoll 

dnes24
Novice

Did anyone tried implementing it as a custom control?

Any ideas and suggestion are greatly appreciated

juliemh
Novice

What are you wanting to do?  I have it implemented with two signatures working in both Nintex Mobile and Nintex desktop if that is any help.

kkgan
Rookie

signature control is already there for the desktop form, and Nintex does not have sdk for partner or customer to add control for the mobile app.

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

juliemh
Novice

from my reading the signature control is only available for one signature on the form, not two which is why I used your solution.

dnes24
Novice

Is that Signature Control available as Out of the Box, I couldn't find it in Nintex 2013.

The expectation is to have a custom control , and it can be simply dragged and dropped in any custom list form of Desktop as like other controls and can be connected to any multiline text column available in the list , independent of the column name . So that the multiline texbox to which the custom control connected starts behaving as Digital Signature Control.

I followed this blog for the implementation of Digital Signature as custom control

Create a custom form control sample 

kkgan
Rookie

Ops, not sure if I have mentioned it correctly, the Signature control is there but Nintex Mobile only…. The blog post I have is extend that capability to the desktop with the JS. Here is the blog by Dan on the Signature control. https://community.nintex.com/community/tech-blog/blog/2016/02/17/nintex-labs-sign-your-name-across-my-heart

juliemh
Novice

Thanks for the clarification.  I know that with the Nintex Mobile version one can create a multiline field called Signature, Signature1 etc and the app recognises it as a Signature.  However, the underlying javascript is still required to view the signatures in the desktop version of the form.  

kkgan
Rookie

IC, got your point. Do you think you can help to share your idea at Nintex.uservoice.com? I agreed if enhancement of the existing signature control is possible to include capability for both Mobile and Desktop, and rendering of the base64 string into image without the need for the JavaScript.

juliemh
Novice

I have created a new idea on Nintex Uservoice  - Signature controls to render to an image.  I hope I expressed the idea correctly.

ehakimi
Novice

Thanks Kok Koon Gan‌ great article!

I try to add this solution to on my form(using on O365 environment and have applied Nintex mobile phone layout and test on Android mobile v 5.0 device). It work well on web version but not working on mobile version (Android tested) when I am combining it with a "visibility" based on expression (to hide panel including signature). It will show sign panel based on all condition and totally disregard visibility setting on Android.

visibility expression setting to show:

fn-Equals(FormStatus, "Waiting for CIO approval")

I notify that rule not working on the app. So I am going to only show a panel including sign section if the value of FormStatus column equal with "Waiting for ..." (which is a choice field). I have tried all solutions explain here

Nintex Mobile – Runtime Rules Work on Android but not on iOS, Windows or Windows Phone 

by Andrew Glasser‌ and Vahid Taslimi‌.

Anyone had the same issue or try to combine solution with a panel to show/hide signature section based on any condition?

juliemh
Novice

I was able to get it to work on a Samsung5 by the rule equals("Waiting for CIO approval", Status).  I created a choice field with 3 options, put the signature in a panel,  added the rule above and ticked the Hide option

One thing to check is that the Hide option is ticked - quite often I have not ticked it and have nearly pulled my hair out looking for the problem - not saying that you have done this.

ehakimi
Novice

An update on this:

- It work fine on any web browser

- Even I used Smart Phone layout and use browser on same mobile device such as chrome on my Android, it won't happened

So it only happen on mobile app on "Nintex form" app latest version. I am assuming that is a conflict between JS and Nintex builtin functions.

Also I have tried adding another panel with a simple single line of text field on it and change value of FormStatus couple of times then it worked. Once I delete the test panel, surprisingly the first panel has worked properly as well.

So the problem solved.

ehakimi
Novice

Thanks Julie,

I think you are referring to mobile browser not Nintex app published via app studio. right? I heard in one of the video that we should use control setting for show/hide rather than using rule since rule not working with different mobile platforms.  

juliemh
Novice

Eshan,

I don’t have app studio but it definitely works for me in the Nintex Mobile App on both Android and IOS.

BrianK
Scholar

Hi all,

Has anyone found a way to set a validation rule on the signature control on desktop? I tried the obvious (adding isNullOrEmpty({self}) on the multiline text control but it does not work. Is it possible?

juliemh
Novice

I did a workaround by adding a calculated field named sigLength with the formula length(Signature) then using the validation rule  lessThan(sigLength,1) on the signature field. 

It seems to have something to do with multi line controls never being empty (perhaps there are end of line characters) but the length may be zero. 

With the desktop control I tried putting the rule lessThan(length(Signature),1) but that didn't work which is why I added the calculated field. However, that rule worked in the Nintex Mobile App.

BrianK
Scholar

Hi Julie,

Thanks for the fast reply. I tried your solution but the calculated field never displays a value greater than 0 so the validation rule always fires. Which version of SharePoint/Nintex Forms are you running? I am running On-Prem SP 2013 and Forms Version: 2.11.3.0

bbartlett
Rookie

Does anyone have a full working JS file they can provide for multiple signatures. I can't seem to get mine working. 

brightlight
Scout

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.';   
var icounter = 0; 
// Find all the signature controls.    
NWF$("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 holdvar = "";
if(signatureInputo365EditMode.prop('disabled') == true)
{
//);
holdvar = signatureInputo365EditMode.val();
signatureInputo365EditMode = "";
//;
}
    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 != "") {    if(holdvar != "")
{
signatureContent = holdvar;
}
//;            // Insert the signature image.    
            signatureUI.after("<img id='img' height='" + NWF$(this).height() + "' width='" + NWF$(this).width() + "'   />");    
        } else {    
            // Insert a message saying no signature.    
            signatureUI.after('<div>' + NoSignatureMessage + '</div>');  
        }    
    }    
    else { 
//;   
if(icounter==0)
{//;
  // Insert a message saying its not supported in browser.   
        signatureUI.after('<div id="signature"></dv>');  
        var sigdata = $('#signature').jSignature();  
}
else
{
//;
     // Insert a message saying its not supported in browser.   
        signatureUI.after('<div id="signature2"></dv>');  
        var sigdata = $('#signature2').jSignature();  
}
icounter++;
    }    
});   
});  
  
function setControlValue(){  
  var str = $('#signature').jSignature('getData');  
  NWF$('#'+jsignature).val(str.substr(str.indexOf(",") + 1));  
  var str2 = $('#signature2').jSignature('getData');  
//;
if(str2!=undefined){
  NWF$('#'+jsignature2).val(str2.substr(str2.indexOf(",") + 1));  
}
// + 1));
// + 1).indexOf("/"));
if(str.substr(str.indexOf(",") + 1).indexOf("/") == -1 || str.substr(str.indexOf(",") + 1).indexOf("8EMRJwuYBQQEoAEsAAAAAElFTkSuQmCC")!=-1 
|| str.substr(str.indexOf(",") + 1).indexOf("C86fUajgABAgQI")!=-1)
{
 ;
 return false;
}
if(str2!=undefined){
if(str2.substr(str2.indexOf(",") + 1).indexOf("/") == -1 || str2.substr(str2.indexOf(",") + 1).indexOf("8EMRJwuYBQQEoAEsAAAAAElFTkSuQmCC")!=-1 
|| str2.substr(str2.indexOf(",") + 1).indexOf("C86fUajgABAgQI")!=-1)
{
 ;
 return false;
}
}
Page_ClientValidate();
return true;
// + 1).indexOf("8EMRJwuYBQQEoAEsAAAAAElFTkSuQmCC"));
}

first multi line text box name = Signature | Client ID JavaScript variable name = jsignature

second multi line text box name = Signature2  | Client ID JavaScript variable name = jsignature2

save button client click = return setControlValue();

Hope that helps!

EuanGamble
Communicator

Hi all,

Just a note to let you know that a web based signature control will be included in Universal Forms which is coming to Office 365 and SharePoint in the future. This will allow you to sign on either web or mobile and use the file object (not base64 string) as an image into docgen.

Cheers,

Euan

AUSharePoint
Scout

@kkgan is this still valid?

I am following this to the letter in O365 and am unable to get Signature to accept input. 

 

Capture.PNG

AUSharePoint
Scout

@EuanGamble will this be available in O365?

EuanGamble
Communicator

Hi @AUSharePoint,

 

The new signature control will be available in our new Responsive v2 designer (Universal engine) for Office365 and SharePoint.

 

Let me know if you have any questions.

Cheers,

Euan