How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.

Microsoft Dynamics 365 comes with a feature called “Pen Control”, which allows the users to directly draw and add a signature in Dynamics 365 App. But there are some limitations. The user has the ability to draw and input a signature only on mobile client, not web client. Also, on mobile client a saved signature is shown as an image but on other clients, text is shown.

However, there is a workaround to display the saved signature as an image instead of the text on web client. In this blog, I will walk through the steps to achieve this.

I created a field called “Signature” with “Pen Control” added to it. I added “Signature” on the Contact main form. Then I created a new record and saved it with an input in “Signature” field. The following images show how the information is represented differently for newly created Contact record on mobile and web client for “Signature” field.

image thumb 8 How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.

image thumb 7 How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.

On the web client, the text shown in the “Signature” field is the source address of the image that was created through mobile client. That means, we can use this address in an iFrame to display the signature image on the web client. Here are the steps that we have to go through to accomplish this.

1. Add JavaScript code as a web resource. I have added mag_/js/contactsignature.js and following is the code that I used.

image thumb 6 How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.

2. Create a new iFrame and add it to Contact main form. This is the same form which is being used to input the signature through mobile client. I named the iFrame, “IFRAME_Signs”. Populate URL field with “about:blank”, this will display an all white image similar to the mobile client, which implies the field is empty.

image thumb 5 How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.

3. Then go the “Form Properties”.

image thumb 4 How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.

4. Select “Events” tab, and then click on “Add”. Then, add “mag_/js/contactsignature.js” web resource.

image thumb 3 How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.

5. Then expand “Event Handlers” tab, select “OnLoad” for “Event” field, and then click on “Add”. Then click on

image thumb 2 How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.

6. Set handler properties as shown in the screenshot below. Then click on “Ok”. Be sure to save changes of form properties by clicking on “Ok”. Then save, and publish all changes.

image thumb 1 How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.b

Let’s see our iFrame and logic in action. I opened the same Contact record which was displaying text in “Signature” field.

image thumb How to Display Image Saved Using Pen Control on Web Client In Dynamics 365.

As we can see in the screenshot above, “Signature” field contains the address of the image being displayed in “Contact Signature” iFrame.

To make this change more user friendly, you can hide “Contact Signature” iFrame on mobile clients, and “Signature” field on web client. But that’s something that I will leave up to you.

Let’s block ads! (Why?)

Magnetism Solutions Dynamics CRM Blog