Announcement

Collapse
No announcement yet.

Tutorial - How to add electronic signature capability to espoCRM

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

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

    Comment


    • #32
      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

      Comment


      • #33
        Originally posted by alexisc View Post
        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


        Originally posted by alexisc View Post
        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
        Last edited by telecastg; 01-12-2021, 07:55 PM.

        Comment


        • #34
          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




          Comment


          • #35
            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.

            Comment


            • #36
              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.

              Comment


              • #37
                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.

                Comment


                • item
                  item commented
                  Editing a comment
                  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)

              • #38
                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

                Comment


                • #39
                  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:	532
Size:	13.3 KB
ID:	66371

                  Document View
                  Click image for larger version

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

                  Template code
                  Click image for larger version

Name:	Template Code.PNG
Views:	477
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.

                  Comment


                  • telecastg
                    telecastg commented
                    Editing a comment
                    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.

                  • espcrm
                    espcrm commented
                    Editing a comment
                    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)

                • #40
                  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.

                  Comment


                  • #41
                    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.

                    Comment


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

                      Comment


                      • #43
                        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.

                        Comment


                        • #44
                          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".

                          Comment


                          • #45
                            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.

                            Comment

                            Working...
                            X