Tutorial - How to add electronic signature capability to espoCRM

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

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

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

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

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

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

[emillod]

Great job

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