{"id":1436,"date":"2015-01-13T18:25:02","date_gmt":"2015-01-13T18:25:02","guid":{"rendered":"https:\/\/mahenderpal.wordpress.com\/?p=1436"},"modified":"2015-11-30T10:44:33","modified_gmt":"2015-11-30T10:44:33","slug":"creating-html-web-resource-to-show-image-attached-in-notes-part-1","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=1436","title":{"rendered":"Creating html web resource to show image attached in Notes Part 1"},"content":{"rendered":"<p>Microsoft Dynamics CRM 2013 introduced new entity image feature, so we can have one image attribute and can use that to store entity image. But we can have only one image attribute per entity. So in this article we are going to demonstrate how we can build an image slider using the java script.<\/p>\n<p>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 &amp; 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<p><a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/notesoption.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1438\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/notesoption.png?w=300\" alt=\"notesoption\" width=\"300\" height=\"118\" \/><\/a><\/p>\n<p><strong>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<p>For our demo purpose we are going to use account entity which already have relationship with notes entity.\u00a0We will utilize attachment feature to attach image and use that in our html web resource for display. So basically we are going to implement below steps<\/p>\n<ul>\n<li>\u00a0 \u00a0\u00a0Get entity image from notes<\/li>\n<li>\u00a0 \u00a0 Create and deploy html web resource.<\/li>\n<\/ul>\n<p><strong>Get entity image from notes<\/strong><\/p>\n<p>We can attach image in notes using social pane in Microsoft Dynamics CRM 2015, like following screen.<\/p>\n<p><a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/attachimage.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1437\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/01\/attachimage.jpg?w=300\" alt=\"attachimage\" width=\"300\" height=\"121\" \/><\/a><\/p>\n<p>Once image is attached to notes, we can retrieve it using OData or Soap endpoint, we are going to use OData endpoints in this article. To retrieve data from notes we need to query annotation entity based on ObjectId field, that we can get entity id using getId method. We need to write retrieve multiple call to get image record, we can use\u00a0<strong>SDK.REST.js<\/strong>\u00a0java script library that comes with MS CRM SDK and call it&#8217;s\u00a0<strong>retrieveMultipleRecords<\/strong>\u00a0method to get data based our query. Please download MS CRM SDK to get details about this library and it&#8217;s method.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nfunction getnotesImages()\r\n{ \/\/get regarding object id\r\nvar regardingObjectId=window.parent.Xrm.Page.data.entity.getId();\r\n\/\/assign notes entity name\r\nvar entitySchemaName=&quot;Annotation&quot;;\r\nvar odataQuery = &quot;?$top=1&amp;$select=AnnotationId,DocumentBody,MimeType&amp;&quot; +\r\n&quot;$filter=ObjectId\/Id eq guid'&quot; + regardingObjectId +\r\n&quot;' and IsDocument eq true and startswith(MimeType,'image\/') &quot;;\r\n\/\/call retrieveMultipleRecords method in SDK.REST javascript script library\r\nSDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function (error) { alert(error.message); }, function(){});\r\n}\r\n\/\/process callbanck result\r\nfunction getnotesImagesCallback(resultSet)\r\n{\r\nif (resultSet.length &gt; 0) {\r\nvar mimeType = resultSet[0].MimeType;\r\nvar body = resultSet[0].DocumentBody;\r\nimgControl.src=&quot;data:&quot; + mimeType + &quot;;base64,&quot; + body;\r\ndocument.getElementById('imagediv').appendChild(imgControl);\r\n}}\r\n<\/pre>\n<p><strong>Note<\/strong>: You can download latest CRM SDK from\u00a0<a href=\"http:\/\/www.microsoft.com\/en-us\/download\/details.aspx?id=44567\">here<\/a>\u00a0and find\u00a0<strong>SDK.REST.js<\/strong>\u00a0under\u00a0<em>SDKSampleCodeJSRESTEndpointJavaScriptRESTDataOperationsJavaScriptRESTDataOperationsScripts.<\/em><\/p>\n<p>Stay tuned for our next post\u00a0to create and deploy html web resource using above method to get and display image.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Microsoft Dynamics CRM 2013 introduced new entity image feature, so we can have one image attribute and can use that to store entity image. But we can have only one image attribute per entity. So in this article we are going to demonstrate how we can build an image slider using the java script. Microsoft Dynamics CRM store all the&#8230; <a href=\"https:\/\/himbap.com\/blog\/?p=1436\">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,8],"tags":[50,81],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1436"}],"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=1436"}],"version-history":[{"count":2,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1436\/revisions"}],"predecessor-version":[{"id":1913,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1436\/revisions\/1913"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}