Use EspoCRM to create, render and print documents with electronic signatures

[telecastg]

This plugin allows EspoCRM to be used to generate documents based on any entity with eSignature that are rendered in Espo's main screen so they can be accessed by Portal users to sign and then document can be printed to PDF using the browser's engine or to hard copy.

In our application we are using it to create a Work Order document that the customer signs after completion. (see the attached screen shot)

This plugin is an enhancement and extension on my original eSignature scripts kindly packaged by @theBuzzyCoder and can be dowloades for free here: https://github.com/telecastg/esignat...rm/tree/master

Instructions for it's use are in the README

If you like it please correspond by posting solutions not only to others questions but to your own development questions when you find them, instead of leaving them unanswered. This will make the forum a lot more useful and will help spread the use of this fantastic platform.

Saludos

[esforim]

Cool, another extension. Too bad I can't install it at the moment, hopefully next version fixed it.

Does this field allow user to sign using mouseclick + drag / tablet touch? Is there a clear button if they make a mistake?

[telecastg]

Cool, another extension. Too bad I can't install it at the moment, hopefully next version fixed it.

Does this field allow user to sign using mouseclick + drag / tablet touch? Is there a clear button if they make a mistake?

Not sure why it wouldn't install, plug-in packaging and server configuration are not my forte I'm afraid, another option is to duplicate the folders and scripts in your server. We are running it without a problem.

The field uses mouse click + drag, haven't tested it with a tablet touch.

Yes it is possible to clear if the user makes a mistake, check these images showing the field before signing, after signing but before saving and after signing.

[esforim]

Not sure why it wouldn't install

It got nothing to do with your extension, it just my server configuration. I managed to "fix" it today and will be using all your extension from now on. Please look forward to future discussion from me!

[esforim]

Finally have a use for e-signature as I formulate my plan to create yet (another) new entity, might regret making so many entity in the future but this is the only way to separate record.

It look very good! But wow, once it is "update" it is permanent! I sometime duplicate the Record and the E-signature is locked in too, is it possible for one of these two(3?) options?

(1) Duplicate will reset the e-signature.
(2) Allow it to be editable and not Lock upon update.
(2a) Data stream/Audit the change in signature.

As I will be using this e-signature in a form and quite a few Record can be duplicate and would be good if I don't need to fill out the form from the start.

Secondly please refer to the screenshot, is it just my browser, server or the extensions? Got this gray block that is "missing image?" Top left corner after I Update the record.



---
Edit: I dug through the forum and found this post: https://forum.espocrm.com/forum/feat...1478#post51478

I guess that answer one of the question about "read" only field.

[telecastg]

I am not sure why the "missing picture" icon shows up. Probably has something to do with the way the SVG image is stored in the database and retrieved by the jsignature library that I used, it is not your browser. Would have to troubleshoot the library and I don't have time to do that at the moment.

If you are planning to store your signature permanently I suggest that you use an image field instead of esignature. That's how we do it for contracts, we have our signature saved as image and then the client signature is esignature.

[telecastg]

Found the culprit for the annoying "missing picture" !, it is the "Sign Here" plug in image.

Easy fix, just click on the image before signing and it will disappear, then after the signature is entered and saved there will be no more "missing picture" grey icons. If I can't fix it I will probably remove it later and upload an update, but it won't be for a while, too busy at the moment :-)

I also wanted to mention that the esignature is meant to be permanent (not editable) for security legal reasons, in the United States at least, one of the requirements of esignatures is that they can't be altered.

[esforim]

I understand, I was just testing the system and wanted to do multiple edit rather than create too many dummy date.

[yuri]

JFYI, In 5.8.0 it will be possible to create custom helpers for PDF templates: https://github.com/espocrm/documenta...stom-helper.md

[esforim]

Hi telecastg , I'm starting to use the eSignature on mobile now, hopefully it will be acceptable with the trial run.

One concerning issue that I'm sure people will complain to me when I ask them to sign it is: (1) size of the box. Is there a way for me to increase the size? Height and/or Width. Right now I cheat by changing my phone to landscape mode which give that addition space. (2) This is more of a feature request: is it possible to add a "full screen" button or "expand" button?

Thank you.

Found the culprit for the annoying "missing picture" !, it is the "Sign Here" plug in image.

I believe this is due to your image being a .SVG filetype. Currently EspoCRM doesn't support that (won't render the image), however by doing the "clicking method" it work display because your web browser can display .SVG file.

I figured this out after I read this thread of mine: https://forum.espocrm.com/forum/feat...ector-graphics

[telecastg]

Hi esforim , first of all thanks for the tip on the pesky missing picture image, I will check it out.

Regarding your question, the size of the eSignature canvass is not determined by the plug in but rather by the template that you are using to render the eSignature document if you are using that method or if you are displaying an entity in detail view, the size is determined by Espo's layout .

Can you post a screen shot of your mobile phone to understand better how are you implementing the eSignature ?

[telecastg]

I checked the code and finally found the bug that was causing the empty image placeholder. It had nothing to do with the type of image, just a bug that is fixed now.

Just updated the latest version 1.0.4 which is available to download here: https://github.com/telecastg/esignat...ocrm-1.0.4.zip

[esforim]

Thanks telecastg, updated. What happen to 1.0.3?!! Thank you.

I check the commit, you skipping odd numbers?

As for the screenshot, I will take photo at later time with phone.

[telecastg]

I posted a full tutorial today on how to implement esignature, here's the link: https://forum.espocrm.com/forum/deve...ity-to-espocrm

[esforim]

I was just posting this: https://forum.espocrm.com/forum/gene...8508#post58508

Then I realize, wouldn't esignature be able to do the same thing? Having an optional, "Height (px)" field. Something to considered for in future update telecastg.

[telecastg]

The size of the esignature image is not pre-set, it depends on the size of the actual drawing made inside the canvas, since the signature is captured as a vector image (svg) and all empty space is discarded to keep the file as small as possible.

The size of the canvas is determined by the jsignature library based on the width of the container html tag in order to keep an acceptable "aspect ratio" for the canvas.

[esforim]

Thanks. Coding secret reveal.