Creating HTML Web Resource to Show Image Attached in Notes: Part 1

Microsoft Dynamics CRM 2013 introduced a new entity image feature so we can have one image attribute and can use that to store an entity image. But we can have only one image attribute per entity. So in this article we will show how to get an image from Notes using JavaScript.

Microsoft Dynamics CRM stores all the notes and attachments in an annotation entity. Most of the out-of-box entities had relationships with this entity, but when creating our custom entity we can specifically select if we want to associate our custom entity with Notes or not using the following option under Communication & Collaboration. Keep in mind that once you enable this option, there is no supported way to disable this option, but if you are not sure, if you need Notes or not when you create an entity then it is better to leave this option un-selected, so that you can select this option later if required.

Note: The default size for a Notes attachment is 5 MB but if required you can increase this limit up to 32 MB.

For our demo purposes we will use an account entity that already has a relationship with a Notes entity. We will utilize the attachment feature to attach an image and use that in our HTML web resource for display. So basically we will implement the following procedure. 

•     Get entity image from Notes.
•     Create and deploy HTML web resource.

Get entity image from Notes

We can attach an image in Notes using the social pane in the Microsoft Dynamics CRM 2015, as in the following screen. Once the image is attached to Notes as in the following:

 

We can retrieve it using an OData or Soap endpoint, we will use OData endpoints in this article. To retrieve data from Notes we need to query the annotation entity based on the ObjectId field. We can get an entity id using the getId method. We need to write the retrieve multiple call to get the image record, we can use the SDK.REST.js JavaScript library that comes with Microsoft CRM SDK and call it's retrieveMultipleRecords method to get data based on our query. Please download the Microsoft CRM SDK to get the details about this library and it's methods.

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);
     }
}

Note: You can download the latest CRM SDK from here and find SDK.REST.js under SDK\SampleCode\JS\RESTEndpoint\JavaScriptRESTDataOperations\JavaScriptRESTDataOperations\Scripts

 

Stay tuned for our next article to create and deploy a HTML web resource to use the preceding method to get and display an image.

 

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