{"id":4258,"date":"2017-01-11T12:58:20","date_gmt":"2017-01-11T07:28:20","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=4258"},"modified":"2017-01-11T12:58:20","modified_gmt":"2017-01-11T07:28:20","slug":"how-to-show-signature-accepted-using-pen-control-in-reports-html-web-resources-dynamics-crm-365","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2017\/01\/how-to-show-signature-accepted-using-pen-control-in-reports-html-web-resources-dynamics-crm-365\/","title":{"rendered":"How to show signature accepted using Pen Control in Reports &#038; HTML web resources \u2013 Dynamics CRM\/365"},"content":{"rendered":"<p><strong>Introduction<\/strong><\/p>\n<p>In our earlier <a title=\"Accept Signatures on Mobiles and Tablets using Microsoft Dynamics CRM 2016\/365\" href=\"https:\/\/www.inogic.com\/blog\/2017\/01\/accept-signatures-on-mobiles-and-tablets-using-microsoft-dynamics-crm-2016-365\/\">blog<\/a>, we explained about how we can use newly introduced Pen control in Dynamics 365.<\/p>\n<p>This is an impressive feature, which helps to capture the signature on mobile and tablet devices.<\/p>\n<p>While working with Pen control, we came up with couple of questions,<\/p>\n<p><strong>Display the drawing\/signature on the report<\/strong><\/p>\n<p>For example, businesses may require printing the order report along with the customer\u2019s signature.<\/p>\n<p>Yes, we can achieve this. We can create a report which will display an image captured by Pen control.<\/p>\n<p>Before moving towards the solution, mentioned below are the steps to setup the environment\/Pen control.<\/p>\n<p>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 <a title=\"Accept Signatures on Mobiles and Tablets using Microsoft Dynamics CRM 2016\/365\" href=\"https:\/\/www.inogic.com\/blog\/2017\/01\/accept-signatures-on-mobiles-and-tablets-using-microsoft-dynamics-crm-2016-365\/\">blog<\/a> for detailed steps)<\/p>\n<p><strong>Data stored in base64 value<\/strong><\/p>\n<p>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.<\/p>\n<p>\u201cdata:image\/png;base64,iVBDLSJDFASSKSDLKSLKNSLD\/SDFSF\u2026\u201d<img decoding=\"async\" class=\"aligncenter size-full wp-image-4259\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/01\/1.png\" alt=\"Data stored in base64 value\" width=\"624\" height=\"203\" \/><\/p>\n<p>To show the actual image\/signature in the report, we just need to perform a nifty trick,<\/p>\n<ul>\n<li>Add that multi-line text field in your dataset.<\/li>\n<li>Insert image control and setup image properties as shown below.<img decoding=\"async\" class=\"aligncenter size-full wp-image-4262\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/01\/image-control-and-setup-image-properties-2.png\" alt=\"image control and setup image properties 2\" width=\"624\" height=\"555\" \/><\/li>\n<\/ul>\n<p>Image Source: Select \u201cDatabase\u201d<\/p>\n<p>Use this field: add expression as follow, \u201cIIF(NOT IsNothing(Fields!new_customersignature.Value),Fields!new_customersignature.Value.ToString().Split(&#8220;,&#8221;).GetValue(1),&#8221;&#8221;)\u201d<\/p>\n<p>**** Here we are just taking the encoded characters by splitting the field by comma \u201c,\u201d. We are excluding \u201cdata:image\/png;base64,\u201d.<\/p>\n<p>Use this MIME type: Select \u201cimage\/x-png\u201d<\/p>\n<ul>\n<li>This setting results in pen control image in the report,<img decoding=\"async\" class=\"aligncenter size-full wp-image-4263\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/01\/sales-order-report-3.png\" alt=\"sales order report\" width=\"624\" height=\"321\" \/><\/li>\n<\/ul>\n<p><strong>Display the drawing\/signature on custom HTML webresources<\/strong><\/p>\n<p>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.<\/p>\n<p>As you can see from the screenshot above, we can see the signature in web client in encoded characters only.<\/p>\n<p>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.<\/p>\n<p>To achieve this, follow the steps explained below<\/p>\n<ul>\n<li>Add one html webresource on order form.<img decoding=\"async\" class=\"aligncenter size-full wp-image-4261\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/01\/form-order-4.png\" alt=\"form order\" width=\"624\" height=\"484\" \/><\/li>\n<\/ul>\n<p>In that html, add one img element<\/p>\n<p>The script on load of html page, to set the \u201csrc\u201d attribute of the image element as a value of pen control field is mentioned below.<\/p>\n<pre class=\"lang:default decode:true \">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Signature&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\" \/&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\" \/&gt;\n    &lt;script src=\"..\/ClientGlobalContext.js.aspx\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;img id=\"signatureId\" src=\"\" \/&gt;\n    &lt;script type=\"text\/javascript\"&gt;\n        \/\/read value from customer signature field\n        var customerSignature = parent.Xrm.Page.getAttribute(\"new_customersignature\").getValue();\n        \/\/set src attribute as a value of customer signature field\n        document.getElementById(\"signatureId\").src = customerSignature;\n    &lt;\/script&gt;    \n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>This html results in displaying the signature as shown below.<img decoding=\"async\" class=\"aligncenter size-full wp-image-4260\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/01\/display-signature-5.png\" alt=\"display signature\" width=\"624\" height=\"359\" \/><strong>Conclusion:<\/strong><\/p>\n<p>Go ahead and adopt the Pen Control and easily have the data represented in Reports and Custom UI.<\/p>\n<p><span style=\"color: #800000;\">Maps integration for Dynamics 365 in the language of your choice \u2013 <a style=\"color: #800000;\" title=\"Maplytics Jan 2017 Release Coming \u2013 We speak your language!\" href=\"https:\/\/www.inogic.com\/blog\/2017\/01\/maplytics-jan-2017-release-coming-we-speak-your-language\/\">Maplytics Jan Release is coming soon!<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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,\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2017\/01\/how-to-show-signature-accepted-using-pen-control-in-reports-html-web-resources-dynamics-crm-365\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":4266,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,17,58,66],"tags":[1256,1304],"class_list":["post-4258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-dynamics-365-mobiles-tablets","category-ssrs-reports","category-web-resources-2","tag-new-signature-control-feature","tag-pen-control-in-reports-html-web-resources"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/4258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=4258"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/4258\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/4266"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=4258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=4258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=4258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}