Adding a Profile Picture to a Contact Form – CRM 2011

I recently needed a good solution to add a picture to a CRM 2011 Online form and so I started searching around online for examples. There were not alot of clean and clear examples (or ones that didn’t involve the use of Silverlight!). I also wanted something that was Fetch based that I know would stand up against all these rollups coming down from Microsoft. It has always been reliable for me!

Below is a FetchXML version I created that works great and adds the picture to a Web Resource on the form; where the picture is stored as an associated Annotation. The only thing you need to do is name your Note “Profile Picture” when you go to attach your image. Where I reference ContactScriptLibrary I am calling the standard Fetch library that can found in the SDK .

I hope this helps someone else out there!

function setPictureUrl() {

// Contact ID
var entityId =;

if (entityId) {
// Build Fetch query to retrieve the attached image with name “Profile Picture”
var query = “<fetch mapping=’logical’ count=’1′ version=’1.0′>”;
query += “<entity name=’annotation’>”;
query += “<attribute name=’annotationid’ />”;
query += “<attribute name=’documentbody’ />”;
query += “<attribute name=’mimetype’ />”;
query += “<attribute name=’subject’ />”;
query += “<filter type=’and’>”;
query += “<condition attribute=’objectid’ operator=’eq’ value='” + entityId + “‘ />”;
query += “<condition attribute=’isdocument’ operator=’eq’ value=’1′ />”;
query += “<condition attribute=’subject’ operator=’eq’ value=’Profile Picture’ />”;
query += “</filter>”;
query += “</entity>”;
query += “</fetch>”;

var xmlDoc = ContactScriptLibrary.Fetch(query);
var docBodyNode = xmlDoc.getElementsByTagName(‘documentbody’);
var mimeTypeNode = xmlDoc.getElementsByTagName(‘mimetype’);

// Check attachment body is available
if (docBodyNode != undefined && docBodyNode.length == 1 && docBodyNode[0].childNodes.length == 1) {
var documentBody = docBodyNode[0].childNodes[0].nodeValue;
// Check Mime type
if (mimeTypeNode != undefined && mimeTypeNode.length == 1 && mimeTypeNode[0].childNodes.length == 1) {
var mimeType = mimeTypeNode[0].childNodes[0].nodeValue;

// Populate the image in the Form web resource.
if (documentBody != null && mimeType != null) {
var fileContents = “data:” + mimeType + “;base64,” + documentBody
var img = document.getElementById(“WebResource_ContactImage”);
img.src = fileContents;


, ,

  1. #1 by anonymous on March 5, 2013 - 3:50 am

    how to display retrieved image in a web resource .
    plz provide some example to view image .

    • #2 by Matthew Mead on May 21, 2013 - 11:23 am


      Sorry for the late reply on this. Really all you have to do is associate an image to your Contact card as an Attachment, but remember the name must be “Profile Picture”.
      This is all configurable in the FetchXML statement, see the 2nd condition above. That should do it! Let me know if you are still stuck.

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 )

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

%d bloggers like this: