10/19/2012 Updated to receive a querystring value for XML location. 

 

We recently had a need to implement a graphical signature capture on an InfoPath 2010 form. The expected client device was an iPad, but any HTML 5 capable browser should be able to use this page.

This SharePoint Application page utilizes jquery and jsignature to retrieve the signature image. They have been included in the download for ease of installation.

The basic requirements;

On the InfoPath form, you will need to add two components;

1. A button should be configured and codebehind created to perform this.NotifyHost(“sig”) on the button press. This will send the string “sig” to the ASPX page which will then make the signature panel visible and hide the InfoPath form.

2. A Picture attachment needs to be added to the form to hold the captured image from the signature control.

The application page needs to be called with two querystring variables;

1.  SigXPath. This will be the xpath to your picture field in the InfoPath Form

2. XsnLocation. This will be the path to your InfoPath template. Typically ~sitecollection/formservertemplates/<form.xsn>

To install;

Extract the contents of the download to your templates/layouts folder. The application page consists of templates/layouts/sigform.aspx and sigform.aspx.cs.

A subfolder called SIGCAP will be created that contains the jsignature js file.

 

Once extracted you can then open the signature capture form like so; The XmlLocation is optional and is used to reopen an existing document.

http://sharepoint/_layouts/sigform.aspx?SigXPath=my:MyFields/my:SignatureField&XsnLocation=~sitecollection/formservertemplates/myform.xsn&XmlLocation=\library\document.xml

 

Functional Walkthrough

1. The infopath button is pressed and the form’s codebehind invokes notifyhost().

2. The ASPX page receives the notifyhost from the form and checks that it contains the string “sig”.

3. The ASPX codebehind then makes the signature panel visible and hides the InfoPath form.

4. Once the signature has been placed on the control, the user will press the Sign! button.

5. Javascript is then used to place the base64 encoded signature into a hidden field and the codebehind then attaches it to the form’s picture attachment field.

6. the page then hides the signature panel and unhides the InfoPath form.

Last edited Oct 19, 2012 at 3:15 PM by wingatesl, version 3