Tutorial - How to add electronic signature capability to espoCRM

[espcrm]

Hi Pablo, I use a various of web-browser Firefox Fennix and various of it version; Privacy Browser (free and ad-free browser); Soul (paid App). My last experience I use Firefox, and it will have scrolling issue.

Think of it like this; when people write their signature (I give the opt to use their index finger or use my "touch pen"), if they write anything horizontal (left or right) it fine, but if they write vertical (up to down) then my browser will start scrolling the page. That just how your phone is design; I don't quite know if there any phone or browser that can "lock" scrolling temporary.

I think it best to do a video demo but I'm rather lazy. It think it become quite obvious once you use it on your phone. I'm not sure if Chrome on Android have this issue; or if Safari on iPhone have this issue either.

[Pablo]

Hi espcrm ,

Thanks a LOT for your help, now I get what you say. Seems the web browser doesn't know when the user is scrolling or signing (vertical movement).

We will test this new field format.

Thanks again for your time.

[Pablo]

Hi!

I have installed the extension and added to my custom entiity. Works very good.

However, I have the following 2 questions:

1. Is there any way users can sign BEFORE saving? This esignature field is required and having users to save and then edit inline the esignature field is a bit difficult.
2. How can we modify or translate the "SIGN HERE" yellow arrow and the "Undo last stroke" text?

Thanks a lot!

[telecastg]

Hi Pablo

1. Is there any way users can sign BEFORE saving? This esignature field is required and having users to save and then edit inline the esignature field is a bit difficult.

Making the esignature field required is not part of the extension, this would be a setting in your custom entity entityDefs file. The esignature field is a regular text field in your database table, it just contains SVG code to render an image instead of text.

By definition, if a User clicks "Update", the field and thus the entity will be saved and updated though, so yes a User can sign and then complete other fields if you want.

2. How can we modify or translate the "SIGN HERE" yellow arrow and the "Undo last stroke" text?

I definitely think is possible but honestly have no idea of exactly how to implement these changes.

The esignature field is based on the jsignature.js javascript plug in and the "SIGN HERE" yellow arrow is an image defined in the SignHere.js which is a plug in for the jsignature plug in (yes a plug in inside a plug in inside another plug in.....) so, if you are substantially proficient in Javascript, you might want to play with these files to see if you can get what you want:

client/modules/esignature/lib/jsignature/plugins/signhere/Jsignature.SignHere.js

client/modules/esignature/lib/jsignature/jSignature.min.noconflict.js

If you manage to make these changes (I imagine that it is for translation purposes) I would greatly appreciate it if you can publish your code so other users from non English speaking countries can do the same for their languages.

Suerte !

[Pablo]

Hey telecastg ,

Thanks for the help.

I was able to translate "Undo last stroke" inside the file client/modules/esignature/lib/jsignature/jSignature.min.noconflict.js

I still haven't been able to esign when creating new data (I still need to save first and edit inline later). Hope someone can check if it's possible to sign WITHOUT needing to save / update.

Have a great day!

[telecastg]

You're very welcome Pablo I double checked and it is not possible to create a new entity, sign it and then save.

The esignature field can only be edited using inline editing and to use inline editing you must have an entity already created, so the correct order is to

a) create a new entity and save
b) use the pencil icon to edit the signature field
c) click Update to save the signature

In our case, we generate a lease contract entity, save it and then send a message to the customer to access the lease through the portal and sign it.

[espcrm]

Uncheck the option to print headers at your page print settings for the browser (see the attached image)

Look like I totally missed this post. This option work great. It also seem to bypass "Footer Copyright mark too". But if I ever want the footer copyright I can use "Ctrl+P" and it will show.

[Bertomi]

I upgraded EspoCRM to version 7. Unfortunately, the esignature extension (2.0) does not work. The esignature template returns the following error error retrieving esignature document content. Is there a way to fix it?

[telecastg]

Unfortunately Espo 7 made substantial changes to the core code that have made many customizations incompatible.

We are very busy fixing our implementation and do not plan to update the current free esignature extension, but if you have reasonable coding skills you can help by modifying the files yourself and posting here your solutions.

Alternatively, if nobody posts any solutions to the free extension issues, we will re-write the extension, add a few features and will release as a commercial version in the near future.

[Bertomi]

Thank you very much your reply.

[telecastg]

You are very welcome

[telecastg]

For those interested, we released today the commercial version of this extension, which is compatible with Espo 7 and allows to use the browser's PDF engine to render any entity using regular templates, bypassing TCPDF and it's known issues.

https://payhip.com/b/DgICV

[Bertomi]

True to my promise, I will send the verification number to the purchase invoice. It’s not my name on it, it’s my friend who bought it for me. Thanks for the help. My question would be, can I install this version, which we just downloaded at the time of purchase, to replace the existing module you sent?

Purchase ID:
REFERENCE: 6zY305RaGq
DATE: 12.08.2021
Zsombó-Bau Kft.

[telecastg]

Thanks Bertomi I appreciate your most respectable response

[czcpf]

You're very welcome Pablo I double checked and it is not possible to create a new entity, sign it and then save.

The esignature field can only be edited using inline editing and to use inline editing you must have an entity already created, so the correct order is to

a) create a new entity and save
b) use the pencil icon to edit the signature field
c) click Update to save the signature

In our case, we generate a lease contract entity, save it and then send a message to the customer to access the lease through the portal and sign it.

I wonder if indeed it would be possible to work around this limitation by restructuring your extension to make eSignature field a en entity child->parent and storing the SVG code in a different entity/table (ie. ElectronicSignatures with fields: id, name,field,parent_id, parent_type, signatureSVGcode, etc.. This way, a signature could be created because it is saved as a ElectronicSignature entity (initially the parent_id, would be null on the initial signature), upon signing and clicking save you would return the electronicSignatureId, then when you save the new parent Entity you would relate the child and parent in an afterSave action. This is similar to how Attachment field works. There you can add attachments to any parent entity even before you save the parent.

[telecastg]

This issue was resolved since version 2.0.6 but thanks for the suggestion