Recently, I faced a challenging and interesting task of implementing Signature Pad in Dynamics CRM Portal/ADXStudio. This blog demonstrates how to implement the HTML5 Signature Pad in CRM Portal/ADXStudio.

It is possible?

Yes, with some tricks, it is possible. Please follow the steps below to achieve it.

Signature Pad Reference

Please use the below link for the example and GitHub code which used as reference to embed the Signature Pad in CRM Portal.

Github Source code link

Signature Pad example link

Steps to Follow

Step 1: In Dynamics CRM, create a new entity, name it as “Signature”, and create the following fields:

 

Information form in Signature Pad entity (CRM):

Step 2: Create a new entity form record referring “Signature” entity and Respective Information form related to “Signature” entity in Dynamics CRM:

 

Step 3: By default, .js file is blocked in CRM attachments. For information on how to upload a JavaScript as web file in Dynamics CRM, please refer to the below blog which explains how to upload .js file in CRM Notes.

Dynamics 365 portals: JavaScript as Web Files

After enabling the .js file in CRM:

  1. Create a new web file in CRM.

Create a new web file and use the following configuration for “signature_pad.js” web file record.

 

Download the JavaScript from this GitHub link and upload the JavaScript file in CRM Notes related to “signature_pad.js” web file record:

  1. Again, create a new web file record in CRM and use the following configuration for “app.js” web file record.

Download the JavaScript from the GitHub link and upload the JavaScript file in CRM Notes related to ““app.js”.

  1. Create new web file record in CRM and use the following configuration for “signature-pad.css” web file record.

Upload the following CSS in notes attachment. I have slightly modified the code from GitHub by removing the background in CSS.

CSS Code:

 

Save the CSS as “signature-pad.css” and upload in CRM Notes attachment:

Step 4: Create a new web template record in CRM and use the following configuration.

 

Use the below liquid template to paste in the Source Field in “Create Signature Web Template” record.

Liquid Template Code:

Click on this link to open liquid template code.

 

Step 5: Create a new Page Template Record in CRM and use the following configuration as mentioned below. Also, refer “Create Signature Web Template” Record.

Step 6: Create a new web page record in CRM and use the following configuration. Also, refer “Create Signature Page Template” record.

 

Step 7: Create a new metadata column in “Create Signature Entity Form” which is used to display the “success message” once the Signature Pad captured successfully.

 

 

Use the following code in Label:

Step 8: Finally, it will display like this in CRM Portal:

 

Signature Pad Gif Demo:

 

In my next blog, I will explain how to display the signature in CRM and how to display the signature in SSRS report.