Tutorial - How to add electronic signature capability to espoCRM

[telecastg]

New version (2.0.0) released, compatible with Espo 6.0.6 https://github.com/telecastg/esignat...ts-for-espocrm

[alexisc]

Espo Version 6.0.8
eSignature version 2.0.0

everything works perfectly, until the moment the signature is printed

place holder @@sig[{{eSignature}}]/sig@@ displays SVG code, not the image itself

code "<img src="{{field-name}}">" - does not work

[telecastg]

Espo Version 6.0.8
eSignature version 2.0.0

everything works perfectly, until the moment the signature is printed

place holder @@sig[{{eSignature}}]/sig@@ displays SVG code, not the image itself

We have the extension (same version of Espo and eSignature) running without a problem.

Suggestions:

1) Try: @@sig[eSignature]/sig@@ (no double bracket)
2) Make sure that you are using the "print" icon at the top of the document to print and not the Print to Pdf Espo option

code "<img src="{{field-name}}">" - does not work

That is Espo's handlebars notation, will not display SVG images at present. The eSignature extension uses the custom placeholder to render SVG

[alexisc]

2) Make sure that you are using the "print" icon at the top of the document to print and not the Print to Pdf Espo option

Thanks for your reply!
this is my mistake, it looks like eSignature only works for "Work Order". I am trying to use it on an existing Entity - "Contact" and "Opportunity". I do not have "Display eSignature Document" in the menu, only "Print to PDF"

if there is a solution to how to connect "eSignature", I will be very grateful for the hint

[item]

Hello,
you must add eSignature field to your entity. it's a new type of field like varchar, integer, float, image,....
go admin section, entity manager, contact, add field "eSignature".
same for opportuinity.

[alexisc]

Hello,
you must add eSignature field to your entity. it's a new type of field like varchar, integer, float, image,....
go admin section, entity manager, contact, add field "eSignature".
same for opportuinity.

I added a field: everything works perfect, but there is no "Display eSignature Document" in the menu, only "Print to PDF"
I create a new print layout in pdf and add a signature placeholder there, it doesn't work

[telecastg]

Looks like you did not complete this step in the tutorial:

6) To accomplish the above for the Work Order entity, it is necessary first to modify the Work Order clientDefs settings file to let Espo know that the extension's custom record detail view must be used to render the Work Order in detail display:

custom/Espo/Custom/Resources/metadata/clientDefs/WorkOrder.json
Code:
"recordViews": { "detail": "esignature:views/record/detail" }

Create if it doesn't exist a custom clientDefs json file for your entity and specify the view "esignature:views/record/detail" as the view to use to render your entity in detail mode.

For example, if your entity name is "Client" then create custom/Espo/Resources/metadata/clientDefs/Client.json and enter:

{
    "recordViews": {
         "detail": "esignature:views/record/detail"
    }
}

Clear cache and rebuild, now Espo will display "Client" using the esignature custom view that includes the "Display eSignature Document" menu option.

[item]

i don't know why it's not integrated in espocrm outofbox by Yuri but.. really thanks telecastg for this field (i don't use it but it's in my plan in futur)

[alexisc]

Looks like you did not complete this step in the tutorial:

{
"recordViews": {
"detail": "esignature:views/record/detail"
}
}

Clear cache and rebuild, now Espo will display "Client" using the esignature custom view that includes the "Display eSignature Document" menu option.

This is magic, i did it earlier (probably didn't restart espo). Now on the menu I see "Display eSignature Document"

But

place holder @@sig[{{eSignature}}]/sig@@ displays SVG code,
place holder @@sig[eSignature]/sig@@ (no double bracket), does not work

[telecastg]

I don't know why the SVG code is being rendered instead of the image in the document, as I mentioned we have this extension installed working perfectly with Chrome and Edge browsers.

Looking at the picture that you sent, I don't even see the placeholders being replaced in the rendered document

Is the eSignature field displaying properly in your entity's detail view ?

If so, the issue might have something to do with your template. I can't help with code debugging but what I can do is share here screen shots of a detail view, a document vie and the template code for an eSignature field that we user for our "WorkOrder" entity and hopefully you will be able to figure out what is not working for you.

Entity Detail View



Document View


Template code


Another possible answer might have something to do with your server settings (I got that from a search at stokoverflow.com https://stackoverflow.com/questions/...stead-of-image ) but I don't know much about server settings so I can't give more more info about it.

[telecastg]

I checked again, the reason why SVG code is being rendered, instead of the image, is that you are using the double brackets so Espo (Handlebars) engine identifies the field content as text and renders its contents accordingly.

You must use the custom placeholders WITHOUT the handlebar brackets just the field name inside the placeholders.

As to why the image is not being rendered in the document view when the correct notation is used I still suspect that it has something to do with your template code since the image renders perfectly in detail view, so it's not a browser issue. Hope this helps

[espcrm]

Yes, alexisc, try using a variation of the code see if any of them render properly.

Also can paste the code; and also try to use the <> (code display button and write code in there)

[alexisc]

Many thanks to all! this option works fine @@sig[eSignature]/sig@@

Another question: how to resize, the signature is too large and takes up half the page, needs to be placed in a specific location with a predefined size

[telecastg]

You're welcome.

Another question: how to resize, the signature is too large and takes up half the page, needs to be placed in a specific location with a predefined size

That can be done in your template code. The eSignature SVG image is like any other image, size and location can be manipulated with CSS

Notice how in our template the esignature is wrapped in a <div class="col-md-4"></div> element. (If you are not familiar with Bootstrap notation I suggest that you get familiar with it, there's a ton of documentation online.)

The advantage of using direct rendering without TCPDF is that the document structure and styles will be rendered by your browser so you can use all CSS styling that you wish.

[alexisc]

I am using Bootstrap, but the "signature" is beyond the scope of the container

[Pablo]

Hey telecastg ,

Thanks a LOT for this extension. I haven't tested it but I was wondering if the esignature field would work in a tablet (iPad).

Have you used this type of field in tablets and smartphones?

Thanks again.

[espcrm]

It certainly does work for phone; I sometime use it (rarely though since phone is quite small). It does have one weakness I feel while using it, my web browser scroll as I get people to sign the documents.

There doesn't seem to be a way to force my web browser to lock scroll until the signing is finish.

Phone and tablet essential same thing, one just bigger screen so I'm sure if it work on phone it will work on bigger "phone".

[Pablo]

Hi espcrm ,

Thanks for the help. Can you please clarify when you mention "It does have one weakness I feel while using it, my web browser scroll as I get people to sign the documents."?

What web browser do you use in your phone? Does this scrolling issue affects the user from signing?

Thanks for your time.