Salesforce Visualforce Signature Tool

05:05 30 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

30 comments

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

Very nice its useful for everyone

Reply
avatar
Anonymous
AUTHOR
15 September 2015 at 21:39 delete

Hi Nitin,
Nice post, useful tool.

Reply
avatar
Anonymous
AUTHOR
16 September 2015 at 22:32 delete This comment has been removed by a blog administrator.
avatar
Anonymous
AUTHOR
16 September 2015 at 22:34 delete

Cool Stuff ......... :)

Reply
avatar
Anonymous
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
Sonal priya
AUTHOR
5 September 2017 at 22:42 delete

Excellent goods from you, man. I’ve understand your stuff previous to and you’re just too excellent. I actually like what you’ve acquired here, certainly like what you are stating and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I can not wait to read far more from you. This is actually a tremendous site..
Tooth Braces In Chennai
Best Dental Clinic In Vellore

Reply
avatar
bava mahe
AUTHOR
22 September 2017 at 03:58 delete

Excellent goods from you, man. I’ve understand your stuff previous to and you’re just too excellent. I actually like what you’ve acquired here, certainly like what you are stating and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I can not wait to read far more from you. This is actually a tremendous site..
cloud computing training in chennai

Reply
avatar
lakshmi deepa
AUTHOR
29 September 2017 at 04:52 delete

It’s the best time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I want to suggest you few interesting things or suggestions.You can write next articles referring to this article. I desire to read even more things about it..
SAP HR Training in Chennai
SAP ABAP Training in Chennai
SAP FICO Training in Chennai

Reply
avatar
malar deepa
AUTHOR
7 November 2017 at 05:00 delete

Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way.Thank you so much
Wooden Temple for Home
Tanjore Painting
Pooja Mandir

Reply
avatar
Gopi Vj
AUTHOR
7 February 2018 at 03:49 delete

i have really enjoyed sharing your website. thank you so much for your sharing this document. this document more useful and improve our knowledge.
salesforce training in chennai

Reply
avatar
akhila priya
AUTHOR
19 April 2018 at 04:24 delete

This concept is a good way to enhance the knowledge.thanks for sharing. please keep it up salesforce Online Course Bangalore

Reply
avatar
tong vo
AUTHOR
25 April 2018 at 08:20 delete

I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again..
abcya | brainpop| hooda games

Reply
avatar
akhila priya
AUTHOR
14 May 2018 at 03:33 delete

The information which you have provided is very good. It is very useful who is looking for salesforce Online Training Hyderabad

Reply
avatar
16 June 2018 at 03:53 delete

Thank you very much for this article. I think that i can consider this article as a reference for me because it contains many important information at once and shortcut too much time, instead of reading more articles.
Paper Publishing Sites
Naas Rated Journals
Language Translation Services
Research Paper Writing Service
Article Writing Services

Reply
avatar
18 June 2018 at 04:46 delete

I am not sure the place you are getting your information, however good topic. I needs to spend some time studying more or understanding more. Thank you for wonderful information I was in search of this info for my mission.
Economics Journal
Journal Of Ecology
Thesis by publication
National Journal
Journal Of Information Technology

Reply
avatar
15 July 2018 at 00:12 delete

samsung galaxy cases
It's fascinating that a significant number of the bloggers to cleared up a couple of things for me and in addition giving.Most of thoughts can be decent content.The individuals to give them a decent shake to get your point and over the charge.

Reply
avatar
15 July 2018 at 12:32 delete

Accountants Hove
when you post the new artical iam excited to read more artical on this site

Reply
avatar
Unknown
AUTHOR
7 September 2018 at 04:14 delete

SignatureDemo:55 Uncaught TypeError: $(...).sketch is not a function
at HTMLDocument. (SignatureDemo:55)
at j (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.I (jquery.min.js:2)

Any suggestions ?

Reply
avatar