Announcement

Collapse
No announcement yet.

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

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

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

    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
    Click image for larger version  Name:	eSignature Settings.png Views:	0 Size:	45.1 KB ID:	88070

    Step 3: Add the eSignature field to the target entity (Tenancy)
    Administration > Entity Manager > Tenancy > Fields > Add Field > eSignature
    Click image for larger version  Name:	tenantSignature Field.png Views:	0 Size:	54.9 KB ID:	88074

    Step 4: Add the eSignature field (tenantSignature) to the target entity (Tenancy) template (Lease) used to render the document
    Main Menu > Templates > Lease > Edit
    Click image for larger version  Name:	tenantSignature Template placeholder.png Views:	0 Size:	55.7 KB ID:	88075
    Last edited by telecastg; 02-16-2023, 05:47 AM.

  • #2
    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.
    Last edited by telecastg; 02-15-2023, 08:24 PM.

    Comment


    • #3
      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.
      Last edited by telecastg; 05-11-2023, 06:43 AM.

      Comment


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

        Comment


        • telecastg
          telecastg commented
          Editing a comment
          Sorry, I meant version 4.0.1, I sent a link to the latest version to you by PM

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

        Comment


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

          Comment


          • shootify
            shootify commented
            Editing a comment
            thanks for the reply.

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

          Comment


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

            Comment


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

          • #9
            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:

            Click image for larger version

Name:	Unbenannt.png
Views:	649
Size:	30.2 KB
ID:	96812

            and here is my code for this section:

            HTML Code:
            <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?

            Comment


            • arrestthepresident
              arrestthepresident commented
              Editing a comment
              i did above. thats all for testing now.

            • arrestthepresident
              arrestthepresident commented
              Editing a comment
              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
              telecastg commented
              Editing a comment
              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.
              Last edited by telecastg; 08-29-2023, 06:16 AM.

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

            Comment


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

              Comment


              • telecastg
                telecastg commented
                Editing a comment
                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.
                Last edited by telecastg; 09-22-2023, 02:26 AM.

              • i-Arbeitsschutz
                i-Arbeitsschutz commented
                Editing a comment
                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 ;-)

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

              Comment


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

            • #13
              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?
              Attached Files
              Last edited by shootify; 09-26-2023, 07:49 AM.

              Comment


              • telecastg
                telecastg commented
                Editing a comment
                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 ?
                Last edited by telecastg; 09-26-2023, 05:35 PM.

            • #14
              Originally posted by shootify View Post
              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.

              Comment


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

            • #15
              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"

              Comment

              Working...
              X