Photos remind you of your customers better than their names. Wouldn’t it be great to see the photos of your customer when you open the contact form? This blog will show you how to display profile picture using Microsoft Dynamics CRM 2011 (online and on-premise) customizations and client side extensibility.

All you need is to follow 2 simple steps:

1. Customize the contact form to put a picture placeholder.

2. Write custom JavaScript to retrieve profile picture.

    a. In this blog we will use JavaScript code to automatically retrieve profile picture from Facebook using Facebook public API.

    b. Alternatively, we will display profile picture from note attachments in the contact form if Facebook profile is not provided for the contact.

Before we go into details, let’s take a look at the final result:

clip_image002

Customize the Contact Form

First, let’s rearrange the first section in the General tab of the contact form. We move “Business Phone”, “Home Phone” and “Mobile Phone” fields to the left column to make spaces for the profile picture.

clip_image004

Then, create, upload and publish the web resource that is used as the default profile picture, and add the image web resource to the form (the space we reserved in the previous step). The web resource name, “WebResource_ProfilePicture”, is a unique identifier used to reference this web resource. Later we will write JavaScript code to access it and change the display picture. In the formatting tab we will use the one column layout, set the number of rows to 6 and use the original image size.

clip_image005 clip_image006

After saving and publishing our changes, you should see the default profile picture showing up when you create a new contact or open existing contacts.

clip_image008

Related Topics

Display the Profile Picture from Facebook

Facebook provides the Graph API which can be used to retrieve the profile picture of a user or group via a simple HTTP GET request. Let’s create a custom text field to store a contact’s Facebook profile URL. We will use the Facebook profile URL to retrieve the contact’s Facebook profile picture.

clip_image010 

clip_image012

We also need JavaScript code to translate a Facebook profile URL to a profile picture URL and replace the default profile picture we added to the form in the previous step. Let’s create a new JavaScript web resource with the following code.

function profilePicture_onFormLoad() {
    // make sure there's a profile picture web resource added in form.
    var profilePictureElement = Xrm.Page.getControl("WebResource_ProfilePicture");
    if (!profilePictureElement) {
        return;
    }
 
    var facebookAttribute = Xrm.Page.getAttribute("new_facebook");
    if (facebookAttribute) {
        var profileUrl = facebookAttribute.getValue();
        if (profileUrl) {
            var profilePictureUrl = getProfilePictureUrl(profileUrl);
            if (profilePictureUrl) {
                // set src attribute of default profile picture web resource.
                profilePictureElement.setSrc(profilePictureUrl);
                return;
            }
        }
    }
}
 
function getProfilePictureUrl(profileUrl) {
    // trim trailing forward slash in url
    profileUrl = profileUrl.replace(/\/*$/, "");
 
    var patterns = [];
    // http://www.facebook.com/userid
    patterns[0] = /^http:\/\/www\.facebook\.com\/([a-zA-Z0-9\.]+?)$/;
    // http://www.facebook.com/profile.php?id=1234567
    patterns[1] = /^http:\/\/www\.facebook\.com\/profile\.php\?id=(\d+?)$/;
    // http://www.facebook.com/groups/1234567
    patterns[2] = /^http:\/\/www\.facebook\.com\/groups\/(\d+?)$/;
 
    for (i in patterns) {
        var matches = patterns[i].exec(profileUrl);
        if (matches) {
            return "http://graph.facebook.com/" + matches[1] + "/picture?type=normal";
        }
    }
    return null;
}

Now we need to add the profilePicture_onFormLoad even handler to the contact form. To do this, click the “Form Properties” ribbon button in the form editor, add the JavaScript web resource we just created as a form library and add the profilePicture_onFormLoad method as an event handler.

clip_image014

Now let’s give it a try! First, remember to publish all customizations. Then, create a new contact with a Facebook profile URL (I’m using Microsoft Dynamics CRM as an example: http://www.facebook.com/groups/21809302488). A Facebook profile URL can be obtained by right clicking on a Facebook user name or group name and clicking “Copy shortcut”.

clip_image015

Next, save and refresh the form. You should now see the profile picture of “Microsoft Dynamics CRM” showing up.

clip_image017

Related Topics

Display Profile Picture from Attachment

If you don’t have access to your contacts’ Facebook profile URLs, you can store their profile pictures as file attachments to form notes. In this section, we will use the REST Endpoint for Web Resources to retrieve profile picture file attachments and display them in the same manner as we did in the last section.

First, we need an Open Data Protocol (OData) query for Microsoft Dynamics CRM 2011. The idea is to search for the latest note containing an image file attachment. To ensure we are retrieving only the profile picture and not erroneous images, we only query for notes where the title is set to “Profile Picture”. Manually writing OData queries is not easy. Instead, we would recommend using the CRM 2011 OData Query Designer tool.

Here’s a sample query. You’re free to extend it with additional logic.

/AnnotationSet?$top=1&$select=AnnotationId,DocumentBody,MimeType&$orderby=ModifiedOn desc&$filter=ObjectId/Id eq guid'<current entity id>' and IsDocument eq true and Subject eq 'Profile Picture' and startswith(MimeType,'image/')

The OData query will return the file attachment as base64 encoded content rather than as an image URL. We need to reference the content using Data Protocol (a.k.a. Data URI) to display the picture. However, IE8 imposes a maximum file size of 32KB when using Data URI, but that is enough for a profile picture. Be aware that any profile picture that is larger than 32KB in file size will not be rendered in the contact form. Also, IE versions <= 7 do not support Data URI.

We will need to extend the script written in the previous section by adding addition logic to load a file attachment. Here we use JQuery to send an AJAX request and parse returned JSON objects (Use of JQuery is only my preference and not a requirement. The same can be done using just XMLHttpRequest included in IE). Make sure you add JQuery as a web resource and add it as a form library. JQuery should be added before “Contact Form Script.js”, as shown in the picture below.

clip_image018

Add the following JavaScript code to the profilePicture_onFormLoad method.

// if there's no facebook profile for this contact or we cannot understand facebook profile url
    // try to find attachment with title set to "Profile Picture".
    var entityId = Xrm.Page.data.entity.getId();
    if (entityId) {
        var oDataQuery = getServerUrl() + "/XRMServices/2011/OrganizationData.svc" +
            "/AnnotationSet?$top=1&$select=AnnotationId,DocumentBody,MimeType&" +
            "$orderby=ModifiedOn desc&$filter=ObjectId/Id eq guid'" + entityId +
            "' and IsDocument eq true and Subject eq 'Profile Picture'" +
            " and startswith(MimeType,'image/') ";
 
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            url: oDataQuery,
            beforeSend: function (request) { request.setRequestHeader("Accept", "application/json"); },
            success: function (data, textStatus, request) {
                if (data.d.results.length > 0) {
                    var mimeType = data.d.results[0].MimeType;
                    var body = data.d.results[0].DocumentBody;
                    // 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.
                    profilePictureElement.setSrc("data:" + mimeType + ";base64," + body);
                }
            },
            error: function (request, status, exception) { }
        });
    }

Here’s the definition of the getServerUrl function. More information can be found in Client-Side Context Reference.

function getServerUrl() {

var serverUrl = Xrm.Page.context.getServerUrl();

// trim trailing forward slash in url

return serverUrl.replace(/\/*$/, "");

}

After publishing all customizations we should be able to see profile pictures that are stored as file attachments in contact forms. Let’s open a contact, clear the Facebook profile URL field, and add a note with a profile picture attachment.

clip_image019

Once the file attachment is saved, refresh the contact form. You should see the profile picture in the form.

Now we can see photos of contacts in the contact form with some simple customization steps and less than 50 lines of JavaScript code. This works in both Microsoft Dynamics CRM 2011 Online and On-Premise. Try it out in your own CRM system!

Cheers,

Jiulong Wang