Sunday, October 31, 2010

Tito-Z’s Iframe-embedded Image Code

[Full Disclosure: The following, true story happened within the CRM Development forums.]

With blessings of the author, Tito-Z, whose real name I don’t know, I’d like to present his code for taking an image file attachment from an Annotation record and displaying it within an Iframe dynamically.  Since I helped him locate the solutions that he used in his code, Tito-Z graciously granted me permission to reproduce his work here.

Originally, Tito-Z started with Adi Katz’ code.  However, he soon discovered that Update Rollup 7 (and later) thwarted its use.  Unfortunately, the work-around left him with a file-stream and not a valid URL to place in a src attribute for an image element.  When I did a little searching, I found some resources that showed how to assemble an inline-data URI.

I then left Tito-Z to do the dirty work—not my usual style, but since he had demonstrated proficiency in CRM-hacking, I figured the project was in good hands.  He did not disappoint.  The following, unaltered code is his example for reproducing an image within a form’s Iframe, after retrieving the image data from an Annotation (file attachment) record:

[Caveat:  The following code works only for IE8, as earlier versions of IE do not support the necessary inline-data URIs employed by the code.]

// *********************************************************
// To fetch the picture file from the Notes Entity 
// *********************************************************

var xml = "" +
"<?xml version='1.0' encoding='utf-8'?>" +
"<soap:Envelope xmlns:soap='' xmlns:xsi='' xmlns:xsd=''>" +
GenerateAuthenticationHeader() +
"<soap:Body>" +
"<Fetch xmlns=''>" +
"<fetchXml>" +
"&lt;fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'&gt;"+
"&lt;entity name='annotation'&gt;"+
"&lt;attribute name='filename'/&gt;"+
"&lt;attribute name='documentbody'/&gt;"+
"&lt;attribute name='annotationid'/&gt;"+
"&lt;order attribute='subject' descending='false'/&gt;"+
"&lt;filter type='and'&gt;"+
"&lt;condition attribute='isdocument' operator='eq' value='1'/&gt;"+
"&lt;condition attribute='filename' operator='eq' value='mex9.jpg'/&gt;"+
" </fetchXml>" +
" </Fetch>" +
" </soap:Body>" +

// Prepare the xmlHttpObject and send the request.
var xHReq = new ActiveXObject("Msxml2.XMLHTTP");
xHReq.Open("POST", "/mscrmservices/2007/CrmService.asmx", false);
xHReq.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
xHReq.setRequestHeader("Content-Length", xml.length);

// Capture the result.
var resultXml = xHReq.responseXML;

// Check for errors.
var errorCount = resultXml.selectNodes('//error').length;
if (errorCount != 0)
 var msg = resultXml.selectSingleNode('//description').nodeTypedValue;

// Process and display the results.

// Capture the result and UnEncode it.
var resultSet = new String();
resultSet = resultXml.text;


// Create an XML document that you can parse.
   var oXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
   oXmlDoc.async = false;
// Load the XML document that has the UnEncoded results.


// Display the results.
var results = oXmlDoc.getElementsByTagName('result');

for (i=0;i < results.length;i++)
    {var docBody= results[i].selectSingleNode('./documentbody').nodeTypedValue;}



var image = "<img alt='', src= 'data:image/jpeg;base64," + docBody + "'> </img>";

ff = document.getElementById("IFRAME_Picture");



Thank you, Tito-Z, for your success in this endeavor and for allowing me to host it here, on my blog.