How to capture e-signature using Salesforce1

Capturing e-signatures using Salesforce1 mobile app is one of the most common mobile use cases that we come across. There are many app exchange products that provide this functionality but usually they are a part of a full blown functionality and do come with a price tag. What if you just want a simple quick action in Salesforce1 to capture e-signature and don’t need a full blown paid app. A quick search on the web will yield many code snippets that go in to excruciating details of using HTML canvas and 2d drawings to get the job done. You will also stumble upon a free lightning component available in the app exchange but this component cannot be used in a record level quick action yet (as of Winter ’16).

So, I set out to find a simple way to implement this and stumbled upon this excellent javascript library called ‘Signature Pad’ here. Szymon Nowak, the author of this library has done a phenomenal job of abstracting the complexities of e-signatures and has provided a simple API to implement this functionality. In this blog, I will walk you through how you can use this library to enable e-signatures in your Salesforce1 app.

TL;DR

So, you only need a managed package and don’t care much for understanding how this works. No worries, go ahead and download the un-managed package here. Out of the box, this unmanaged package provides you a Visualforce page (ZVFSignaturePad) to use in a custom quick action on ‘Opportunity’ object. See note below to understand how you can use this for other objects. This package has the following components

  1. A Visualforce page (ZVFSignaturePad) that can be used in a record level custom quick action
  2. An Apex controller class (ZVFSignaturePadController) to upload the signature as attachment to the record
  3. A static resource (sPad) that contains the ‘Signature Pad’ javascript library
  4. A static resource (slds120) that contains the Lightning Design System CSS, version 12.0
  5. A simple test class (ZVFSignaturePadControllerTest) for code coverage purposes. This is one area where you don’t want to cut corners, so please make sure that you write test classes to suit your requirement, use this only for directional purposes.

Note: If you want to use this in a different object, say for e.g., a custom object for work orders (Work_Order__c), all you need to do is change one line of code in the Visualforce page. Open the VF page ZVFSignaturePad (or a copy of it) and change the ‘standardController=”Opportunity”‘ to ‘standardController=”Work_Order__c”‘ in the first line of the code

Longer Version

Now, for those of us who are curious to know how things work, let’s see how you can build this in your landscape from scratch.

Step 1:

Download the latest version of the ‘Signature Pad’ JS library and upload it as a static resource in your Salesforce org (Setup->Build->Develop->Static Resources). Let’s name it ‘sPad’

Step 2:

Download the latest version of the Lightning Design System CSS and upload it as a static resource in your Salesforce org (Setup->Build->Develop->Static Resources). Let’s name it ‘slds120’

Step 3:

Create a new Apex class. Let’s call it ‘ZVFSignaturePadController’. This is a simple Apex class that exposes a ‘Remote Action’ method (uploadSignature) for uploading the e-Signature as an attachment to the record. The remote action method takes the Base64 encoded signature image and the record ID as input. Then it uses the Blob class to convert the Base64 encoded image to a Blob data type and then creates an attachment with the record ID as parent. Note that the code below hard codes the file name to ‘eSignature_dtd_’ + date and time stamp. If you want a different name for the attachment, change the code in line 16 to suit your needs. Also, note that the remote action passes the result as a JSON string which is a nifty way of passing results to a Javascript remoting calls.

Note: A sample test class is provided in the unmanaged package referred above.

Step 4:

Create a new Visualforce page. Let’s call it ‘ZVFSignaturePad’. The code provided below, out of the box, will let you use this VF page in a quick action on opportunity object. If you want to use it in another object (say Account), make sure to change the standard controller in the first line of code from ‘Opportunity’ to ‘Account’. Among other things, the code below uses a canvas element and ‘onLoad’ of the page, sets up the Signature Pad object on the canvas. As you can see, the API is very elegant and abstracts all the complexities. You will also see that I am using the publisher.js to enable the ‘Save’ button in the quick action and also automatically close the quick action once the signature has been successfully uploaded.

Step 5:

Create a quick action of type Visualforce page and use the ‘ZVFSignaturePad’ VF page created above

Step 6

Place this Quick action in the opportunity page layout(s) under the ‘Salesforce1 and Lightning Experience Actions’

Now you are all set to capture e-signature in the Salesforce1 app

Ultimately my recommendation would be wrap this up as a Lightning component once the capability for using lightning components at record level becomes ‘GA’ (currently this feature is in pilot in developer orgs). Until then, feel free to use this in your orgs and yes, if you have questions, leave a comment below.

Now, the fine print.. At the time of writing this blog, I am employed with Salesforce as an Architect. However, any code samples and declarative approach provided here are purely for experimental purposes and comes with no warranty or support. Matter of fact, all opinions and approach provided in this blog are purely my own and has nothing to do with my employer. It is assumed that you have the right Salesforce configuration and coding skills and will use the ideas presented here as you see fit, in your landscape. The primary purpose of this article is just to share the knowledge and my own experience. Nothing more, nothing less. Use this approach at your own risk


Originally published at kksfblog.wordpress.com on January 14, 2016.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.