Tutorial - How to add electronic signature capability to espoCRM

[telecastg]

TUTORIAL NOT APPLICABLE TO ESPO V6 AND AFTER

This tutorial describes the steps necessary to incorporate the electronic signature capability using the esignature extension.

For this tutorial we will use a custom entity named "Work Order".

1) After downloading and installing the extension go to:
Administration > Entity Manager > Work Order > Fields > Add Field > eSignature
enter the field name ("tenantSignature") and the label ("Tenant Signature").

2) Go to Administration > Layout Manager > Work Order > Detail
Add the "Tenant Signature" field as a single column item at the bottom of the layout like this:

3) After completing the above steps, the Work Order detail display will look like this:


4) If you wish to grant access to portal users to see and edit work orders linked to their lease contracts, they can access the detail view directly in their computers or phones and sign using a mouse or finger with touch screens in the traditional espo layout. After signing they must click on the "Update" link to save the signature.

The esignature will not be editable once it's saved to satisfy legal requirements, which require that esignatures can not be altered, but prior to saving an esignature, a user can make changes by clicking on a "Undo Last Stroke" link that appears below the signature canvass.

5) The extension also allows you to create a custom template to display the the Work Order in full screen view, incorporating images or any custom css, which can be printed to PDF using your browser's pdf rendering engine.

For example, in our application, we also use esignature for lease contracts that require our signature, which is saved and attached as a regular image in the custom template.

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

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

7) Nest step is to create a custom template and include a special placeholder @sig[{{field-name}}]/sig@@ for the esignature field as shown below.

Note that in our example, the esignature field name is "tenantSignature", so the actual placeholder is: @@sig[tenantSignature]/sig@@:



8) Once a template has been created for "Work Order", the extension will remove the "Print PDF" option from the top left "Edit" menu dropdown and will include instead a new option to print the eSignature document in full screen view and include two action buttons at the top of the document: One to print to PDF using the browser's engine and another one to close the document.

[emillod]

Great job

[llsatellite]

Hello
Can some one help me i did install it and everything looks like its working fine but when i add it to Administration > Layout Manager > Work Order > Detail and load it the signature pad don't load at all it shows the field title "accept" but the pad wont load for some reason my espocrm version is 5.9.1 please let me know if some body else got the same problem or if im missing something

[esforim]

Hello
Can some one help me i did install it and everything looks like its working fine but when i add it to Administration > Layout Manager > Work Order > Detail and load it the signature pad don't load at all it shows the field title "accept" but the pad wont load for some reason my espocrm version is 5.9.1 please let me know if some body else got the same problem or if im missing something

You need to save/create it first. Then you can go "Edit" and sign it off.

[llsatellite]

Thank you that works, one question when i click on the little pen to edit just signature it works but if i click on the edit all button don't work do you know why is that, also there is any way i can change it to be able to sign it before saving it

[telecastg]

Hi,

The electronic signature canvas is designed to only be seen in "detail" mode, so it can only be updated when you are editing "inline" (click on the small pen button).

Yes, it is possible to make modifications to a signature before saving, click on the "Undo last Stroke" button that appears when you are entering a signature. See this post for images of this feature. https://forum.espocrm.com/forum/deve...nic-signatures

[llsatellite]

i dont seem to find a wayt to make the pdf par work with the instruction i use the place holder @@sig[{{field-name}}]/sig@@ but in my screen dont remove the edit print to pdf option like the instructions and the pdf comes out with a code for the image

[llsatellite]

I got it i use the code "<img src="{{field-name}}">" to make it work it shows the signature on the pdf template perfect

[llsatellite]

For some reason when i try to give my users access to restricting edit of information just esignature access in order for them to be able to get it sign but not to edit the information. When they click on the little pen to get it sign and they click on the update option the page says error and they are not able to save it looks like when i have special field level access just for the signature don let them save the signature. Can somebody point me on the right direction i need to be able to let the users get to sign but restrict them from editing all the content after is signed i also was also trying conditional on entity fields but for some reason when i click on field to make conditional the esignature is not available on the list for conditional

[telecastg]

It sounds like a permissions issue, your user needs to have edit permission for the entity with the esignature field and the field itself in order to update it.

To restrict other fields after an update for a specific field (like esignature) will require custom coding at the entity's detail view script.

The way I solved this in our application, was instead of allowing portal users to edit the Work Order, to create a template (see step # 7 above) and render a document in the main section of the screen with the esignature canvass that is editable once.

The idea is to present portal users with a document on the screen that is similar to a "Docusign" document where only the esignature field is editable which is rendered when they click the "Display eSignature Document" button.

Reading your previous postings it looks like your might have omitted step # 6 which is necessary to display the "Display eSignature Document" button instead of "Print to PDF" button and be able to accomplish the above.

[llsatellite]

when i click the print icon at the top of the page it prints perfect but at the top of the print page is the website link and name there is any way to remove that from printing

[llsatellite]

I finally figure out how to make all the fields read only after signature, by storing eSignature on another custom field with formula and make all the other fields read only when the custom field is not empty and works perfect i prefer to have the option of the PDF file and not the one similar to Docusign option, but after i finally find out how to doit for some reason my signature it is not showing any more in the PDF with <img src="{{field-name}}"> it says TCPDF ERROR: [Image] Unable to get the size of the image: data:data:image/png;base64 but it was working fine before so i just don't know what happen i try to use the i try to add the sizing and the error wont show but no image i also try to use
{{imageTag imageFieldNameId width=50 height=50}} but that also dont work and i don't know why since i got the latest version of espo if some body can help me i need to have the image on the pdf file to print and save too

[telecastg]

when i click the print icon at the top of the page it prints perfect but at the top of the print page is the website link and name there is any way to remove that from printing

Uncheck the option to print headers at your page print settings for the browser (see the attached image)

The esignature image will not display using TCPDF because it is stored as SVG code plus a div element (that shows the signing date) and Espo's current implementation of TCPDF does not support SVG

I really don't know how you got it to display the image before.

If you are determined to use TCPDF, I believe that you could write a custom Handlebars helper to make this type of image "renderable" with Espo's Htmlizer class.

The extension is designed to print using your browsers engine which can render PDF much better than TCPDF.

[llsatellite]

No my programing skills are not that great im going to have to stay with the Docusign style, one more question the signature shows ok on it but every time i insert an image in the template like my logo it wont show in the docusign for printing, also do you know how i can add a button for saving the docusign next to the print button

[telecastg]

every time i insert an image in the template like my logo it wont show in the docusign for printing

You can add your logo to the template and it will display like any other template images, see the attached pictures.

One advantage of using your browser engine to print pdf instead of the regular TCPDF engine, is also that in addition to all the regular template fields and helpers, you can include any other css that you want in your template without being limited to what TCPDF allows, which is in my opinion quite limited

how i can add a button for saving the docusign next to the print button

It is not possible to add a "signature saving" button at the top of the page, use the "Update" link on top of the esignature canvas to save the field after it has been signed.

The rationale behind this approach is that a document might have more than one esignature field and each individual signature must be entered and saved, whereas a "page wide" signature button would save all esignature fields at once.