Adding an Image Carousel to a CRM 2011 Form

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. 


<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;">
                <button id="prev"><<</button>
                <div id="carousel">
                    <ul id="carousel-ul">
                <button id="next">>></button>
<script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>
   2: <script src="" type="text/javascript">
   1: </script>
   2: <script src="scripts/jcarousellite_1.0.1.min.js" type="text/javascript">
   1: </script>
   2: <script src="scripts/ImageCarousel.htm.js" type="text/javascript">


$(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                
            // Wire-up jCarouselLite to the carousel div            
                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.


Comments (3)

  1. Dave Block says:

    Trying to get this working, but var entityId = context.getQueryStringParameters().id; fails to return the guid of the record.  If I hardcode in the guid like var entityId = "CEE82AD0-CA45-E011-8C9B-1CC1DEE8DAA5";

    then the code works great andI can see the pictures from the annotations.  

    any ideas?

  2. Planet Technologies says:

    Check the option for "Pass record object-type code and unique identifier as parameters" on the html web resource 🙂

  3. Leo says:

    HI, If there is only image attached, we can't see any image, have you ever encountered this issue?

Skip to main content