Salesforce Visualforce Signature Tool

05:05 13 Comments A+ a-

Hi All,
This is a simple demo which will guide you to create a form with "Signature Canvas" to take initials from user and stores that in document and also displays it in a PDF file. It can be used for initials in an Agreement, Terms and Condition, Authorized Person and various other places.
For this task I would be using a jQuery plug-in 'Sketch.js' which is available on, http://intridea.github.io/sketch.js/lib/sketch.js

Here is a demo page with Terms and conditions having two canvas for big and initial signatures.
Demo URL : http://nchandwani-developer-edition.ap2.force.com/SignatureDemo



A Pdf file created after submitting the form with the initials presented at the desired place.


For this example, I have created two Vf Pages, "SignatureDemo" and "SignatureDemoPdf". Controller used is "SignatureDemoController".

SignatureDemoController
public class SignatureDemoController{ public String initial1{get;set;} public String initial2{get;set;} public SignatureDemoController(){ String temp = ApexPages.currentPage().getParameters().get('dId'); if( temp != null){ list<String> docIds = temp.split(','); initial1 = docIds[0]; initial2 = docIds[1]; } } public PageReference submit(){ Folder f1 = [SELECT Id FROM Folder WHERE Name='Signatures' LIMIT 1]; List<string> signList = new List<string>(); signList=initial1.split(','); Document d1 = new Document(Name = 'Initial1', FolderId = f1.Id); if(signList.size()>1){ d1.body=EncodingUtil.base64Decode(signList[1]); } else if(signList.size() >0){ d1.body=EncodingUtil.base64Decode(signList[0]); } Upsert d1; signList=initial2.split(','); Document d2 = new Document(Name = 'Initial2', FolderId = f1.Id , contentType = 'image/jpeg'); if(signList.size()>1){ d2.body=EncodingUtil.base64Decode(signList[1]); } else if(signList.size() >0){ d2.body=EncodingUtil.base64Decode(signList[0]); } Upsert d2; return (new PageReference('/SignatureDemoPdf?dId=' + d1.Id + ',' + d2.Id )).setRedirect(true); } }

SignatureDemo
<apex:page tabStyle="Contact" controller="SignatureDemoController" showHeader="false" sidebar="false"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="{!$Resource.sketch}" /> <apex:pageBlock title="Sample Aggrement" > <apex:form id="frm"> <apex:actionFunction name="callingSubmit" action="{!submit}" reRender="frm"> </apex:actionFunction> <apex:pageBlockSection columns="1" title="Terms & Conditions" collapsible="false"> <apex:outputText > Welcome to our website. If you continue to browse and use this website, you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern [business name]'s relationship with you in relation to this website. If you disagree with any part of these terms and conditions, please do not use our website. <br /> The term '[business name]' or 'us' or 'we' refers to the owner of the website whose registered office is [address]. Our company registration number is [company registration number and place of registration]. The term 'you' refers to the user or viewer of our website. <br /> <span id="smallInitials">%SmallInitails%</span> <br/> The use of this website is subject to the following terms of use: <br /> The content of the pages of this website is for your general information and use only. It is subject to change without notice. This website uses cookies to monitor browsing preferences. If you do allow cookies to be used, the following personal information may be stored by us for use by third parties: [insert list of information]. Neither we nor any third parties provide any warranty or guarantee as to the accuracy, timeliness, performance, completeness or suitability of the information and materials found or offered on this website for any particular purpose. You acknowledge that such information and materials may contain inaccuracies or errors and we expressly exclude liability for any such inaccuracies or errors to the fullest extent permitted by law. Your use of any information or materials on this website is entirely at your own risk, for which we shall not be liable. It shall be your own responsibility to ensure that any products, services or information available through this website meet your specific requirements. This website contains material which is owned by or licensed to us. This material includes, but is not limited to, the design, layout, look, appearance and graphics. Reproduction is prohibited other than in accordance with the copyright notice, which forms part of these terms and conditions. All trade marks reproduced in this website which are not the property of, or licensed to, the operator are acknowledged on the website. Unauthorised use of this website may give rise to a claim for damages and/or be a criminal offence.<br/> From time to time this website may also include links to other websites. These links are provided for your convenience to provide further information. They do not signify that we endorse the website(s). We have no responsibility for the content of the linked website(s). Your use of this website and any dispute arising out of such use of the website is subject to the laws of England, Northern Ireland, Scotland and Wales. <br/><br/> <span style="float:right"> <span id="initialBig">%biginitials%</span> <br /> <span id="conName">Customer Initials</span> </span> </apex:outputText> </apex:pageBlockSection> <apex:pageBlockSection columns="2" title="Initials" collapsible="false"> <apex:outputPanel > <div> <Span><b>Big Initials </b></span> <button style="margin-left:28px;height:30px;width:100px" onclick="applyImage( 'intial1', 'initialBig', 80 );return false;">Apply</button> <button style="margin-left:10px;height:30px;width:100px" onclick="clearSketch( 'intial1' );return false;">Clear</button> <br/> <canvas id="intial1" style="border:2px solid; border-radius:0px 0px 10px 10px;background:white; border-color:lightgray"></canvas> </div> </apex:outputPanel> <apex:outputPanel > <div> <Span><b>Small Initials </b></span> <button style="margin-left:15px;height:30px;width:100px" onclick="applyImage( 'intial2', 'smallInitials', 40 );return false;">Apply</button> <button style="margin-left:10px;height:30px;width:100px" onclick="clearSketch('intial2');return false;">Clear</button> <br/> <canvas id="intial2" style="border:2px solid; border-radius:0px 0px 10px 10px;background:white; border-color:lightgray"></canvas> </div> </apex:outputPanel> </apex:pageBlockSection> <input type="button" value="Submit" style="float:right;margin-right:10%" onclick="submitAggrement()"/> <br/><br/> <apex:inputHidden id="sign" value="{!initial1}"/> <apex:inputHidden id="sign2" value="{!initial2}"/> </apex:form> </apex:pageBlock> <script type="text/javascript"> $(document).ready(function(){ $('#intial1').sketch(); $('#intial2').sketch(); }); function clearSketch( cvId ){ $('#' + cvId).replaceWith('<canvas id="' + cvId + '" style="border:2px solid; border-radius:10px;background:white; border-color:lightgray"></canvas>'); $('#' + cvId).sketch(); } function applyImage( cvId, compId, sz ){ var image = new Image(); image.id = "pic" image.src = document.getElementById(cvId).toDataURL(); console.log( document.getElementById(cvId).toDataURL() ); image.height = sz; $('#' + compId ).html(image); } function submitAggrement(){ $('[id$="sign"]').val(document.getElementById('intial1').toDataURL()); $('[id$="sign2"]').val(document.getElementById('intial2').toDataURL()); callingSubmit(); return false; } </script> </apex:page>

SignatureDemoPdf
<apex:page renderAs="Pdf" controller="SignatureDemoController" showHeader="false" sidebar="false"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <apex:pageBlock title="Sample Aggrement" > <apex:form > <apex:pageBlockSection columns="1" title="Terms & Conditions" collapsible="false"> <apex:outputText > Welcome to our website. If you continue to browse and use this website, you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern [business name]'s relationship with you in relation to this website. If you disagree with any part of these terms and conditions, please do not use our website. <br /> The term '[business name]' or 'us' or 'we' refers to the owner of the website whose registered office is [address]. Our company registration number is [company registration number and place of registration]. The term 'you' refers to the user or viewer of our website. <br /> <span id="smallInitials"><img src="/servlet/servlet.FileDownload?file={!initial2}" height="40px"/></span> <br/> The use of this website is subject to the following terms of use: <br /> The content of the pages of this website is for your general information and use only. It is subject to change without notice. This website uses cookies to monitor browsing preferences. If you do allow cookies to be used, the following personal information may be stored by us for use by third parties: [insert list of information]. Neither we nor any third parties provide any warranty or guarantee as to the accuracy, timeliness, performance, completeness or suitability of the information and materials found or offered on this website for any particular purpose. You acknowledge that such information and materials may contain inaccuracies or errors and we expressly exclude liability for any such inaccuracies or errors to the fullest extent permitted by law. Your use of any information or materials on this website is entirely at your own risk, for which we shall not be liable. It shall be your own responsibility to ensure that any products, services or information available through this website meet your specific requirements. This website contains material which is owned by or licensed to us. This material includes, but is not limited to, the design, layout, look, appearance and graphics. Reproduction is prohibited other than in accordance with the copyright notice, which forms part of these terms and conditions. All trade marks reproduced in this website which are not the property of, or licensed to, the operator are acknowledged on the website. Unauthorised use of this website may give rise to a claim for damages and/or be a criminal offence.<br/> From time to time this website may also include links to other websites. These links are provided for your convenience to provide further information. They do not signify that we endorse the website(s). We have no responsibility for the content of the linked website(s). Your use of this website and any dispute arising out of such use of the website is subject to the laws of England, Northern Ireland, Scotland and Wales. <br/><br/> <span style="float:right"> <span id="initialBig"><span id="smallInitials"><img src="/servlet/servlet.FileDownload?file={!initial1}" /></span> </span> <br /> <span id="conName">Customer Initials</span> </span> </apex:outputText> </apex:pageBlockSection> </apex:form> </apex:pageBlock> </apex:page>
Give this code a try and let me know if you face issues in set it up.
Provide your valuable feedback.

Thanks
Nitin Chandwani

Technologist with following technologies:

  1. Salesforce
  2. Lightning
  3. Java
  4. PHP

13 comments

Write comments
Unknown
AUTHOR
15 September 2015 at 05:37 delete

Very nice its useful for everyone

Reply
avatar
Ranu Agarwal
AUTHOR
15 September 2015 at 21:39 delete

Hi Nitin,
Nice post, useful tool.

Reply
avatar
16 September 2015 at 22:32 delete This comment has been removed by the author.
avatar
Sagar Soni
AUTHOR
16 September 2015 at 22:55 delete

Looks Innovative and Useful for E-Documents...

Reply
avatar
Mahalya sree
AUTHOR
3 May 2017 at 03:05 delete

I do believe all of the concepts you’ve introduced in your post. They’re very convincing and will definitely work. Nonetheless, the posts are too short for novices. May you please extend them a bit from subsequent time? Thank you for the post.
Office Interiors in Chennai

Reply
avatar
Sophia sage
AUTHOR
18 May 2017 at 05:00 delete

There are many interesting information included and i can easily understand all given information.I post something on my blog to post something, or wait to post something worth saying. Keep update more information....
Pest Control in Chennai
Security Services in Chennai

Reply
avatar
Aashi siva
AUTHOR
10 July 2017 at 23:57 delete

There are many interesting information included and i can easily understand all given information.I post something on my blog to post something, or wait to post something worth saying. Keep update more information....
Android Training in Chennai
CCNA Training in Chennai
Oracle Apps Training in Chennai

Reply
avatar
sandhosh
AUTHOR
13 July 2017 at 02:31 delete

Really Good blog post.provided a helpful information.keep updating...
Digital marketing company in Chennai

Reply
avatar
Anusuya
AUTHOR
9 August 2017 at 06:35 delete

Really, these quotes are the holistic approach towards mindfulness. In fact, all of your posts are. Proudly saying I’m getting fruitfulness out of it what you write and share. Thank you so much to both of you.
Office Interior Designers in Coimbatore
Office Interior Designers in Bangalore
Office Interior Designers in Hyderabad

Reply
avatar