Introduction
In our earlier blog, we explained about how we can use newly introduced Pen control in Dynamics 365.
This is an impressive feature, which helps to capture the signature on mobile and tablet devices.
While working with Pen control, we came up with couple of questions,
Display the drawing/signature on the report
For example, businesses may require printing the order report along with the customer’s signature.
Yes, we can achieve this. We can create a report which will display an image captured by Pen control.
Before moving towards the solution, mentioned below are the steps to setup the environment/Pen control.
We added one multi-line text field on order form and configured it to use a Pen Control on phone and tablet app. (You can refer this blog for detailed steps)
Data stored in base64 value
When we draw something using pen control on tablet and mobile device, it is stored in the background, in encoded characters in the same multiline text field, as shown below.
“data:image/png;base64,iVBDLSJDFASSKSDLKSLKNSLD/SDFSF…”
To show the actual image/signature in the report, we just need to perform a nifty trick,
- Add that multi-line text field in your dataset.
- Insert image control and setup image properties as shown below.
Image Source: Select “Database”
Use this field: add expression as follow, “IIF(NOT IsNothing(Fields!new_customersignature.Value),Fields!new_customersignature.Value.ToString().Split(“,”).GetValue(1),””)”
**** Here we are just taking the encoded characters by splitting the field by comma “,”. We are excluding “data:image/png;base64,”.
Use this MIME type: Select “image/x-png”
- This setting results in pen control image in the report,
Display the drawing/signature on custom HTML webresources
By default, Pen control can be added/displayed to only Phone and Tablet client. So you cannot see the signature drawn by the user on Web Client.
As you can see from the screenshot above, we can see the signature in web client in encoded characters only.
Businesses may require seeing the signature as an actual image on Web Client as well, or they may require showing this signature (Pen control image) on any HTML page or any external pages.
To achieve this, follow the steps explained below
- Add one html webresource on order form.
In that html, add one img element
The script on load of html page, to set the “src” attribute of the image element as a value of pen control field is mentioned below.
<!DOCTYPE html>
<html>
<head>
<title>Signature</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>
</head>
<body>
<img id="signatureId" src="" />
<script type="text/javascript">
//read value from customer signature field
var customerSignature = parent.Xrm.Page.getAttribute("new_customersignature").getValue();
//set src attribute as a value of customer signature field
document.getElementById("signatureId").src = customerSignature;
</script>
</body>
</html>
This html results in displaying the signature as shown below.
Conclusion:
Go ahead and adopt the Pen Control and easily have the data represented in Reports and Custom UI.
Maps integration for Dynamics 365 in the language of your choice – Maplytics Jan Release is coming soon!
Does this solution works for dynamics 365 online? I have a simple model driven app that uses unified interface and I have set up the pen control on multi line text field and it worked fine (capture signature), however, when I try to put this signature on my fetched based custom SSRS report, based on above guidance it won’t show any image.
please let me know.
Please run the query first in report designer using Query Designer option in Dataset, to check whether the signature field value is appearing in result when you run the fetchXML.
Does this(showing a image on a custom fetch based SSRS query) work for CRM online v9 (unified interface ) ?
It shoes noting on my ssrs report and I am nor sure what i missed, any help is much appreciated.
Yes, showing an image on a custom fetch based SSRS query works for CRM online v9.
Please make sure to follow all the steps given in blog and add the following expression:
IIF(NOT IsNothing(Fields!new_customersignature.Value),Fields!new_customersignature.Value.ToString().Split(“,”).GetValue(1),””)
Where, new_customersignature field contains base64 data of image.
Also, please check if you have added the correct MIME type: Select as follow:
image/x-png
Hope this helps.