{"id":3052,"date":"2018-07-04T13:24:38","date_gmt":"2018-07-04T13:24:38","guid":{"rendered":"http:\/\/himbap.com\/blog\/?p=3052"},"modified":"2018-07-11T00:02:16","modified_gmt":"2018-07-11T00:02:16","slug":"creating-html-web-resource-to-show-image-attached-in-notes-using-web-api","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=3052","title":{"rendered":"Creating html web resource to show image attached in Notes using Web API"},"content":{"rendered":"

Some time back I wrote a post for retrieving image attached to notes using OData<\/a>, as now for Dynamics 365 CE, we use Web API, so I am going to share how we can do it using Web API.<\/p>\n

Microsoft Dynamics CRM store all the notes and attachment in annotation entity. Most of the out of box entity used to have relationship with this entity, but while creating our custom entity we can specifically select if we want to associate our custom entity with notes or not using following option under Communication & Collaboration. Keep in mind once you enable this option, there is not supported way to disable this option, but if you are not sure, if you need notes or not at the time of your entity creation better to leave this option un-selected, so that you can select this option after sometime if required.<\/p>\n

Note<\/strong>: The default size for notes attachment is 5 MB but if required you can increase this limit up to 32 MB.<\/p>\n

We are going to implement following two steps
\n
\nGet entity image from notes
\nCreate and deploy html web resource<\/strong><\/p>\n

Get entity image from notes<\/strong><\/p>\n

Similar to earlier versions we can upload image to notes in Dynamics 365 CE.<\/p>\n

Once image is attached to notes, we can retrieve it using Web API retrievemultiple request where we can query notes based on ObjectId field, we need to pass entity id field for objectid field in notes. We can using following code, in our html webresource:<\/p>\n

\r\n<html><head>\r\n<script type="text\/javascript">\r\n\/\/check if document is loaded or not\r\nvar imgControl = document.createElement("IMG");\r\n\/\/Check if documented loaded fully\r\ndocument.onreadystatechange = function () {\r\nif (document.readyState == "complete") {\r\ngetnotesImages();\r\n}\r\n}\r\n\r\n\/\/this function is used to get image from notes\r\nfunction getnotesImages()\r\n{\r\n \/\/get regarding object id\r\nvar regardingObjectId=window.parent.Xrm.Page.data.entity.getId().substring(1, 37);\r\n\r\n\/\/prepare URL\r\nvar webapiURL=window.parent.Xrm.Page.context.getClientUrl() + "\/api\/data\/v8.2\/annotations"; \r\n\r\n\/\/prepare query\r\nvar webapiQuery ="?$select=annotationid,documentbody,mimetype&amp;$filter=_objectid_value eq "+regardingObjectId+" and  isdocument eq true and startswith(mimetype, 'image\/')";\r\n\r\n\/\/call image\r\nvar req = new XMLHttpRequest();\r\nreq.open("GET", webapiURL+webapiQuery, true);\r\nreq.setRequestHeader("OData-MaxVersion", "4.0");\r\nreq.setRequestHeader("OData-Version", "4.0");\r\nreq.setRequestHeader("Accept", "application\/json");\r\nreq.setRequestHeader("Content-Type", "application\/json; charset=utf-8");\r\nreq.setRequestHeader("Prefer", "odata.include-annotations=\\"*\\",odata.maxpagesize=1");\r\nreq.onreadystatechange = function() {\r\n    if (this.readyState === 4) {\r\n        req.onreadystatechange = null;\r\n        if (this.status === 200) {\r\n            var results = JSON.parse(this.response);\r\n           if(results.value.length&gt;0) {\r\n                var annotationid = results.value[0]["annotationid"];\r\n                var documentbody = results.value[0]["documentbody"];\r\n                var mimetype = results.value[0]["mimetype"];\r\n\t\t\t\t\/\/set image\r\n\t\t\t\timgControl.src="data:" + mimetype + ";base64," + documentbody;\r\n                document.getElementById('imagediv').appendChild(imgControl);\r\n            }\r\n        } else {\r\n            Xrm.Utility.alertDialog('Error while retrieving image details');\r\n        }\r\n    }\r\n};\r\nreq.send();\r\n}\r\n<\/script>\r\n<head><body style="zoom: 1; word-wrap: break-word;">\r\n\r\n<div style="width: 100px;" id="imagediv"><\/div>\r\n\r\n<\/body><\/html>\r\n<\/pre>\n
Create and deploy html web resource<\/strong>
\nNow we need to create a html web resource and use above code under Text Editor
\n\"imageresource1\"<\/a><\/p>\n
After that we can put this web resource to our required entity form and we should be able to see first attached image in web resource after refreshing page.<\/p>\n
Hope it will help someone !!<\/p>\n","protected":false},"excerpt":{"rendered":"
Some time back I wrote a post for retrieving image attached to notes using OData, as now for Dynamics 365 CE, we use Web API, so I am going to share how we can do it using Web API. Microsoft Dynamics CRM store all the notes and attachment in annotation entity. Most of the out of box entity used to… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":3036,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21,402,522,296],"tags":[404,531,534,533,535,532,536],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3052"}],"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=3052"}],"version-history":[{"count":9,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3052\/revisions"}],"predecessor-version":[{"id":3345,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3052\/revisions\/3345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/3036"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}