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, 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
- A Visualforce page (ZVFSignaturePad) that can be used in a record level custom quick action
- An Apex controller class (ZVFSignaturePadController) to upload the signature as attachment to the record
- A static resource (slds120) that contains the Lightning Design System CSS, version 12.0
- 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
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.
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’
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’
Note: A sample test class is provided in the unmanaged package referred above.
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.
Create a quick action of type Visualforce page and use the ‘ZVFSignaturePad’ VF page created above
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.