In our previous article we explained how to get an image from Notes using OData endpoints. In this article we will explain how to create a HTML web resource and use our JavaScript method to get and display the image. We need to implement the following two steps:

· Create HTML page

· Deploy HTML page and SDK.REST.js using web resource

Create HTML page

Create a HTML page using a HTML editor. Use the following code for the HTML page:

  1. <html lang="en-us"><head>
  2. //Reference clientglobalcontest.js to get context information
  3. <script src="../ClientGlobalContext.js.aspx"></script>
  4. //add SDK.Rest.js reference
  5. <script type="text/javascript" src="SDK.REST.js"></script>
  6. <script type="text/javascript">
  7. //check if document is loaded or not
  8. var imgControl = document.createElement("IMG");
  9. //Check if documented loaded fully
  10. document.onreadystatechange = function () {
  11. if (document.readyState == "complete") {
  12. getnotesImages();
  13. }
  14. }
  15. //this function is used to get image from notes
  16. function getnotesImages()
  17. { //get regarding object id
  18. var regardingObjectId=window.parent.Xrm.Page.data.entity.getId();
  19. //assign notes entity name
  20. var entitySchemaName="Annotation";
  21. var odataQuery = "?$top=1&$select=AnnotationId,DocumentBody,MimeType&" +
  22. "$filter=ObjectId/Id eq guid'" + regardingObjectId +
  23. "' and IsDocument eq true and startswith(MimeType,'image/') ";
  24. //call retrieveMultipleRecords method in SDK.REST javascript script library
  25. SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function (error) { alert(error.message); }, function(){});
  26. }
  27. //process callbanck result
  28. function getnotesImagesCallback(resultSet)
  29. {
  30. if (resultSet.length > 0) {
  31. var mimeType = resultSet[0].MimeType;
  32. var body = resultSet[0].DocumentBody;
  33. imgControl.src="data:" + mimeType + ";base64," + body;
  34. document.getElementById('imagediv').appendChild(imgControl);
  35. }
  36. }
  37. </script>
  38. <meta charset="utf-8"></head><body style="zoom: 1;">
  39. <div style="width: 100px;" id="imagediv"></div>
  40. </body></html>

Deploy HTML page and SDK.REST library using web resource

Use following procedure to deploy a HTML page and SDK.REST library in Microsoft CRM.

  • Navigate to Settings -> Customization-> Customize the System from the top navigation bar
  • Navigate to Components -> Web Resources-> New
  • Fill in the details as in the following screen:

  • Click on the browse button and select your HTML web resource.
  • Click on Save and then Publish
  • Navigate to Components -> Web Resources-> New
  • Fill in the details as in the following screen:

  • Click on browse and select SDK.REST.js from Microsoft CRM SDK

Note: Please refer to my previous article for the SDK.REST.js location.

Now we can place our HTML web resource in the account entity form by navigating to Insert -> Web Resource options. Save your changes and then publish the account entity form.
When you try to open your account record you should be able to see the attached images loaded into the HTML web resource.
HIMBAP | Need any help in Microsoft CRM 2015 Contact US !!