{"id":1442,"date":"2015-01-14T10:56:58","date_gmt":"2015-01-14T10:56:58","guid":{"rendered":"https:\/\/mahenderpal.wordpress.com\/?p=1442"},"modified":"2015-11-30T10:41:35","modified_gmt":"2015-11-30T10:41:35","slug":"creating-html-web-resource-to-show-image-attached-in-notes-part-2","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=1442","title":{"rendered":"Creating html web resource to show image attached in Notes Part 2"},"content":{"rendered":"<p>In our\u00a0<a href=\"https:\/\/himbap.com\/blog\/?p=1436\">previous\u00a0<\/a>post\u00a0we explained how we can get image from notes using OData endpoints, in this post\u00a0we are going to explain how we can create html web resource and use our java script method to get and display image. We need to implement two steps:<\/p>\n<ul>\n<li>\u00a0 Create html page<\/li>\n<li>\u00a0\u00a0Deploy html page and SDK.REST.js using web resource<\/li>\n<\/ul>\n<p><strong>Create html page<\/strong><\/p>\n<p>Create html page using any html editor, use following code for html page<\/p>\n<p>&lt;html lang=&#8221;en-us&#8221;&gt;&lt;head&gt;<br \/>\n&lt;script src=&#8221;..\/ClientGlobalContext.js.aspx&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;SDK.REST.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;script type=&#8221;text\/javascript&#8221;&gt;<br \/>\n\/\/check if document is loaded or not<br \/>\nvar imgControl = document.createElement(&#8220;IMG&#8221;);<br \/>\n\/\/Check if documented loaded fully<br \/>\ndocument.onreadystatechange = function () {<br \/>\nif (document.readyState == &#8220;complete&#8221;) {<br \/>\ngetnotesImages();<br \/>\n}<br \/>\n}<br \/>\n\/\/this function is used to get image from notes<br \/>\nfunction getnotesImages()<br \/>\n{ \/\/get regarding object id<br \/>\nvar regardingObjectId=window.parent.Xrm.Page.data.entity.getId();<br \/>\n\/\/assign notes entity name<br \/>\nvar entitySchemaName=&#8221;Annotation&#8221;;<br \/>\nvar odataQuery = &#8220;?$top=1&amp;$select=AnnotationId,DocumentBody,MimeType&amp;&#8221; +<br \/>\n&#8220;$filter=ObjectId\/Id eq guid'&#8221; + regardingObjectId +<br \/>\n&#8220;&#8216; and IsDocument eq true and startswith(MimeType,&#8217;image\/&#8217;) &#8220;;<br \/>\n\/\/call retrieveMultipleRecords method in SDK.REST javascript script library<br \/>\nSDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function (error) { alert(error.message); }, function(){});<br \/>\n}<br \/>\n\/\/process callbanck result<br \/>\nfunction getnotesImagesCallback(resultSet)<br \/>\n{<br \/>\nif (resultSet.length &gt; 0) {<br \/>\nvar mimeType = resultSet[0].MimeType;<br \/>\nvar body = resultSet[0].DocumentBody;<br \/>\nimgControl.src=&#8221;data:&#8221; + mimeType + &#8220;;base64,&#8221; + body;<br \/>\ndocument.getElementById(&#8216;imagediv&#8217;).appendChild(imgControl);<br \/>\n}<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n&lt;meta charset=&#8221;utf-8&#8243;&gt;&lt;\/head&gt;&lt;body style=&#8221;zoom: 1;&#8221;&gt;<br \/>\n&lt;div style=&#8221;width: 100px;&#8221; id=&#8221;imagediv&#8221;&gt;&lt;\/div&gt;<br \/>\n&lt;\/body&gt;&lt;\/html&gt;<\/p>\n<p><strong>Deploy html page and SDK.REST library using web resource<\/strong><\/p>\n<p>Using following steps to deploy html page and SDK.REST library in MS CRM.<\/p>\n<ul>\n<li>\u00a0 \u00a0 \u00a0\u00a0Navigate to Settings -&gt; Customization-&gt; Customize the System from top navigation bar<\/li>\n<li>\u00a0 \u00a0 \u00a0\u00a0Navigate to Components -&gt; Web Resources-&gt; New<\/li>\n<li>\u00a0 \u00a0 \u00a0\u00a0Fill details like following screen<\/li>\n<\/ul>\n<p><a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/saveimg.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1446\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/saveimg.jpg?w=300\" alt=\"saveimg\" width=\"300\" height=\"188\" \/><\/a><\/p>\n<ul>\n<li>Click on browse button and select your html web resource.<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0Click on Save and then Publish<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0Navigate to Components -&gt; Web Resources-&gt; New<\/li>\n<li>\u00a0 \u00a0 \u00a0 \u00a0Fill details like following screen<\/li>\n<\/ul>\n<p><a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/sdk-rest.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1447\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/sdk-rest.jpg?w=300\" alt=\"sdk.rest\" width=\"300\" height=\"187\" \/><\/a><\/p>\n<ul>\n<li>Click on browse and select SDK.REST.js from MS CRM SDK<\/li>\n<\/ul>\n<p><strong>Note<\/strong>: Please refer\u00a0<a href=\"https:\/\/himbap.com\/blog\/?p=1436\">previous <\/a>post\u00a0for SDK.REST.js location.<\/p>\n<p>Now we can place our html web resource in the account entity form by navigating Insert \u00a0-&gt; Web Resource options. Save your changes and then publish account entity form.<\/p>\n<p><a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/form.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1449\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/form.jpg?w=300\" alt=\"form\" width=\"300\" height=\"59\" \/><\/a><\/p>\n<p>When you will try to open your account record you should be able to see attached images loaded into html web resource.<\/p>\n<p><a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/img.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1448\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/img.jpg?w=300\" alt=\"img\" width=\"300\" height=\"163\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our\u00a0previous\u00a0post\u00a0we explained how we can get image from notes using OData endpoints, in this post\u00a0we are going to explain how we can create html web resource and use our java script method to get and display image. We need to implement two steps: \u00a0 Create html page \u00a0\u00a0Deploy html page and SDK.REST.js using web resource Create html page Create&#8230; <a href=\"https:\/\/himbap.com\/blog\/?p=1442\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,6,7,8],"tags":[88],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1442"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1442"}],"version-history":[{"count":2,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1442\/revisions"}],"predecessor-version":[{"id":1911,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1442\/revisions\/1911"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}