cancel
Showing results for 
Search instead for 
Did you mean: 

Sign your name across my heart

dan_stoll
Nintex Newbie
22 36 11.8K

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 Comments
jessewilker
Nintex Newbie

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

burkslm
Nintex Newbie

Oooooo I like that!

andrewvr
Nintex Newbie

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

gman
Nintex Newbie

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.

dan_stoll
Nintex Newbie

What are the security restrictions ?

dan_stoll
Nintex Newbie

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

sfancher
Nintex Newbie

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?

espradli
Nintex Newbie

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

sophie_timu
Nintex Newbie

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

dan_stoll
Nintex Newbie

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

technunes
Nintex Newbie

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!

Nintex Employee
Nintex Employee

Very nice Mr Stoll.

technunes
Nintex Newbie

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.

adilmughal
Nintex Newbie

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?

pesikwane
Nintex Newbie

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

espradli
Nintex Newbie

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

Nintex Employee
Nintex Employee

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

BrianK
Nintex Newbie

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?

bhashwar_bhatta
Nintex Newbie

Hi Dan,

How do you lock signature in edit or view mode?

Thank you!

ivgarcia
Nintex Newbie

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 

burkslm
Nintex Newbie

I think this is so neat!

cassymfreeman
Nintex Newbie

Hi ‌ is this possible in responsive forms designer?

andrewg
Nintex Newbie

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

cassymfreeman
Nintex Newbie

bummer... 

afortson
Nintex Newbie

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 ‌?

dharani
Nintex Newbie

Hi,

Is there is any possibilities to add eSignature in responsive form for desktop view.

Nintex Employee
Nintex Employee

Euan Gamble‌ anything you can share around Universal Forms?! 

saravanamurthi
Nintex Newbie

Dharani - are you asking the e-signature to be added to multi line text box for approval ? 

Nintex Employee
Nintex Employee

Hi Dharani Maniraj‌,

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

dharani
Nintex Newbie

Hi,

  For Multi line text box in responsive form, is there any option to expand vertically without using scroll down.

dharani
Nintex Newbie

Hi,

 How to add print button in nintex forms in responsive designer form?

Nintex Employee
Nintex Employee

Hi Dharani Maniraj‌,

In Universal Forms, we have introduced a new feature to automatically adjust the height of the multiline textbox when text is entered.

Cheers,

Euan

Nintex Employee
Nintex Employee

Hi Dharani Maniraj‌,

We only support the print button in the ribbon. We dont support a custom button action for print.

Cheers,

Euan

dharani
Nintex Newbie

Hi Euan Gamble,

 Can you please tell the release date of universal form in nintex?

brianknight
Nintex Newbie

I am also unable to actually see the signature within the form. It works great in the Nintex Mobile App, but when I look at the form all I see are the numbers and letters that signature creates.  I've tried disconnecting the control from the list, but that didn't seem to work.  Any help here would be great.  This is one feature that we are desperatly needing.  I would love to see this feature made available soon.

maya
Nintex Newbie

Hi @brianknight ! Found a way on capturing the signature returned in base64 data to an image when viewed the form in sharepoint. Update your nintex form to:

1. add a rich text form control

2. configure the rich text control

3. do not write anything in the text box when you open the rich text config

4. instead, click the "edit source" and put below message

<img src="data&colon;image/jpeg;base64,{ItemPropertySmiley Frustratedignature}" width="200" height="200">

Step number 4 will enable you to display the base64 message from your Signature plain text column to an image.  You may change the size accordingly.  Also, you may add some rules within the form to hide the "Signature" column during view/edit so user wont be confused with the base64 data and will only see the image.

5. Do not forget to add another rule to hide the rich text control in New Item mode.