SharePoint Integration for Microsoft Dynamics CRM can be used as a powerful tool to keep documents organized to their related CRM records. If you would like to find out the basics of setting up the integration and document management then you can read more about it here.

Using the built in document management interface, you may decide that you need pictures attached to the CRM record and would like them to be viewable on the CRM record. This would be useful if you would like to be able to upload and view pictures within the CRM interface without having to go to the SharePoint site. These are the steps I followed to achieve that.

Required Resources

To have four different web resources to accomplish the picture carousel. I have two resources that are utilizing a current carousel that I found online. You can choose whatever carousel meets your needs, but I used Slick Carousel. The other two resources (one JavaScript file for the logic, and one HTML resource to display the carousel on the record) are the utilized for getting the pictures from SharePoint and displaying them.

• Base URL
• Site URL

These can be found in the URL of your SharePoint site (i.e. http:// spDev /demo)

Using SharePoint API

Being able to retrieve information from SharePoint is made possible by using the SharePoint REST API interface. You can find more information here, but the quick and dirty of it is that you query information using the URL in the browser window. They have built out an easy-to-use way to retrieve almost any information you would want by using just the URL.

Example URL:

http://spDev/demo/_api/web/lists/getByTitle(‘Equipment’)/items?$select=FileRef

In this URL we are utilizing the lists component to use ‘getByTitle’ to retrieve the ‘Equipment’ document library. The ‘/items’ says that we want all the items within that library. Then we have a select statement to return the fields that we specify, for this example we  only specified one, but you can specify more than one.

From here you Right-Click > View Source, and this will bring up your XML. I recommend throwing it into an XML editor so it will be readable. When it’s formatted properly, it should look something like this:

 

 <entry m:etag="&quot;2&quot;">
 <content type="application/xml">
  <m:properties>
  <d:FileRef>/demo/new_equipment/Test_D6E909ABD83AE51180CA000D3A3028B0/tire.jpg</d:FileRef>
  </m:properties>
  </content>
  </entry>

From the results above we see that our query returned one FileRef that resides in the properties tag. I have cut out some of the extra information that will be standard on every call so that we can focus on the information relevant to our purpose.

As you can see, building the URL is going to be a very important piece of this puzzle, as it will need to be dynamic depending on the record we are on, and the URL provides all the information needed to create the picture carousel.

Let’s get to it.

Building the URL

To make the call to the SharePoint REST API you will need to make an AJAX request with a dynamic URL to reflect the current record you are working on. By default, when you add a document location to an entity, it creates a document library with the Display Name of your entity, NOT the logical name. In our example above we see that “getByTitle” retrieves the Library with the title in the parentheticals. The logical name is “new_equipment”, but the Display Name for that entity is “Equipment”.

Within that document library it houses all the folders for each record separately. They are titled with the name of the record, with the record GUID following (recordName_21EC20203AEA4069A2DD08002B30309D). All the necessary fields can be retrieved from the record using the SDK.

 

//build the fileleafref for each piece of equipments base folder
var fileleafref = "/" + siteurl + "/" + Entity + "/" + name.replace(":", "-") + "_" + GUID.toString().replace("{", "").replace(/-/gi, "").replace("}", "");

//build the final URL
var requestURI = baseurl + "/" + siteurl + "/" + "_api/web/lists/getByTitle('" + DisplayName + "')/items?$select=Title,FileLeafRef,FileDirRef,FileRef,DocIcon,FileDirRef&$filter=startswith(FileRef ,'" + fileleafref + "') ";

To retrieve only files from a specific folder inside of Equipment, I decided to use the fileleafref to filter to everything for that record. By looking at the starting leaf reference for each file you could determine which files belonged to which record even if they are buried in other folders inside that record folder. Once I have that built out I can insert it into my URL to be sent off to SharePoint.

Making the Call

To make the request to SharePoint we will be utilizing jQuery’s Ajax function for performing asynchronous http requests.

Making the request to SharePoint from CRM will be easy if both of them are within the same domain. If this is not the case then you will need to add custom headers to the SharePoint web.config.

 

<customHeaders>
<add name="Access-Control-Allow-Origin" value="http://crm2015" /> <--(this is the domain where your CRM is located. This can also be * for all) 
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>

After you have added the headers, we can continue making the AJAX request.

 

$.ajax({
   url: requestURI,           //final URL
   type: "GET",               //Not POST, GET
   headers: { "accept": "application/json;odata=verbose" },   //type to get back
   crossDomain: true,         //is crossDomain
   xhrFields: { withCredentials: true },   //needed to pass authentication
   success: onDataReturned,   //run this function on success
   error: onError             //run this function on error
});

Now that we’ve made the call, we will need to translate the information we receive into a picture in a carousel. You can see that for the ‘success’ property I have specified a function to run if it succeeds, this function will do all the work for us.

Using the Results

As I said above, there is a function called ‘onDataReturned’ that runs when the Ajax call succeeds. This is a snippet of what needs to be done to add the picture into the carousel html page. I have a custom function called ‘isPicture’ that takes the documents file extension (.DocIcon) and compares it to a list of compatible picture types.

 

function onDataReturned(data) {
  var odataResult = data.d.results; //get array of results from JSON response
  $.each(odataResult, function (i) { //loop through the results
     var total = baseurl + odataResult[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][i].FileRef; //combine w/baseurl to form image location
     if (isPicture(odataResult[i].DocIcon)) { //if the result is a picture
       $('.container').append('<div ><img src="' + total + '" "class="images"/></div>'); //add the value to div inside of div wrapper
}});

Next we will need to activate slick on our html page. There are many different ways to activate slick with many different properties that you can choose from. This is the base style that I use and then it’s pretty easy to tailor it from there.

 

if ($('.container').children().length > 0) {
 //activiate slick on the class container
   $('.container').slick({
      slidesToShow: 4, //shows 4 slides
      infinite: false,
      slidesToScroll: 2, //scrolls 2 slides
      dots: true, //shows the dots
      arrows: false
});
}

Watching the Magic

If you have your html page loaded on the record you want to see you should be seeing a picture carousel.