Implementing eSignature Capability in SharePoint

Introduction

SharePoint is a great platform to implement business process automation. A common requirement in organizations is to route a form to different parties in the company to sign and send the form to next person, a normal approval process that exists in all versions of SharePoint and pretty easy to implement it for your custom needs. With the SharePoint default functionality, you can assign a task to a person and he / she can approve the task. Sometimes you need to have the signature of the person on the form for legal aspects. Or maybe you need to print out the form down the road and you need to keep the format and have the signature burned on your form!

There are commercial vendors available to provide such a functionality. DocuSign and Adobe Sign are two players.

In this blog post I will show you a way to develop such a function in your intranet with open source tools and some code tweaks. We will use eSign canvas plugin:

https://github.com/szimek/signature_pad

Output

As you know, there are 3 main forms for OOB list items in SharePoint. New Form, Edit Form and View Form.

I will be showing the process of e-signature for New form and View form, you can do the Edit form as a home work!

New Item:

 

View Item

 

 

Implementation
LIST SCHEMA:
• Create a SharePoint list.
• Create a column with these settings:
Title: Signature
Type: Multiple lines of text
Type of text: Plain text
Number of lines for editing: 10+

 

·       Final demo list schema will look like this:

 

NEW ITEM FORM:

·       Add a content editor web part to the new item page.

·       Add below scripts to the content editor web part:

above scripts include JQuery and E-Signature plugins.

·       Default form will look like this.

·       Our first task is to hide the existing textarea for Signature column created above and create a signature pad at that place. Signature pad is HTML5 canvas which can easily be converted to plain text and image interpretation will be displayed to end users. We will use JQuery document ready function to do this:

·       Include below code to initialize signature pad logic in the document ready function:

·       Include below code to clear signature:

·       Final code should look like below:

·       Finally, we will convert users signature from canvas to plain text and store back in the textarea column which we made hidden in step 4 above. To get this task done, we will use PreSaveAction function in SharePoint. The code will look as below:

·       Try creating a new item and the result will be store as plain text in the Signature column as below:

VIEW ITEM FORM:

·       Add a content editor web part to the view item form

·       Add jQuery reference as below:

·       Now, the signature column will be rendered as plain text. Our task is to reverse engineer the text data and convert it to display as image to end users. Include script as below:

In this blog post I showed you a way to integrate esignture into your SharePoint lists. You can use the same technic in other SharePoint areas as well. what I have covered here is just for the format of the signature. as you see no security feature is attached to it.

 

About

View all posts by

Leave a Reply