Capturing a signature in a CRM form using html5


Scenario:

“I have a touchscreen.  I want to capture a signature in a Dynamics CRM form.  If the signature hasn’t been saved, then I want to allow a user to provide their signature.  The next time the record is loaded, after the signature has been saved, I want to load an imagine of the signature to prevent ‘resigning’.”

This is a relatively simple thing with Dynamics CRM thanks to web resources and Xrm.Page.  The general concept is to embed an html web resource in the form that captures the signature using the html5 canvas (preferably using an existing control vs. low level canvas programming).  Before saving, you want to copy the data from the canvas control into a Multiple Lines of Text type hidden field on the form so the data is stored when the record is saved.  Finally, when the web resource is loaded, you want to check if the field has data in it.  If so, you can assume a signature was previously recorded and just show the data as an image. 

Here’s the entire source code for a basic implementation:

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Signature</title> 5 <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script> 6 <script src="scripts/jSignature.min.js"></script><!-- download from http://willowsystems.github.io/jSignature/#/about/ --> 7 </head> 8 <body> 9 <img id="sigImage" alt="This is an image of the persons signature." style="display:none"/> 10 <div id="sigPanel" style="display:none"> 11 <div id="signature"></div> 12 <button id="clear">Clear</button> 13 </div> 14 <script type="text/javascript"> 15 $(function () { 16 var sigImage = $("#sigImage"); 17 var sigPanel = $("#sigPanel"); 18 var sig = $("#signature"); 19 20 var Xrm = window.parent.Xrm; 21 var sigBase64Attribute = Xrm.Page.getAttribute("msftpoc_esigbase64"); //replace this with your hidden "multiple lines of text" field with a max length of 1,048,576 22 var sigBase64Value = sigBase64Attribute.getValue(); 23 24 sig.bind("change", function (e) { 25 sigBase64Attribute.setValue(sig.jSignature("getData")); 26 }); 27 28 29 if (sigBase64Value != null) { 30 sigImage.css("display", "inline"); 31 sigImage.attr("src", sigBase64Value); 32 } else { 33 sigPanel.css("display", "inline"); 34 sig.jSignature(); 35 $("#clear").click(function() { 36 sig.jSignature("clear"); 37 }); 38 } 39 }); 40 </script> 41 </body> 42 </html> 43

All you have to do is add this web resource to your form (make sure you read instructions in the comments) and update the code to reference your field name.  A few things to note:

  • There are many controls out there, but I chose http://willowsystems.github.io/jSignature/#/about/.  It met all my requirements.  Feel free to use another.
  • The hidden field on the form for my entity is called msftpoc_esigbase64 and uses the Multiple Lines of Text type of Dynamics CRM.  Make sure to change the code to match your field name.
  • For simplicity, I chose to use the default data format of the jSignature control which is a base64 encoded string (hence my field name).  Since base64 encoded strings can be big, I set the max length field to 1,048,576 which is the largest Dynamics CRM allows.  The jSignature control supports other formats.  You could clearly improve on performance of this sample by using one of the smaller string formats.
  • My code doesn’t handle save/autosave side effects.  I simply copy the signature date to the hidden field using the change event of the jSignature control.   A more robust implementation would perhaps wire up to Xrm.Page.data.entity.addOnSave() and intelligently determine whether to copy the data into the field based on save state.  You might also want to consider switching to the image after as successful OnSave with signature if that makes the most sense for your requirements.  I’ll leave that up to you as an exercise for improvement.

Here are a couple screenshots for a quick visualization.

Before Save (signature capable canvas with clear button):

image

After Save (fixed image of signature):

image

@devkeydet

Comments (12)

  1. Dynamotion says:

    Hi,

    This is amazing! Something new in Dynamics CRM; never thought this could be achieved so easily.

  2. anderson says:

    Nice start guys…I went through the website and I found that you made decent point for Keep up the topic that everyone can choose one of the best. Thanks<a href="carbonc6.co.uk/">crm for small business</a>

  3. Anonymous says:

    Its good example hot html5. Thanks for sharing knowledge

  4. Anonymous says:

    Hello

    Has anybody had any success printing the captured signature through SSRS?

    Many thanks

    Paul

  5. Sriknth says:

    Please let us know whether it works well on mobile phone or not

  6. Akash says:

    Hi I'm newbie ,

    I copied Your Whole code pasted into i html form for testing purpose .Downloaded JS script and placed into header of page . but Still Page Is blank .

    i placed this

    var sigBase64Attribute = Xrm.Page.getAttribute("MyDivName");

    I dont know about javascript please help .

  7. Andy says:

    Thanks, works very well !! 🙂 I have written a similar script with smooth curves, please have a look http://www.supersignature.com

    Cheers!, Andy.

  8. Ben says:

    As far as printing, an SSRS report won't be able to handle this control.  You could however write your report in the form of an HTML web resource and then print through there.  A little different and more difficult, depending on your report, but still an option.

  9. Stelios says:

    Hi

    I tried to use your script in CRM online 2016 but I had some problems.

    Can you please, give some details for the steps I must follow?

    I tired to create this field in Contacts.

    Thank you very much

  10. Duco says:

    Thanks for the great way of implementing an signature field in CRM. It works great accept i have one problem:

    With the mouse cursor you can make a signature, but using the touchscreen it places only little dots in the field.

    The steps i followed:

    – imported the .js files with the formeditor

    – imported the flash file while renaming the file with .css while leaving the name itself .wsf (name field in the add form)

    – added the html5 code into an newly created html file.

    > replaced the "multiple lines of text" field into the name of the field i created

    > renamed the location of the javascript file without script…. because it's imported in the root.

    – added the field as described and made it hidden with an business rule (whether or not containing data > hide field)

    – added the html element into the same section as the hidden field.

    maybe somebody knows why the touch function in the signature field does not work as planned?

  11. Duco says:

    Actually the weird thing is that threw an RDP session the signature cán be set with touchscreen.

    Otherwise it only puts little dots in the field. Someone?

  12. Duco says:

    Furthermore i come to the conclusion that it works great in Google Chrome, but not in Internet Explorer 11 or Edge.