Creating reports in CRM is fairly easy and well defined OOB procedure. Same holds for Dashboards. To recall, types of elements you can add to Dashboards are following:

  • Charts
  • List
  • IFrame
  • Web Resource

But what if you have client with request to add some of their well defined reports to the dashboard. This feature doesn’t come OOB. With CRM 2011, suggested (and working) way to do this was by adding report URL as an IFrame to Dashboard. However, this got broken with new rendering of IFrames in CRM 2013. So if you try adding report URL as IFrame to CRM 2013 (and versions after) Dashboard, it will only render report header, but not the report content itself (see picture below).

Report added as IFRAME

Report added as IFRAME

The purpose of this post is to show you how to make it possible even in versions of CRM after 2011. To make it happen, we will actually not use IFRAME element in Dashboard, but WebResource instead. Here is quick outline to what needs to be done:

  1. Create Report you want to add to Dashboard
  2. Create Dashboard where you want to add Report
  3. Create new HTML WebResource which will be used to render report on Dashboard (will show you the code)
  4. Add WebResource to Dashboard and link it with Report

In the next steps we will go through details on how to accomplish steps 3. and 4. above, assuming that 1. and 2. are OOB feature that advanced customizer (developer) of CRM solutions should know how to do.

Creating WebResource for rendering Report on Dashboard

First, go to Settings->Solutions and select solution where you want to add WebResource. Click on the WebResources and then on New on the top menu. Add new HTML WebResources with schema name as shown on the picture below!

HTML WebResource for rendering report on dashboard

HTML WebResource for rendering report on dashboard

Click on the TextEditor and copy/paste content of the script available at this gist. This script is HTML with additional JavaScript helper functions. Main function that gets executed is named SetReport() and it relies on ClientGlobalContext.js to  parse parameter named ‘data’. This parameter will be passed as URL query parameter, and we will see how when we go through step of adding WebResource to Dashboard. Save and publish new WebResource.

IMPORTANT NOTE: For this script to work properly, you need to set relative url to ClientGlobalContext.js according to the schema of the new WebResource. In our example schema is cs_/HTML/ReportControl.html. When the script gets loaded in the Dashboard, its absolute path will be https://<your.crm.org.com>/WebResources/cs_/HTML/ReportControl.html. However, script ClientGlobalContext.js resides in default WebResources location (as static globally available script), i.e. https://<your.crm.org.com>/WebResources/ClientGlobalContext.js. As you can see folder WebResources is two levels up from our folder HTML, so in ReportControl.html we set reference to ClientGlobalContext.js as:
<script src=../../ClientGlobalContext.js.aspx></script>

Adding Report to Dashboard using WebResource

Once we have WebResource for rendering report, its fairly easy to add it to the dashboard. WebResource comes as standard OOB element that can be added to Dashboard. First step is to open the dashboard where you want to add report (with sufficient privileges to edit it). Click on Edit, and then on any empty section add WebResource to Dashboard. New window will pop-up, as shown in the picture below.

Adding WebResource to Dashboard with reference to Report GUID.

Adding WebResource to Dashboard with reference to Report GUID.

Notice parameter named ‘Custom Paremeter(data)‘. Its purpose was already mentioned. In essence it allows us to pass any URL query parameters to our WebResource. By default value you enter in this field is added as ‘data‘ parameter, so URL to our WebResource will be called with this parameter as in: https://<your.crm.org.com>/WebResources/cs_/HTML/ReportControl.html?data=<REPORT_GUID> . In order for our WebResource to work correctly and actually load our Report, we need to find GUID of the Report which is being added to Dashboard. To do this, open your CRM in new window, find your report and run it. It will be loaded in the browser in URL which contains GUID as in the picture below.

Report GUID

Retrieving report GUID from running report.

Copy/Paste your Report GUID to the WebResource field ‘Custom Parameter (data)‘. Click OK on your Web Resource Properties dialog. After this, you are done with adding WebResource to Dashboard. Save your dashboard and click close ribbon button. This will close Edit mode and display your Dashboard as it will be visible to all users.

Your reports should now be rendered correctly, as shown on the picture below.

Dashboard with Report

Dashboard with Report

Now you can still add valued reports to your Dashboards and make your Sales management happy!