Digital Signature(Docu Sign) added to the Object Records in Attachments

By | February 19, 2020

In this post we have implemented digital signature to the object. Digital signature will be save in jpeg format to attachments.

ApexClass:

public class ContractSignatureCtrl {
 Contract request;
    public Id formId {get;set;}
    public string fileData { get; set; }
    public ContractSignatureCtrl(ApexPages.StandardController st){
        this.request = (Contract) st.getRecord();
        formId = st.getId();
        
    }
    public void saveImage() {
        insert new Attachment(
            ContentType='image/jpeg',
            Body=EncodingUtil.base64Decode(fileData),
            Name='Signature',
            ParentId = formId
        );
    }
    public PageReference saveAndSuccess(){
        insert request;
        PageReference pageRef = new PageReference('/apex/ContractSignaturePage');
        pageRef.getParameters().put('Id', request.Id);
        pageRef.setRedirect(true);
        return pageRef;  
    }
    public PageReference Submit(){
        PageReference pageRef = new PageReference('/apex/ContractDetailPage');
        pageRef.getParameters().put('Id', request.Id);
        pageRef.setRedirect(true);
        return pageRef;  
    }
    public String getFileId() {
        String fileId = '';
        List<Attachment> attachedFiles = [select Id from Attachment where parentId =:formId order By LastModifiedDate DESC limit 1];
        if( attachedFiles != null && attachedFiles.size() > 0 ) {
            fileId = attachedFiles[0].Id;
        }
        return fileId;    
    }
}

VisualForcePage 1 : ContractPage

<apex:page standardController="Contract" extensions="ContractSignatureCtrl" sidebar="false" showHeader="false">   
    <apex:form >
        <apex:pageblock title="Contract">
            
            <apex:pageblockSection title="Contract Information" columns="2">
                <apex:inputField value="{!Contract.Accountid}"/>
                <apex:inputField value="{!Contract.Status}"/>
                <apex:inputField value="{!Contract.StartDate}"/>
                <apex:inputField value="{!Contract.CustomerSignedTitle}"/>
                <apex:inputField value="{!Contract.ContractTerm}"/>
                <apex:inputField value="{!Contract.CustomerSignedDate}"/>
                <apex:inputField value="{!Contract.OwnerExpirationNotice}"/>
                <apex:inputField value="{!Contract.CompanySignedDate}"/>
            </apex:pageblockSection>
            
            <apex:pageblockSection title="Address Information" columns="1">
                <apex:inputField value="{!Contract.BillingStreet}"/>
                <apex:inputField value="{!Contract.BillingCity}"/>
                <apex:inputField value="{!Contract.BillingPostalCode}"/>
                <apex:inputField value="{!Contract.BillingState}"/>
                <apex:inputField value="{!Contract.BillingCountry}"/>
            </apex:pageblockSection>
            
            <apex:pageblockSection title="Description Information" columns="1">
                <apex:inputField value="{!Contract.SpecialTerms}"/>
                <apex:inputField value="{!Contract.Description}"/>
            </apex:pageblockSection>
            
            <apex:pageBlockButtons >
                <apex:commandButton value="Next" action="{!saveAndSuccess}" />
            </apex:pageBlockButtons>
            
        </apex:pageblock>
    </apex:form>    
</apex:page>

Output 1:

VisualForcePage 2 :ContractSignaturePage

<apex:page standardController="Contract" extensions="ContractSignatureCtrl" sidebar="false" showHeader="false">
    <script>
    !function() {
        var canvas, lastX, lastY;
        function start(event) {
            lastX = event.offsetX;
            lastY = event.offsetY;
            document.body.addEventListener("mousemove", draw);
            document.body.addEventListener("mouseup", end);
        }
        function draw(event) {
            var context = canvas.getContext("2d");
            
            if(event.target === canvas) {
                context.fillStyle = "black";
                context.strokeStyle = "black";
                context.beginPath();
                context.moveTo(lastX, lastY);
                context.lineTo(event.offsetX, event.offsetY, 3);
                context.stroke();
                lastX = event.offsetX;
                lastY = event.offsetY;
            }
            event.preventDefault();
        }
        function end(event) {
            document.body.removeEventListener("mousemove", draw);
            document.body.removeEventListener("mouseup", end);
            canvas.removeEventListener("mouseenter", mouseenter);
            event.preventDefault();
        }
        function save(event) {
            event.preventDefault();
            saveImageToServer(canvas.toDataURL("image/jpeg").split(/;base64,/)[1]);
        } 
        function init() {
            var context;
            canvas = document.getElementById("signature");
            canvas.addEventListener("mousedown", start);
            context = canvas.getContext("2d");
            context.fillStyle = "white";
            context.fillRect(0, 0, canvas.width, canvas.height);
            document.getElementById("save").addEventListener("click", save);
        }
        function resetForm() {
            document.getElementById("signature");
            context.clear();
        }
        window.addEventListener('DOMContentLoaded', init);
    }()    
    </script>
    <style>
        #signature {
        border: 1px solid black;
        }
    </style>
    <apex:form >
        <apex:pageblock title="Contract Signature Page">
            
            <b>Signature :</b>
            <apex:actionFunction action="{!saveImage}" name="saveImageToServer" reRender="">
                <apex:param assignTo="{!fileData}" name="data" value="" />
            </apex:actionFunction>
            <canvas id="signature" width="350" height="100" /><br/><br/>
            <input type="button" id="save" style="height:20px;width:50px;" value="Save" />&nbsp; &nbsp;
            <apex:commandButton value="Submit" action="{!Submit}" /><br/>
            Note*:Before Submit Please Save the Data
            
        </apex:pageblock>
    </apex:form>  
</apex:page>

Output 2:

VisualForcePage 3 :ContractDetailPage

<apex:page standardController="Contract" extensions="ContractSignatureCtrl" sidebar="false" showHeader="false" >
    <apex:form>
        <apex:pageblock title="Contract">
            
            <apex:pageblockSection title="Contract Information" columns="2">
                <apex:outputField value="{!Contract.Accountid}"/>
                <apex:outputField value="{!Contract.Status}"/>
                <apex:outputField value="{!Contract.StartDate}"/>
                <apex:outputField value="{!Contract.CustomerSignedTitle}"/>
                <apex:outputField value="{!Contract.ContractTerm}"/>
                <apex:outputField value="{!Contract.CustomerSignedDate}"/>
                <apex:outputField value="{!Contract.OwnerExpirationNotice}"/>
                <apex:outputField value="{!Contract.CompanySignedDate}"/>
            </apex:pageblockSection>
            
            <apex:pageblockSection title="Address Information" columns="1">
                <apex:outputField value="{!Contract.BillingStreet}"/>
                <apex:outputField value="{!Contract.BillingCity}"/>
                <apex:outputField value="{!Contract.BillingPostalCode}"/>
                <apex:outputField value="{!Contract.BillingState}"/>
                <apex:outputField value="{!Contract.BillingCountry}"/>
            </apex:pageblockSection>
            
            <apex:pageblockSection title="Description Information" columns="1">
                <apex:outputField value="{!Contract.SpecialTerms}"/>
                <apex:outputField value="{!Contract.Description}"/>
            </apex:pageblockSection>
            <apex:pageblockSection title="Signature Information" columns="1">
                <apex:image url="/servlet/servlet.FileDownload?file={!fileId}"/>
            </apex:pageblockSection>
        </apex:pageblock>
    </apex:form>
</apex:page>

Output 3:

Share this...
Share on Facebook
Facebook
Email this to someone
email

Leave a Reply

Your email address will not be published. Required fields are marked *