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:
- 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).
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:
- Create Report you want to add to Dashboard
- Create Dashboard where you want to add Report
- Create new HTML WebResource which will be used to render report on Dashboard (will show you the code)
- 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!
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:
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.
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.
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.
Now you can still add valued reports to your Dashboards and make your Sales management happy!