Signature Capture Component – Salesforce Lightning
OpFocus often encounters hurdles when completing projects and as Salesforce experts, we find solutions. We recently overcame an issue regarding the signature capture component of Salesforce Lightning. Learn how you can do the same!
The use case
On a recent project, we needed to have crew fill out work logs relating to what happened during the day which their supervisor could sign electronically. The stake stakeholders needed to be emailed a pdf of the signed work log which could be done in Salesforce Lightning.
The solution
HTML5 canvas came to mind to capture the signature. Instead of writing something from scratch, I decided to search for available javascript/jQuery libraries to capture signatures. I found one called jSignature that I really liked. There is a version by Brinley Ang that had further customizations that I decided to use.
Once I downloaded the library and created a static resource for it, I found some requirements specific to my implementation. Adding text below the signature line was one of these requirements which were not available in the Brinley version. To overcome this, I added in the specific logic required. I used a logic function to populate the line beneath the signature with a static field from SalesForce. In this case, verification of the signature.
I then created a lightning component that will allow a user to draw a signature and then save it as a Salesforce file. This file will be saved as an attribute that can then be referenced later. The component can display signatures that have already been captured by providing the Salesforce Filename or Content Document Id. The stored file can then be used in visual force pages that render as pdfs to create reports with signatures.
The Result
This is what the component looks like when it is ready to capture signatures
This is what it looks like with a signature line and text below the line.
As you can see, I have changed the background color of the signature pad, an attribute in the lightning component that allows you to do this. There are also attributes that turn on the signature line and set the text that is displayed below the line. Since I had a save button on the page where I used this component, I hid the save button. I have used css to move the clear button on to the canvas instead of below it.
The component has a number of attributes that will allow you to customize it to your needs. It also allows you to get the raw data from the signature capture if you would like to do something other than save it as a Salesforce file.
Download
The installation instructions, documentation, and code can be found on github.
Check out other useful Lightning components I have created such as an Email Author, or reach out to us directly for any of our custom Salesforce Development Services.
