Tutorial - How to add electronic signature capability to espoCRM

[Pablo]

Hi esforim ,

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.

[esforim]

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 esforim ,

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.

[esforim]

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]

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.

[alexisc]

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

[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]

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

[esforim]

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)

[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

[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.

[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

[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)

[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.

[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