This article was written by Clint Warriner, a Senior Escalation Engineer on our support team.
Being able to render an image that is an attachment to a note or email message client side in CRM 2011 is possible by running through the example in the SDK (http://msdn.microsoft.com/en-us/library/gg328429.aspx). But this example would require you have access to execute the code server side since the examples are written in C# and VB.
This is true for both CRM on premise and CRM Online. For CRM on premise it is slightly easier to accomplish this task since you have access to the CRM server and can create another website to host the server side code.
However for CRM Online this would require that you leverage some server you do have access to in order to host the server side logic. This is a lot of extra effort.
However there is another option:
CRM 2011 HTML Web Resource + CRM Organization Data Service + DATA URI = Client Side Solution.
CRM Web Resources
In CRM 2011 you have access to upload web resources to provide customized experiences on your entity forms, ribbon, etc. However this is limited to code that will execute client side. This includes HTML pages, and JavaScript files.
Data URI
Most modern web browsers support Data URI. Data URI is a way to provide embedded resources in your HTML content as if they were external resources. You can read more about Data URI here (http://en.wikipedia.org/wiki/Data_URI_scheme)
CRM Organization Data Service (ODATA)
With CRM 2011 you get a handy REST endpoint that can provide you with data in CRM. This includes email attachments. Read more about the REST endpoint here (http://msdn.microsoft.com/en-us/library/gg334279.aspx)
The Solution
If we take all three of the items listed above and put them together we can do some really cool things. For the purpose of this post we can render images on emails client side.
We can create an HTML web page which has an input element, a table, and JavaScript that will make an AJAX call to the CRM Organization Data Service (REST endpoint). This REST web service call will get the body content for some image attached to an email activity. Once completed we can save this HTML web page as a CRM Web Resource.
<body>
<inputid="attachmentFileNameText"type="text"onchange="getImages()"/>
<tableid="attachment_content_table"/>
</body>
function getImages() {
var fileName = attachmentFileNameText.value;
var context = GetGlobalContext();
$.getJSON(context.getServerUrl() + "/XrmServices/2011/OrganizationData.svc/ActivityMimeAttachmentSet?$select=Body,MimeType&$filter=FileName eq ('" + fileName + "') and startswith(MimeType,'image')", function (data) {
if (data.d.results.length > 0) {
var singleRecord = data.d.results[0]
loadImage(singleRecord);
}
});
}
function loadImage(record) {
while (attachment_content_table.rows.length > 0) {
attachment_content_table.deleteRow(0);
}
var newRow = attachment_content_table.insertRow(0);
var newCell = newRow.insertCell(0);
newCell.innerHTML = "<img src='data:" + record.MimeType + ";base64," + record.Body + "'/>";
}
File attachments and email attachments are stored in CRM using base64 encoding. This is very fortunate since DATA URI likes base64. We can take the body of the file attachment or the email attachment retrieved using the REST endpoint and use this as an image tag source, on our HTML web page, specifying that the source is to be rendered using DATA URI.
The end result is a simple way to retrieve file/email attachment data from CRM and render it in different ways; all client side and supported in CRM on premise and CRM Online.
