How to use the eSignature extension to add electronic signature functionality to Espo

[telecastg]

Installation and Setup

Step 1: Purchase, download and install the eSignature extension at https://devcrm.it/product/esignature/ or https://payhip.com/b/DgICV

Step 2: Add the eSignature functionality (ability to have electronic signature fields and use the browser PDF engine instead of the default TCPDF engine to print documents) to a target entity.

For this example we will use a "Tenancy" entity class, which stores data for a rental lease agreement.

Administration > eSignature > eSignature Settings


Step 3: Add the eSignature field to the target entity (Tenancy)
Administration > Entity Manager > Tenancy > Fields > Add Field > eSignature


Step 4: Add the eSignature field (tenantSignature) to the target entity (Tenancy) template (Lease) used to render the document
Main Menu > Templates > Lease > Edit

[telecastg]

Operation

To capture a client eSignature through portal access

a) Give access to the client to the "Tenancy" entity through the Portal so she/he can view the record and edit the "tenantSignature" field.

b) Ask the client to open the eSignature field using the inline edit "pencil icon".


c) After the client enters the signature, she/he can change it BEFORE saving.


d) Once the client clicks "Update", the eSignature is saved to the database and it is no longer editable.



e) To view and print, select the "Display as Document in Full View" menu option.



f) The document will be rendered in full display, and will have two action buttons at the top, one for closing the document and returning to the display view and the other one for printing the document using your browser PDF printing ability.



g) The eSignature field is rendered as an eSignature stamp in the document



h) After clicking the "Printer" icon at the top of the document, your browser printing window will open and you can select to create a PDF document or print a hard copy.


To capture a client eSignature in person using a touch enabled computer, tablet or phone

Follow the steps above, but instead of having the customer accessing the record via Portal, have the customer representative or technician open and display the document for the customer, who can sign using a finger or mouse.

[telecastg]

Update

Version 4.0.1 compatible with EspoCRM 7.4.3 and above, allows to select the ink color for the esignature (for better compatibility with dark themes) on each esignature field and allows documents to be printed directly to PDF when the Dompdf engine is used.

[4n6chick]

I recently purchased the eSignature extension, and it shows that it's version 3.1.3. Unfortunately, I'm not able to get the eSignature to print to PDF, even though I have enabled the dompdf engine.

[telecastg]

Sorry, I meant version 4.0.1, I sent a link to the latest version to you by PM

[shootify]

Hi telecastg , this is more a feature request,
Do you think you can integrate this tool with a hardware signature pad like https://www.topazsystems.com/index.html
thanks

[telecastg]

Hi shootify, unfortunately this kind of feature (integrating with a specialized hardware) would be beyond my expertise.

[shootify]

thanks for the reply.

[shootify]

hi there telecastg, i have a question hope you can help me!
I have a created a entity call device pickup, this is to record when we pick devices from customers on which upon pick up we collect customer signature, however id like to collect a signature when delivered, how do you think i should do this, want to hear from you about ideas. thanks

[telecastg]

Hi shootify,

What I would do is to create an entity "DeviceDelivery" with the information that you require plus an esignature field and have your delivery person open up that entity on its mobile or pad device (Espo can be easily run as a web page in any mobile device) and have the customer draw her/his signature at that moment.

[shootify]

Hi, is there any way to for example to request signature on delivered on the same entity, perhaps using workflow,so the pdf template will have 2 signatures, pickup and delivery?

[telecastg]

The esignature is just another type of field, like varchar, enum, etc..

You can have as many as you want in your entity and include them in your templates.

[arrestthepresident]

Hey there,
i have version 4.0.1 and i cant seem to get the svg to print to the pdf using dompdf

see screenshot:



and here is my code for this section:

<table>
<tbody>
<tr style="border: 1px solid #ddd;">
<td style="vertical-align: top;">
<p style="font-weight: bold; line-height: 0.5px; color:#77ce83; font-size:14px;">Unterschrift Auftraggeber:</p>
</td>
<td style="vertical-align: top;" align="right">
<p style="font-weight: bold; line-height: 0.5px; color:#77ce83; font-size:14px;">Unterschrift Auftragnehmer:</p>
</td>
</tr>
<tr style="border: 1px solid #ddd;">
<td align="left">
{{{signaturKunde}}}
</td>
<td align="right">
{{{signaturITP}}}
</td>
</tr>
</tbody>
</table>​

In any possible configuration there is only the text that is in the output but the svg does not render. Also if i user tripple brackets and the svg gets printed as text i copied the content and pasted in a html. there the browser can render it, but sometimes there are lines missing from the signatures.

whats wrong?

[arrestthepresident]

i did above. thats all for testing now.

[arrestthepresident]

hey @telecastd,
so i have now created several new test entities of different types, created signature fields and linked them to templates to be able to print them with dompdf. My result is that it only works very sporadically at all and then it also has a very strange behavior where sometimes one seemingly preferred field is rendered and the other is not if the preferred one is filled - if it is not filled, the other one is sometimes rendered. i just set up a new Espo (version 7.5.6) with the extensions eSignature (version 4.0.1) and Sales-Pack (version 1.2.2) and included the signatures in a new entity, created and printed a pdf template with (only!) double curly brackets around the signatures - result: only the xml text renders. I can't figure it out and now just assume that there are incompatibilities with the latest version of espo with the plugin.

[telecastg]

It is not possible to recreate the results that you are experiencing without more information please:

1) Are there any errors in the browser console or the backend logs ?

2) If there are no error messages, it will be necessary to get exact copies of the following scripts/database record:

a) clientDefs for the scope where you want to insert esignature fields
b) entityDefs for the same scope
c) copy of the complete entity fields content (you can pull this from the database) from the template that you are using to render the scope
d) screen shot of the esignature admin panel contents

If you prefer, please send a private message to share the above information and I will be happy to review it.

[telecastg]

New version 4.0.2 is compatible with Espo 7.5.5 and allows for multiple esignatures in a document to be printed with Dompdf.

[i-Arbeitsschutz]

Hi there,

I'm using eSignature V.4.0.2 on EspoCRM Version 8.0.2

I've installed everything properly, however, when I add a signature to the signature field, it seems that the signature is pulled in length the further I sign to the right of the field

It's a little complicated to explain, so I've uploaded a video, please check out the added link !...

Also: How can I permanently remove the "sign-here" label ? And how can I change the height of the signature field ?

Many thanks in advance for your help and support...

Kind regards, Martin Buchner

[telecastg]

Hello Martin,

With respect to the first question, I don't know why the signature seems "pulled", as you move the mouse further to the right, the plug in uses a standard "canvas" HTML element to capture the drawing and the signature is drawn using the jSignature open source plugin https://willowsystems.github.io/jSignature/#/about/

We have used the eSignature field in our application for a few years and honestly have not noticed that effect or had any problems because of it.

It is possible to permanently remove the "sign here" label but requires coding at the moment as follows:
file client/modules/esignature/src/views/fields/esignature.js
Line 223, change from:
let $sigDiv = this.$el.jSignature({'UndoButton':this.undoLastStr okeButton, 'color':this.strokeColor,'SignHere':true});
to:
let $sigDiv = this.$el.jSignature({'UndoButton':this.undoLastStr okeButton, 'color':this.strokeColor,'SignHere':false});

It is also possible to change the canvas height but that also requires coding at the moment:
file client/modules/esignature/src/views/fields/esignature.js
Lines 235 to 249
Change this code block to set your preferred height. Please note that this change will only affect the field in edit mode, as in detail mode the field is shown in a standard div element and the dimensions of that element are set by Espo.

I will look into making this two items: (Sign here display and canvas height), user selectable from the Admin panel in future releases.

Hope the above is helpful.

[i-Arbeitsschutz]

Hi telecastg,

I figured out, why the signature is pulled in lenght: Because the layout of this "checklist" was pretty long, I've set up tabs for each step. The esignature field has been in the last tab and it didn't work properly at first. But when I saved the new checklist without signing the esignature form and reopen it, it worked fine.

After removing all tabs, so the esignature field was eventually at the end of the checklist, it worked immediately - so it must have some kind of problem with the tabs ?!

Regarding "SignHere" Label - I followed your instructions, however - it's still there, can't get it removed ?!?! (yes, I've cleared the cache etc...)

Changing the size however worked perfectly fine ;-)

[shootify]

telecastg is there any way you can let us know when a new release, was wondering if are keeping the extension updated to work with the latest espo releases.

[telecastg]

Hi, yes of course.

The latest version (4.0.2) is compatible with Espo 8.0.2

As long as AMD modules are supported by Espo I plan to continue making it compatible with the latest Espo releases.

You can get the latest extension releases for free for a period of one year from the extension purchase date.

Please PM with your purchase details to receive the latest release if you don't have it yet.

[shootify]

hi telecastg, i am trying to collect more than 1 signature on a single document, we provide repair services so we would like to collect signatures when picking up and delivery, on which i create 2 fields on the entity manager "pickup signature" and "delivery signature", however i am having an issue collecting the second signature field which is triggered only when status change to "delivered", the issue is the field doesnt not fully display the field and therefore it cant be signed. see screeenshot. Can you please help?

[telecastg]

hi, what version of the extension and what Espo version are you using?

however i am having an issue collecting the second signature field which is triggered only when status change to "delivered", the issue is the field doesn't not fully display the field and therefore it can't be signed

How are you controlling that the second signature field is only displayed when the status = "delivered"?

If you eliminate the conditional display functionality of the second signature field, does the signature field displays correctly when editing?

Lastly: are there any error messages thrown in the console.log ?

[shootify]

hi telecastg, i am trying to collect more than 1 signature on a single document, we provide repair services so we would like to collect signatures when picking up and delivery, on which i create 2 fields on the entity manager "pickup signature" and "delivery signature", however i am having an issue collecting the second signature field which is triggered only when status change to "delivered", the issue is the field doesnt not fully display the field and therefore it cant be signed. see screeenshot. Can you please help?

I am using latest version of espo and latest version of the extension.
Yes the signature on delivered displays only when status is Delivered, however if I disable that condition the signature field display properly. however I cant save the record if I leave the signature on delivered without signed as error shows, signature cant be blank.
I need it to work with the status condition DELIVERED.
Thanks for your help.

[telecastg]

I cant save the record if I leave the signature on delivered without signed as error shows, signature cant be blank

That could be because you set the delivery signature filed as "required" ?

In order to help you further, I need more information please:

What mechanism are you using to hide or display the field "delivery signature" based on the parent entity status? (dynamic login, dynamic handler, custom code in the document detail view , or ?)

Please post the content of the entityDefs and clientDefs json files for the parent entity that contains the esignature fields.

If you are using a dynamic handler class to determine when to hide or display the "delivery signature" fields, please post the contents of that class as well.

[telecastg]

Version 4.0.3 released, allows to hide the "Sign Here" image in the eSignature canvas from the Admin panel.

If you wish to do this, go to Administration > Entity Manager > {{ name of your entity }} > Fields > {{ name of your eSignature field }}

Unselect the box "Include SIGN HERE label image"