Load image dynamically in Print Preview form in CRM 2011 using JavaScript

As we know Microsoft Dynamics CRM 2011, provide the capability to view the entity form in print preview mode.

The print preview mode is not fully compatible with the script that is deployed – say the script that displays the image dynamically in the print preview mode. This limitation can be overcome with the help of work around way that is discussed below.

SCENARIO:-

Dynamically load the image on print preview mode that is attached to the Notes.

Solution:-

Configured the web-resource, retrieve the image and load it.

Below steps to configure the web-resource:-

Step 1     Configure the new HTML Webresource file in the form. 

Step 2     Retrieve the image file and load into the configured webresource (above).

Step 3     Below code snippet to retrieve the image (attached to the Notes) and configured into the   webresource.

Code Snippet:

function ShowPrintPreviewImage() {

    var serverUrl = top.opener.Xrm.Page.context.getClientUrl();

    var odataPath = serverUrl + "/XRMServices/2011/OrganizationData.svc";

    var retrieveReq = new XMLHttpRequest();

    var CurrentRecordId = top.opener.Xrm.Page.data.entity.getId();

    if (CurrentRecordId != null) {

        retrieveReq.open("GET", odataPath + "/congruent_accountSet(guid'" + CurrentRecordId + "')/ congruent _account_Annotations", false);

    }

}

function retrieveReqCallBack(retrieveReq) {

    for (var i = 0; i < entity.results.length; i++) {

        var fileName = new Array(100);

        var sampleimagefileContents = null;

        fileName[i] = entity.results[i].FileName;

        if (fileName[i] == "sampleimage.jpg") {

            sampleimagefileContents = "data:image/jpg;base64," + entity.results[i].DocumentBody;

        }

    }

}

Below Steps to load the image dynamically in the Print Preview Mode:

Step 1                 Create/Configure another Web-resource (Image displayed dynamically) in the entity form. 

Step 2                 Make invisible the HTML Web-resource in the footer section.

Step 3                 The below method (displayimage) needs to be invoke in the on-load of invisible HTML (refer above).

Code Snippet:

function displayimage() {

        if (top.location.href.indexOf("/print/print.aspx") != -1) {

          var img = ShowPrintPreviewImage();

            if (img != null) {

                img = top.frames[0].document.getElementById("WebResource_SampleImageSection");

                img.src = sampleimagefileContents ;

            }           

        }

    }

Step 4                 Finally, the image will be display in the Print Preview Mode as shown below.

Hope this blog will be more helpful for those who come across this scenario!!!!!