e-Signature App Using Lightning

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:

ContactSignatureController.apxc

public with sharing class ContactSignatureController{
    
    @AuraEnabled
    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;
        
    }
    
    @AuraEnabled
    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.

ESignatureComponent.cmp

<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'}"/>
	
    <form>
    	<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>
      	<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>
      	<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>
      	<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>
        <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>
    </form>    
    <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}"/>
    </div>
    
</aura:component>

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.