e-Signature App Using Lightning

Posted on Updated on

Hi All,
In my previous post I have shown you how we can convert currency of any country using lightning.
Today I will tell you how we can use HTML5 canvas to draw your signature and how we can attach this signature with your information in Salesforce lightning.

When complete it will look like this :


When you click on submit it will show you detail with your signature like this :


Changes :
1) Change “bklightning” namespace to “YourNamespace”.
2) Need to update browser as I am using HTML5, this App will work with Latest Version Browser.

If you need complete code you can drop me an email on this email id : balkishan.kachawa@gmail.com

Let’s walk through code:

public with sharing class ContactSignatureController{
    public static void saveContact(ContactDetail__c con,String url) {
        String imgUrl = url.subStringAfter('base64,');
        insert con;
        Attachment attach = new Attachment();
        attach.contentType = 'image/png';
        attach.name = con.Firstname__c+' '+con.Lastname__c;
        attach.parentId = con.Id;
        attach.body = EncodingUtil.base64Decode(imgUrl);
        insert attach;
    public static Attachment getAttachment(){
        return [Select Id,Name from Attachment order by CreatedDate DESC LIMIT 1];

First off all you will notice that each method has an @AuraEnabled keyword.
Any method that you want to be visible to the Aura view components will need this keyword.

In ContactSignatureController.apxc controller saveContact() method is doing all work.
When you click on “Submit” button this method will be called.As you can see this method accepts two parameters:
First parameter is an object of ContactDetail which will have Contact Information.
Second parameter is an Encoded URL of image which we had drawn on canvas.We are using EncodingUtil.base64Decode() method to Decode URL.

<aura:component controller="bklightning.ContactSignatureController" implements="force:appHostable">
    <aura:attribute name="att" type="Attachment"/>
    <aura:attribute name="newContact" type="bklightning.ContactDetail__c"
                                        default="{ 'sobjectType': 'bklightning__ContactDetail__c'}"/>
    	<div class="form-group">
        	<label for="fname">First Name*</label>
          	<input type="text" class="form-control" id="fname" value="{!v.newContact.bklightning__Firstname__c}" autofocus="autofocus" onblur="{!c.doInit}" placeholder="First Name"/>
      	<div class="form-group">
        	<label for="lname">Last Name*</label>
          	<input type="text" class="form-control" id="lname" value="{!v.newContact.bklightning__Lastname__c}" placeholder="Last Name"/>
      	<div class="form-group">
        	<label for="phone">Phone*</label>
          	<input type="phone" class="form-control" id="phone" value="{!v.newContact.bklightning__Phone__c}" placeholder="Phone Number"/>
            <div id="pmsg" style="color:red"></div>
      	<div class="form-group">
        	<label for="signature">Your Signature*</label><br/>
          	<canvas id="signature" width="200" height="100" style="border:2px solid black"></canvas>
        <div id="msg" style="color:red"></div>
      	<button type="button" class="btn btn-default" onclick="{!c.createContact}">Submit</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-default" onclick="{!c.clearCanvas}">Clear Canvas</button>
    <div class="showDetail" style="display:none;">
        <b>Name &nbsp;&nbsp; : &nbsp;&nbsp;{!v.att.Name}</b><br/>
        <img src="{!'/servlet/servlet.FileDownload?file='+v.att.Id}"/>

In ESignatureComponent.cmp I am using HTML5 Canvas tag to draw signature.

When you click on “Submit” button it will call createContact() of ESignatureComponentController.js it then call saveContact() method of Apex Controller which will save Information and Signature.

So that’s it.

3 thoughts on “e-Signature App Using Lightning

    Venkatesh Mohan said:
    May 16, 2016 at 9:33 pm

    This is very useful Balki . It would be create if you share the full code to my email id..Thanks..


    shaik rizwan ahmed said:
    December 29, 2016 at 3:34 pm

    it is very use full.it would be great if u share the code to my email


    Shyam said:
    September 11, 2018 at 5:06 pm

    It is very useful component. It would be great if you share the code.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s