Announcement

Collapse
No announcement yet.

Tutorial - How to add electronic signature capability to espoCRM

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Pablo
    replied
    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.

    Leave a comment:


  • esforim
    replied
    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.

    Leave a comment:


  • Pablo
    replied
    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.

    Leave a comment:


  • esforim
    replied
    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".

    Leave a comment:


  • Pablo
    replied
    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.

    Leave a comment:


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

    Leave a comment:


  • telecastg
    replied
    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.
    Last edited by telecastg; 01-18-2021, 07:59 PM.

    Leave a comment:


  • alexisc
    replied
    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
    Last edited by alexisc; 01-18-2021, 02:19 PM.

    Leave a comment:


  • esforim
    commented on 's reply
    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
    commented on 's reply
    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
    Last edited by telecastg; 01-16-2021, 04:46 PM.

  • telecastg
    replied
    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

    Click image for larger version

Name:	Detail View.PNG
Views:	582
Size:	13.3 KB
ID:	66371

    Document View
    Click image for larger version

Name:	Document View View.PNG
Views:	509
Size:	22.5 KB
ID:	66372

    Template code
    Click image for larger version

Name:	Template Code.PNG
Views:	522
Size:	37.5 KB
ID:	66373

    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.

    Leave a comment:


  • alexisc
    replied
    Originally posted by telecastg View Post
    Looks like you did not complete this step in the tutorial:

    Code:
    {
    "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
    Click image for larger version  Name:	2021-01-15 в 11.21.10.png Views:	0 Size:	161.7 KB ID:	66345

    Leave a comment:


  • item
    commented on 's reply
    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
    replied
    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:
    Code:
    {
        "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.
    Last edited by telecastg; 01-14-2021, 08:54 PM.

    Leave a comment:


  • alexisc
    replied
    Originally posted by item View Post
    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
    Attached Files
    Last edited by alexisc; 01-26-2021, 09:31 AM.

    Leave a comment:

Working...
X