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. 

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

   2: http://span

   2: <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:

Capture

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.

@devkeydet

Leave a Reply

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

WordPress.com Logo

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s