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 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 & 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.

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

For our demo purpose we are going to use account entity which already have relationship with notes entity. We 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

•     Get entity image from notes
•     Create and deploy html web resource.

Get entity image from notes

We can attach image in notes using social pane in Microsoft Dynamics CRM 2015, like following screen.

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 SDK.REST.js java script library that comes with MS CRM SDK and call it’s retrieveMultipleRecords method to get data based our query. Please download MS CRM SDK to get details about this library and it’s method.

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 latest CRM SDK from here and find SDK.REST.js under SDKSampleCodeJSRESTEndpointJavaScriptRESTDataOperationsJavaScriptRESTDataOperationsScripts.

Stay tuned for our next post to create and deploy html web resource using above method to get and display image.