Tuesday, 15 September 2015

Salesforce Visualforce Signature Tool

83
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

83 comments:

  1. Very nice its useful for everyone

    ReplyDelete
  2. Hi Nitin,
    Nice post, useful tool.

    ReplyDelete
    Replies
    1. The development of artificial intelligence (AI) has propelled more programming architects, information scientists, and different experts to investigate the plausibility of a vocation in machine learning. Notwithstanding, a few newcomers will in general spotlight a lot on hypothesis and insufficient on commonsense application. machine learning projects for final year In case you will succeed, you have to begin building machine learning projects in the near future.

      Projects assist you with improving your applied ML skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include projects into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Final Year Project Centers in Chennai even arrange a more significant compensation.


      Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account.

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. Cool Stuff ......... :)

    ReplyDelete
  5. Looks Innovative and Useful for E-Documents...

    ReplyDelete
  6. Thank you everyone...

    ReplyDelete
  7. 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

    ReplyDelete
  8. 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

    ReplyDelete
  9. 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

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

    ReplyDelete
  11. 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

    ReplyDelete
  12. 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

    ReplyDelete
  13. 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

    ReplyDelete
  14. 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

    ReplyDelete
  15. 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

    ReplyDelete
  16. 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

    ReplyDelete
  17. This comment has been removed by the author.

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

    ReplyDelete
  19. 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

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

    ReplyDelete
  21. 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

    ReplyDelete
  22. 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

    ReplyDelete
  23. 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.

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

    ReplyDelete
  25. 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 ?

    ReplyDelete
  26. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
    python course in pune
    python course in chennai
    python Training in Bangalore

    ReplyDelete
  27. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Best Devops training in sholinganallur
    Devops training in velachery
    Devops training in annanagar
    Devops training in tambaram

    ReplyDelete
  28. Thank you for this post. Thats all I are able to say. You most absolutely have built this blog website into something speciel. You clearly know what you are working on, youve insured so many corners.thanks
    Data Science Training in Chennai
    Data Science training in kalyan nagar
    Data science training in Bangalore
    Data Science training in marathahalli
    Data Science interview questions and answers
    Data science training in jaya nagar

    ReplyDelete
  29. Whoa! I’m enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this.
    aws training in bangalore
    RPA Training in bangalore
    Python Training in bangalore
    Selenium Training in bangalore
    Hadoop Training in bangalore

    ReplyDelete
  30. Thanks for sharing the article, Personally me enjoyed your article by reading. It was one of the informative article and people are searching article like this. I also found the link from one of my facebook group.
    thanks again

    Dental clinic in Chennai

    Ceramic braces cost in India

    Root canal treatment cost in Chennai

    How to avoid root canal naturally

    ReplyDelete
  31. Attend The Python training in bangalore From ExcelR. Practical Python training in bangalore Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Python training in bangalore.
    python training in bangalore

    ReplyDelete
  32. Very nice post here and thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.
    interior designers in chennai

    ReplyDelete
  33. After reading your article I was amazed. I know that you explain it very well. And I hope that other Python training in pune readers will also experience how I feel after reading your article.

    ReplyDelete
  34. You have made your points in a smart way. I am impressed with how interesting you have been able to present this content. Thanks for sharing a nice information. Do support us
    Interior Designers In Anna Nagar
    Interior Designers In Nungambakkam
    Interior Designers In Adyar
    Interior Designers In Velachery

    ReplyDelete
  35. Great Blog! This post gives a better idea to decorate. Thanks for the useful information. I hope you will share some more content. Please keep sharing!
    Interior Designers In Chennai
    Interior Decorators In Chennai
    Modular Kitchen Chennai
    Home Interior Designers In Chennai
    Office Interior Designers In Chennai

    ReplyDelete
  36. For Python training in Bangalore, Visit:- Python training in Bangalore

    ReplyDelete
  37. You are so cool! I don't think I've truly read through anything like that before. So wonderful to find someone with a few genuine thoughts on this topic. Seriously.. thank you for starting this up. This site is one thing that is required on the internet, someone with a little originality!
    KBC Game Show

    ReplyDelete
  38. I really happy found this website eventually. This site article is very good. This is a great post.
    office.com/setup
    www.office.com/setup
    office setup
    norton.com/setup

    ReplyDelete
  39. Really very happy to say, your post is very interesting to read. I never stop myself to say something about it. You’re doing a great job. Keep it up…

    Advance your career in Cloud Computing by doing AWS Certification Course from 3RI Technologies, Pune.

    ReplyDelete
  40. I must appreciate you for providing such a valuable content for us. This is one amazing piece of article. Helped a lot in increasing my knowledge.

    oracle training in bangalore

    sql server dba training in bangalore

    web designing training in bangalore

    digital marketing training in bangalore

    java training in bangalore

    ReplyDelete
  41. Trend Micro Internet Security subscription is the single way to download the software on multiple devices through www.trendmicro.com/downloadme . Trend micro has become a superior antivirus program over many antiviruses due to its advanced protection features. trend micro download process becomes easy when you purchase the subscription. But when the subscription expires, the user needs to renew it; otherwise, it won’t protect your device anymore. In this blog, we will discuss how you can renew your Trend Micro Internet Security subscription.


    ReplyDelete
  42. Webroot SecureAnywhere Antivirus scans your system quickly and protects you from viruses, rootkits, keyloggers and other harmful programs.
    www.webroot.com/secure | webroot.com/secure | Install Webroot With Key Code

    ReplyDelete

  43. Our Technical experts team give you the best solution to your problems. You can follow the link and you are one step away from solving your problem.Office Setup with product key and follow the instructions for office setup.
    office.com/setup

    ReplyDelete
  44. If you are using internet or not on your device there always will be a need for strong antivirus to be installed to protect it against mischievous youths looking for a thrill or a hardened cyber-criminal wanting to take advantage of billion-dollar firms, can stop wanting to search out ways in which to commit fraud, cause widespread harm, or simply leak or use your personal data.
    For more information visit site :- norton.com/setup | norton.com/setup | norton.com/setup | norton.com/setup

    ReplyDelete
  45. Thanks for such a great article here. I was searching for something like this for quite a long time and at last I’ve found it on your blog. It was definitely interesting for me to read  about their market situation nowadays.
    interior decorators in chennai
    Modular kitchen in chennai

    ReplyDelete
  46. Great content thanks for sharing this informative blog which provided me technical information keep posting.
    Best Interior Designers
    home interiors in chennai
    Commercial interior designers in chennai

    ReplyDelete
  47. This is a nice article here with some useful tips for those who are not used-to comment that frequently. Thanks for this helpful information I agree with all points you have given to us. I will follow all of them.
    Office interior designers in chennai
    living room interior designers in chennai
    False ceiling interiors designers in chennai

    ReplyDelete
  48. Howdy! I simply want to give you a big thumbs up for your great info you have here on this post. I'll be returning to your blog for more soon. Click Here for more

    ReplyDelete
  49. eset internet security can be installed quickly on each device if the user follows the correct procedure. You can follow the instructions below to install the setup on your devices such as Windows PC, Mac, or mobile device. www.eset.com/ca/download Best IT security solutions for your home and business devices. Try ESET antivirus and internet security solutions for Windows, Android, Mac or Linux OS.www.eset.com/us/activate

    ReplyDelete
  50. canon printer setup into your pc, your system does not need to install the driver on it. Canon printer that can be downloaded via page is the best wireless printer that you can connect to your device and print data smoothly. canon.com/ijsetup
    CD is not the well-suited technique to use canon.comijsetup setup installation for longer.

    ReplyDelete
  51. This article contains some of the most informative content I've read in quite some time. The points of this content are clear-cut and engaging. I think much like this writer.
    Best Data Science training in Mumbai

    Data Science training in Mumbai

    ReplyDelete
  52. If I had to give a great example of top quality content, this article would be it. It's a well-written commentary that holds your interest.SAP training in Kolkata
    SAP training Kolkata
    Best SAP training in Kolkata
    SAP course in Kolkata
    SAP training institute Kolkata

    ReplyDelete
  53. So far, I agree with you on much of the info you have written here. I will have to think some on it, but overall this is a wonderful article.
    SAP training in Kolkata
    SAP training Kolkata
    Best SAP training in Kolkata
    SAP course in Kolkata

    ReplyDelete
  54. I have to agree with the valid points you make in your article because I see things like you. Additionally, your content is interesting and really good reading material. Thank you for sharing your talent.
    Data Science training in Mumbai
    Data Science course in Mumbai
    SAP training in Mumbai

    ReplyDelete

  55. My travel life have been easier with Garmin Express. Plus I can get all the additional knowledge through their blogs. I use the Garmin app and is totally upto the mark. I recommend everyone to use Garmin Gps Update and get Garmin life time map update or call +1-888-309-0939 for instant help from Garmin GPS experts.

    ReplyDelete
  56. I did not know the entire benefits of Garmin Nuvi Update. But since I have read this blog on map update, I have installed all available updates for my garmin device. I must say that this piece of blog has helped me improve navigation experience. I am not suggesting all my friends to read this blog and get Garmin Map Update with this team. For detailed information, you can contact us at toll-free number +1 888-309-0939. Our Garmin GPS professionals will provide instant help.

    ReplyDelete
  57.  Being a travel blogger and lover, it was appealing and helpful for me. It is a strong article to portray this topic limits the readers to widen their horizon of accepted wisdom and power as they go through the article.
    SAP training in Kolkata
    SAP training Kolkata
    Best SAP training in Kolkata
    SAP course in Kolkata

    ReplyDelete
  58. The content that I normally go through in the recent times is nothing like what you have on paper. Thank you for writing this!
    Data Science training in Mumbai
    Data Science course in Mumbai
    SAP training in Mumbai

    ReplyDelete