Freelance Development for Dynamics CRM: MS CRM 2011: Embed context report to left navigation pane

Friday, May 25, 2012

MS CRM 2011: Embed context report to left navigation pane

Idea of this blog post is how to embed report to left navigation pane of Crm editing form. I have found this brilliant post which describes how to embed report into IFrame located on Crm editing form and I took this post as basis for current post.
First step is to create report which will take current record as parameter. Create new report project:

Select Microsoft Dynamics Crm Fetch as a type of data source and input parameters for connection to CRM and click Next:

Input Fetch Xml query for report. Don’t forget to add parameter for filtration by current record:

Define columns that would be displayed at initial layout:

Give your report some name and click Finish:

Initial layout is shown at following screenshot:

I changed report’s layout and after it looked like:

And result of report work:

Upload report to system and test how it works:

Recheck that parameter is passed from URL to report:

Report’s part is finished. Next part is embedding. Create html webresource which will contain following code (main function of this webresource is to show report inside iframe):

<html>
<head>
   <title></title>
   <script type="text/javascript">
       OnLoad = function () {
           if (window.location.href.indexOf('webresourceeditor') != -1)
               return;

           var parentEntity = window.parent.Xrm.Page.data.entity;
           var reporturl = window.parent.Xrm.Page.context.prependOrgName(
           "/crmreports/viewer/viewer.aspx?action=run&helpID=ContextReport.rdl&id=%7b9A273ADD-5BA6-E111-B22C-080027CD4540%7d&p:recordid="
           + parentEntity.getId());
           var reportFrame = document.getElementById("reportContainer");
           reportFrame.src = reporturl;
           reportFrame.onreadystatechange = function () {
               if (reportFrame.readyState != "complete")
                   return;
               var menubar = reportFrame.contentWindow.document.getElementById('crmMenuBar');
               if (menubar != null) {
                   menubar.parentNode.parentNode.style.display = "none";
               }

               var resultsFrame = reportFrame.contentWindow.document.getElementById('resultFrame');

               var timerId = window.setInterval(function () {
                   var resultsFrame = reportFrame.contentWindow.document.getElementById('resultFrame');
                   if (resultsFrame == null)
                       return;

                   if (resultsFrame.contentWindow.document.getElementById('ParametersRowreportViewer') == null)
                       return;

                   window.clearInterval(timerId);
                   resultsFrame.contentWindow.document.getElementById('ParametersRowreportViewer').style.display = "none";
                   resultsFrame.contentWindow.document.getElementById('ParametersRowreportViewer').nextSibling.style.display = "none";
               }, 1000);
           }
       }

       OnResizeComplete = function () {
           var fr = window.document.getElementById('reportContainer');
           fr.style.width = (document.body.offsetWidth - 30) + 'px';
           fr.style.height = (document.body.clientHeight - 30) + 'px';
       }
   </script>
   <meta charset="utf-8">
</head>
<body onresize="OnResizeComplete();" contenteditable="true" onload="OnLoad();">
   <iframe id="reportContainer" src="about:blank"></iframe>
</body>
</html>