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

Satyvir Jasra, 20 October 2017

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.

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.

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.

3. Then go the “Form Properties”.

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

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

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.

b

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

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.