Microsoft Dynamics CRM Team Blog: Displaying a Contact’s Facebook Picture in Microsoft Dynamics CRM 2011

[Blog bot]

Источник: http://blogs.msdn.com/b/crm/archive/...-crm-2011.aspx
==============

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:



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.



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.



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.



Related Topics

• Edit the main form for an entity
• Add or edit an image web resource
• Web Resources for Microsoft Dynamics CRM

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.

 



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.



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”.



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



Related Topics

• Form Scripting
• Add or edit event scripts for fields and forms
• Write Code for Microsoft Dynamics CRM Forms

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'' 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