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: http://span

   2: http://span

   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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s