Sign your name across my heart


Userlevel 7
Badge +8

Nintex_Labs_Horz.pngWell it was an age old question.. As an IT Pro using Nintex, and also once I joined Nintex I was asked quite a lot "Can we capture signatures in this process ?"  The answer was almost always the same, "It depends !" When diving in and really looking at the question though, as a consultant or IT Pro in an organisation you had to ask. "Do you really need a legally binding digital signature, or do you just need a hand written signature on a form to satisfy a particular stakeholder ?"

I'm not speaking on anyone's behalf, except my own; in my experience the answer was normally that a handwritten signature was needed as part of the process because that was how it is done, and will continue to be.

Now I had some success in arguing that the process didn't require a signature, up until the very final phase. Thus removing 4 or 5 signatures from a process and with some strategically placed usernames and date time stamp entries from a workflow, you could removal all signatures from the process. However I didn't win all the battles, and there are some circumstances where it just makes sense to have a handwritten signature on the form. It was still tricky to do, and there are a few ways to go about it.. But none were as slick as what I'm going to be showing you in this post.

This week Nintex will start rolling out an update to Nintex Mobile that will allow signatures to be captured on mobile devices via the Nintex Mobile App. So if you notice an update come through on your favorite device, chances are you'll be able to have a go at the following. Look for version 3.9 to be exact

This screen shows you a form in Nintex Mobile (Using the Android version) with the new Signature control enabled.

Screenshot_2016-02-15-15-58-31.png

By selecting the control, it will automatically rotate the screen to capture the signature.

Screenshot_2016-02-15-15-58-46.png

After selecting 'Done' you are returned to the form.

Screenshot_2016-02-15-15-58-58.png

Awesome right ? I'm a super happy process builder with this being rolled out..

Nintex really wanted to get this out there for people to use sooner rather than later.. So let me walk you through how we go about getting this to work in mobile and to display in the browser.

  1. First of all we need a form . Going simple with one, as to not distract.
  2. For this to all work, you need to create a plain multiple line text field in your list. This field needs to be named 'Signature' or 'signature'.
  3. Re-size the box to the size you want the signature to show.
  4. Go in to the form settings (not the layout) and select 'Custom JavaScript'
  5. Paste in the following JavaScript, (Attached at the bottom as well)

// 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.hide();

    // 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>' + AddSignatureMessage + '</div>')

    }

});

In the list that I submitted through my signature earlier, you'll see the signature all encoded as base64. (The JavaScript above decodes this as a PNG )

So when I open up the display form.

I am graced with my signature.. (Can you see the resemblance to my name ? )

I hope you enjoy this update as much as I am, and stay tuned for further developments to this functionality which will make it even easier for you to build signatures to your forms.

Until next time..


36 replies

Excellent write up Dan Stoll​ -- very useful, thanks for sharing.

Oooooo I like that!

Got a customer asking for that.  Thanks for the early warning.

Badge +2

I agree - excellent write up Dan. On the downside - what possessed Nintex to limit this to only mobile devices? This would have value in the laptop/desktop client world as well. Granted, Windows devices aren't very accommodating of signatures, but perhaps a method to apply a predefined signature. Just thinking out-side the box.

Userlevel 7
Badge +8

What are the security restrictions ?

Userlevel 7
Badge +8

Hey Gerard, Yeah doing it for the browser would be handy, and KK did a blog on it a few weeks back Embedding Signature Pad in Nintex Form​.

If you would like to see a pad built into the forms (not mobile) product get it on Nintex.uservoice.com if it is already there , make sure you vote for it.

I've seen a couple of ways to tackle signatures one of those was to store the pictures of the signatures in a folder and then use them as part of a workflow... Very nasty, and I felt pretty dirty after... A bit like a weekend in vegas.. But it got the job done and the key stakeholders were happy..

Signature field does not work the same as described with Nintex Enterprise Mobile app.  It is being treated as a multiple line text box.  We have both Nintex mobile app and our custom Nintex Enterprise Mobile app installed.  The control works great in the standard Nintext mobile app, but not in the Enterprise version.  Can you please let us know how to get this functionality working for the Enterprise version of the Nintex mobile app?

Our security team is generally not trustful of the cloud since we are a privately held company. Do you know where I can find white papers on the infrastructure? We just hired a cloud architect and he wants to look into it. Vadim Tabakman

Hi Sheral Fancher

What version do you have installed for the Nintex Mobile App? My update just came through today, I followed the instructions above and that has all worked fine for me. Let me know if you are free for a quick call and we can look into this for you.

Kind Regards,
Sophie Timu
Nintex Support

Userlevel 7
Badge +8

Hey Sheral,the code base for Enterprise was updated as well, which will automatically build out a new version of the app. Now this may be in the hands of a particular person etc, and if you aren't using an MDM the person who created the app will get an email letting them know about the update and the new compiled apps.Once you have the newest version installed let us know if it still isn't working..

This is (almost) awesome. I able to use signature field on iphone and ipad, using the Nintex Mobile. However, when I attempt to see the form on the desktop (view or edit item) , the signature  is shown encoded as base64. SignatureIssue.jpg

SharePoint 2010

Nintex Forms 2010  Enterprise (1.11.0.0)

Nintex Mobile 3.9

Please, help!

Very nice Mr Stoll.

The issue is fixed now. Since I was the only one that reported the issue, I will blame my missinterpretation. However, I still consider the text below a bit missleading.


"you need to create a plain multiple line text field in your list. This field needs to be named 'Signature' or 'signature'"

List field for me is a a sharepoint list field and not the form control. By default the control will be connected to the list field of the same name. This will cause the form to read the value from the list.

If I disconnect the control to the list field, it works as a charm!

I hope Nintex can validade this.

Just a thought, for on-premise SharePoint, Nintex Mobile does not talk any external cloud service. It will just talk to your on-prem intranet to talk to SharePoint. Not sure about your security concern though. Can you please explain?

The timing for this couldn't be more perfect! I am working on a project using Nintex mobile forms where I had this requested yesterday. Many thanks Dan, this was an awesome post

Do you know where I can find that  information written in stone; so I can show our infrastructure, security and cloud team that are leery to use Mobile Apps in general for our  employees BYOD company program? Vadim Tabakman

#INintex

I have just posted another blog to extend this making it work on both mobile and desktop, here is the link Extending Nintex Mobile Signature control to desktop/browser

hope it helps

Testing this new feature on the iPad, the Nintex mobile app treats a horizontal swipe as it's queue to expand out the left menu. Pretty annoying and difficult to sign when the menu keeps popping up.

Any chance of modifying the app to keep the menu closed when the signature pad it open?

Hi Dan,

How do you lock signature in edit or view mode?

Thank you!

I am also having an issue viewing the signature on the list. ‌, i see that you recommend disconnecting the control from the signature field, that did not work for me. any other suggestions? 

Thanks, 

Ivan 

I think this is so neat!

Hi ‌ is this possible in responsive forms designer?

Userlevel 7
Badge +12

So far it can't be added to responsive forms because of the requirement of adding custom JavaScript.

bummer... 

I am having the same issue as Ivan. I made sure the control is disconnected from any SP fields and the issue persists. Any ideas ‌?

Reply