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.
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:
After enabling the .js file in CRM:
- Create a new web file in CRM.
Create a new web file and use the following configuration for “signature_pad.js” web file record.
- Again, create a new web file record in CRM and use the following configuration for “app.js” web file record.
- 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.
.m-signature-pad .m-signature-pad:before, .m-signature-pad:after .m-signature-pad:after .m-signature-pad--body .m-signature-pad--body canvas .m-signature-pad--footer .m-signature-pad--footer .description .m-signature-pad--footer .left, .right .m-signature-pad--footer .left .m-signature-pad--footer .right @media screen and (max-width: 1024px) #github } @media screen and (min-device-width: 768px) and (max-device-width: 1024px) } @media screen and (max-height: 320px) .m-signature-pad--footer .m-signature-pad--footer .description }
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:
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 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.