Sign your name across my heart

Well 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.

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

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

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 on.e, 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..