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

Leave a Reply

Your email address will not be published. Required fields are marked *