I recently had a customer request to display the pictures/images attached to a CRM form in an image carousel. This is one of those things where I’ve seen people write a bunch of Silverlight code to accomplish. In my opinion, using Silverlight for this is overkill. Inspired by the second half of the Displaying a Contact’s Facebook Picture in Microsoft Dynamics CRM 2011 post, I modified the OData query slightly to get back all the images attached to an entity and then used jCarousel Lite in conjunction with an HTML web resource.
ImageCarousel.htm:
<html>
<head>
<title></title>
</head>
<body style="background-color: rgb(246, 248, 250); border-width: 0px; margin-bottom: 0px;
margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-left: 0px; padding-top: 0px;">
<table>
<tr>
<td>
<button id="prev"><<</button>
</td>
<td>
<div id="carousel">
<ul id="carousel-ul">
</ul>
</div>
</td>
<td>
<button id="next">>></button>
</td>
</tr>
</table>
</body>
<script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>1:2: http://span2: http://span2: <script src="scripts/ImageCarousel.htm.js" type="text/javascript"></script>
</html>
ImageCarousel.htm.js:
$(document).ready(function () {
var context = GetGlobalContext();
// Get the entity id
var entityId = context.getQueryStringParameters().id;
if (entityId) {
// Build the OData query to get all the images attached to the current entity
var oDataQuery = context.getServerUrl() + "/XRMServices/2011/OrganizationData.svc" +
"/AnnotationSet?$select=AnnotationId,Subject,DocumentBody,MimeType&" +
"$orderby=ModifiedOn desc&$filter=ObjectId/Id eq guid'" + entityId +
"' and IsDocument eq true and startswith(MimeType,'image/') ";
// Get a reference to the carousel ul
var carouselul = $("#carousel-ul");
// Execute the OData query for the images
$.getJSON(oDataQuery, function (data) {
var results = data.d.results;
// Add the results to the carousel ul
for (var i = 0; i < results.length; i++) {
// Build up an img tag surrounded by a li tag to add to the carousel ul
var img = "<li><img src='";
// set src attribute of default profile picture web resource.
// here we use DataURI schema which has 32kb limit in IE8 and doesn't support IE <= 7.
var src = "data:" + results[i].MimeType + ";base64," + results[i].DocumentBody;
img += src;
img += "' width='100' height='100' style='border: 1px solid; margin: 1px;' alt='";
img += results[i].Subject + "'></li>";
// Add the li with imag inside to the carousel ul
carouselul.append(img);
}
// Wire-up jCarouselLite to the carousel div
$("#carousel").jCarouselLite({
btnNext: "#next",
btnPrev: "#prev"
});
});
} else {
alert("could not get entity id");
}});
The end result is what you see below:
We can rotate through all the images attached to this Contact entity by clicking the previous / next buttons. This code will work with any entity that has Notes enabled.
Gold Coast 