Vadim Tabakman

Nintex Forms - Simple Electronic Signature

Let me start with, Electronic Signatures and Digital Signatures are completely different beasts.  Digital Signatures can be complex, secure, validatable (is that word? :) ) and if you are using Nintex Workflow, you can find one way of using digital signatures with the CoSign product by ARX.  Check out the work that has been done around Digital Signatures by ARX here - http://www.arx.com/flash/Digital-Signatures-and-Nintex-Workflow

If on the other hand you are using Nintex Forms and you want a simple electronic signature, below is one way of doing it.  In the example below, I'm not storing any timestamp, but that could be easily added.  Also note, that this type of electronic signature is quite easily forged.  If you wnat something more reliable, I suggest looking at Digital Signatures.  eg. ARX CoSign product or DocuSign.  The example of the form can be downloaded from the download section at the bottom of this post and it includes all the Javascript needed to get it to work.

This is my solution to the electronic signature requirement.  It can be considered as a very simple type of electronic signature and you should really consider what you need before implementing this type of solution.  Ideally, we'd have a custom control that we could reuse, but for now, this is all I need.

What does the Form look like?

Signature Required 

You can see that we have a control that shows the signature and a button that a user that is filling in the form can click, to electronically sign this form.

When they click on the Sign button, this is what they seen :

Signed Form

Notice at the top right, it shows who I am logged in as.  I'm logged in as Homer Simpson and that is what was signed on my document.

Also note that when the signature is added, the Sign button disappears so as to not allow another signature of this document.  Also, if you go to edit this document, the button will not appear.  This was a requirement I was given, but ofcourse you can change it to do what you like.

How does this work?

The concept I used, was to use a Label control to display the signature.  This is because this control can't be editted.  I wrapped it in a Panel so that I could add a border and make it look nicer.

There is also a Text control which is actually what stores the signature.  Most of the time, you won't even see this control.  It's simply a container that the Javascript uses to read and write to.

The other reason I used this functioanlity, is that when you save a Form instance, the item is created in the list and there is also an item property called "Form Data", which is the raw xml of the form instance.  Text controls data is stored in the Form Data property but Label values aren't.

Design

To make the signature look like a signature, I chose the Garamond font and italicized it.

Signature Font

There is Javascript behind the scenes here that is using the SharePoint Client Script model (SP Namespace).  It's figuring out who the current user is, and gets the users display name to use in the signature.

Below, you can see the Javascript that is being used.

var currentUser = null;
function fnElectronicallySign()

  if(NWF$('.cssElectronicSignature').find('input').val() == '')
  {
    var context = new SP.ClientContext.get_current();
 
    if (context != undefined && context != null)
    {
      var web = context.get_web();
      //Load the current user
      currentUser = web.get_currentUser();
      context.load(currentUser);
     
      context.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));
    }
  } 
 else
   NWF$('.eSigLabel').find('label').find('em').html(NWF$('.cssElectronicSignature').find('input').val()); 
}

function onQuerySucceeded()

  NWF$('.eSigLabel').find('label').find('em').html(currentUser.get_title()); 
  NWF$('.cssElectronicSignature').find('input').val(currentUser.get_title()); 
  NWF$('.eSigButton').css('visibility', 'hidden');
}

function onQueryFailed(sender, args)
{
  alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}

function fnElectronicSignatureValidation(source, arguments)

  if(NWF$('.cssElectronicSignature').find('input').val() == '')   
    arguments.IsValid = false;
  else
    arguments.IsValid = true;
}


NWF$(document).ready(function() {
  NWF$('.cssElectronicSignature').find('input').css('visibility', 'hidden');
  if(NWF$('.cssElectronicSignature').find('input').val() != '')
  {
    NWF$('.eSigLabel').find('label').find('em').html(NWF$('.cssElectronicSignature').find('input').val()); 
    NWF$('.cssElectronicSignature').find('input').css('visibility', 'hidden');
    NWF$('.eSigButton').css('visibility', 'hidden'); 
  }
});

You'll notice in the Javascript, we've added a custom validation function.  This is used on our Title field.  What it does is check if the form has been signed and if it hasn't, it fails validations and lets the user know.

Signature Validation

To add the Javascript, we go into the Form Settings and expand the Custom Javascript section.

Custom Javascript

Conclusion

Ideally, we also store a timestamp, but leaving that to the reader as it wasn't a requirement for me.

This is one way of getting this done.  It may not follow any guidelines there are out there about Electronic Signatures, but it does give you at least some way of achieving this goal.

If you're looking at branding your forms for the entire farm (eg. Simple Branding ), you could put this signature functionality into the template form and then any forms you created in your farm from then on, will automatically inherit this functionality.

If you have any suggestions, recommendations or questions, feel free to comment or email me.

Downloads

Nintex Forms 2010 and 2013

Download the Form - Download and import it into the Form Designer Page

Download the Multi-Signature Form - Download and import it into the Form Designer Page

Gravatar
Posted by Vadim Tabakman Friday, September 6, 2013 9:25:00 AM Categories: Electronic Signature Javascript Nintex Nintex Forms Nintex Forms 2013 SharePoint Signature
Copyright Vadim Tabakman
Rate this Content 1 Votes

Comments

Thursday, September 19, 2013 1:52:05 AM
Michael

re: Nintex Forms - Simple Electronic Signature

Hi Vadim,  Thanks for you article!  I am trying to implement this form as a workflow flexi task form however cannot get rules to work on the choice control.  Would like to hide the signing panels if the user chooses to reject the policy.  If I put a normal choice control on I can get the rule to hide it, however when the choice is connected to the "Decision" in the task it does not.  Do you have any ideas?  Thanks!

Friday, March 7, 2014 12:12:49 PM
Aman

re: Nintex Forms - Simple Electronic Signature

How do I take this one step further and sign a Nintex form using a Digital Signature instead of a plain simple electronic signature? Please note that I am not talking about signing a Nintex workflow ( I know how that;s done using arx.com digital solutions for nintex)

I want a digital signature for a "form" not a workflow

Thanks

 

Friday, March 7, 2014 12:12:53 PM
Aman

re: Nintex Forms - Simple Electronic Signature

How do I take this one step further and sign a Nintex form using a Digital Signature instead of a plain simple electronic signature? Please note that I am not talking about signing a Nintex workflow ( I know how that;s done using arx.com digital solutions for nintex)

I want a digital signature for a "form" not a workflow

Thanks

 

Thursday, March 20, 2014 7:02:33 AM

re: Nintex Forms - Simple Electronic Signature

Dear Vadim,

I did exactly what you do but my sign button do not display on form only on ribbon, but that is not the issue - I really want this sign function to work but it does not. I do use the Nintex form designer trail and we tried do develop a leave management system using Nintex form designer and workflow designer  - we evaluate Nintex and testing it's capabilities, but I am stuck with the electronically signature example on your page.

Next week on the 26 March 2014  I must give a demo for the EXCO (Executive Committee) and the sign of the form is crucial.

Thank you.

Kind regards,

Mara

 

Thursday, March 20, 2014 9:32:44 AM

re: Nintex Forms - Simple Electronic Signature

HI Mara,

Did you download the form and also the SPAPI javascript files?

You will need to tweak the form so that it points to the SPAPI JS file in the right location.

cheers,

Vadim

Thursday, March 20, 2014 9:46:29 AM

re: Nintex Forms - Simple Electronic Signature

Aman,

ProSymmetry has a Digital Signature product for Nintex Forms. If you email me at gbailey@ProSymmetry.com or call 713-985-9997 , I can send a brochure as well as set up a demonstration. I look forward to supporting you.

Greg

Friday, March 21, 2014 7:32:10 AM

re: Nintex Forms - Simple Electronic Signature

Good day, Vadim

Thank you for your prompt reply, no unfortunately I did not download the SPAPI javascript files - I did see that it is available on the Querying User Profiles page - but I also do not know where to upload the SPAPI files to? I am only working with Nintex for 2 weeks and stuck for the last 3 days on the signature use.

Kind regards,

Mara

Friday, March 21, 2014 7:55:14 AM

re: Nintex Forms - Simple Electronic Signature

Hi Mara,

basically, you need to up get the SPAPI JS files and put them anywhere where the form can get access to them.  I'd put them in a SharePoint Document library.

Then update the Nintex Form.  Go into the Form Settings -> Advanced and there should be some urls in there that are pointing to the JS files.  You'll need to update the urls to point to your document library.

Hope that helps.

cheers,

Vadim

Wednesday, June 11, 2014 2:58:42 PM
Shamika
Gravatar

re: Nintex Forms - Simple Electronic Signature

Hi Vadim, 

Thank you for this great tutorial. I used this to e-sign a giant Nintex form. Here is my issue, when anyone hits enter in a textbox field the form gets signed automatically. I do not see any JavaScript errors when I inspect element. I am very new to JavaScript so I followed this tutorial exactly the way it is. It would be great if you could let me know if I am missing something, your input is highly valued.

Thanks!

Shamika

Wednesday, June 11, 2014 10:07:13 PM

re: Nintex Forms - Simple Electronic Signature

Hi Shamika,

What I usually do, is put alert function calls into my JS so that I can get an idea of where it got to.

eg. alert('start');

alert('end');

etc..

I hope this helps you get to the bottom of where it's not working for you.

cheers,

Vadim

Monday, July 21, 2014 1:44:31 PM
Krys
Gravatar

re: Nintex Forms - Simple Electronic Signature

Hi Vadim,

You've got a great article here. I just have a question though, I tried to follow this technique on one of the forms that I am making for a client. It worked perfectly great, however, it signed off every field that requires e-signature, so I guess, the script will only accommodate one e-signature. So my question is, how can we go about getting the form signed by multiple users? I tried to review the script but might take me weeks to figure it out, I'm a newbie to scripts and css.

I appreciate any replies coming from you. 

Thanks, Kris :)

Thursday, July 31, 2014 11:11:46 AM

re: Nintex Forms - Simple Electronic Signature

Hi Krys,

I've added another form to the download section above in this post.  It's a Multi-Signature form.  It has two signature bits on the form.  At the moment, I am swamped and don't have the time to write up how I did it in the JavaScript, but hopefully you'll be able to take a look at it and make sense of it.

If you want multiple people to sign the form, then not only do you need the signature areas, but you also need some rules on the form to enable/disable the signature areas based on who is looking at the form.  I leave this part up to the person designing the form as everyone will have different requirements and conditions for that.

cheers,

Vadim

Tuesday, August 19, 2014 7:38:35 PM
Krys
Gravatar

re: Nintex Forms - Simple Electronic Signature

Hi Vadim,

I really appreciate you taking some of your time to work on this, this is very helpful. Looking forward to your new posts! 

Thank again,

Krys

Wednesday, April 20, 2016 1:09:21 PM
Tarre
Gravatar

re: Nintex Forms - Simple Electronic Signature

Hi Vadim,

We are looking for a solution to fulfill an electronic signature requirement that has been presented to us.

I see that this post is from 2014. Are there are any newer solutions within Nintex 2013 or partner vendors since you wrote this post?

Thanks!

Tarre

Wednesday, April 20, 2016 1:37:27 PM

re: Nintex Forms - Simple Electronic Signature

Hi Tarre,

for other options, Nintex Forms supports an electronic signature control through the mobile app.

Also, we support DocuSign.  So you could convert your form to a document, send it through DocuSign to get signed and then store the PDF locally.

Vadim

Thursday, April 21, 2016 3:49:35 PM
Tarre
Gravatar

re: Nintex Forms - Simple Electronic Signature

Thanks for getting back to me so quickly. I was listening to your webinar on the new Document Generation thing when I posted that and didn't know if you would even see my comment since the post was 2 years old.

We have both Nintex Workflow and Forms, but are currently in 2010. The upgrade to 2013 is in motion so I hope to upgrade both Nintex products to 2013 as well. Is there a specific version of 2013 Nintex that we need to utilize the electronic signature (Nintex Live?) or DocuSign?

Thanks,

Tarre

Thursday, June 16, 2016 3:40:25 PM
Tim Edwards
Gravatar

re: Nintex Forms - Simple Electronic Signature

Good Day Vadim,

This is definitely something that I need for one of  my forms, but I am wondering how I can take it one step further. When the user clicks sign I am wondering if there is away to validate the user by prompting them to re-enter their AD Credentials first to verify that it is indeed the person logged in?

 

Thank you,

Tim

 

You must sign in to this site to post comments.
Already Registered?
Sign In
Not Yet Registered?
Register

Statistics

  • Entries (279)
  • Comments (1769)

Categories