Creating html web resource to show image attached in Notes Part 2


In our previous post we explained how we can get image from notes using OData endpoints, in this post we 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:

  •   Create html page
  •   Deploy html page and SDK.REST.js using web resource

Create html page

Create html page using any html editor, use following code for html page

<html lang=”en-us”><head>
<script src=”../ClientGlobalContext.js.aspx”></script>
<script type=”text/javascript” src=”SDK.REST.js”></script>
<script type=”text/javascript”>
//check if document is loaded or not
var imgControl = document.createElement(“IMG”);
//Check if documented loaded fully
document.onreadystatechange = function () {
if (document.readyState == “complete”) {
getnotesImages();
}
}
//this function is used to get image from notes
function getnotesImages()
{ //get regarding object id
var regardingObjectId=window.parent.Xrm.Page.data.entity.getId();
//assign notes entity name
var entitySchemaName=”Annotation”;
var odataQuery = “?$top=1&$select=AnnotationId,DocumentBody,MimeType&” +
“$filter=ObjectId/Id eq guid'” + regardingObjectId +
“‘ and IsDocument eq true and startswith(MimeType,’image/’) “;
//call retrieveMultipleRecords method in SDK.REST javascript script library
SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function (error) { alert(error.message); }, function(){});
}
//process callbanck result
function getnotesImagesCallback(resultSet)
{
if (resultSet.length > 0) {
var mimeType = resultSet[0].MimeType;
var body = resultSet[0].DocumentBody;
imgControl.src=”data:” + mimeType + “;base64,” + body;
document.getElementById(‘imagediv’).appendChild(imgControl);
}
}
</script>
<meta charset=”utf-8″></head><body style=”zoom: 1;”>
<div style=”width: 100px;” id=”imagediv”></div>
</body></html>

Deploy html page and SDK.REST library using web resource

Using following steps to deploy html page and SDK.REST library in MS CRM.

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

saveimg

  • Click on browse button and select your html web resource.
  •        Click on Save and then Publish
  •        Navigate to Components -> Web Resources-> New
  •        Fill details like following screen

sdk.rest

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

Note: Please refer previous post for SDK.REST.js location.

Now we can place our html web resource in the account entity form by navigating Insert  -> Web Resource options. Save your changes and then publish account entity form.

form

When you will try to open your account record you should be able to see attached images loaded into html web resource.

img

HIMBAP | Need any help in Microsoft CRM 2015 Contact US !!

Advertisements

2 Comments

Filed under MS CRM 2011, MS CRM 2013, MS CRM 2013 Web Resource, MS CRM 2015

2 responses to “Creating html web resource to show image attached in Notes Part 2

  1. Michael Parker

    Hi there, should this solution work in CRM Online? I’ve followed the steps but seemingly can’t get it to work?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s