In this blog, we highlight a lesson learned when we used a Dynamics 365 Customer Engagement online data source connector, called Instance Web API, for Power BI reports.
Custom report application development with the SSRS Report Viewer server component is still a somewhat common practice these days. The SSRS Report Viewer can be placed in an externally hosted web application for display in an iframe or a dashboard inside of Dynamics 365 for SSRS style reporting with drilldowns to sub-reports, etc. When combing different technologies to achieve a certain functional goal, there are sometimes unexpected “gotchas” that pop up, requiring unexpected time and effort to wrap your head around and reach a resolution. In today’s post, we’ll cover one such “gotcha” we recently discovered while working with jQuery and the SSRS Report Viewer in a tabbed reporting format.
Our goal was to display three separate SSRS Report Viewer controls in a jQuery tab control inside of a dashboard in Dynamics 365. When opening the dashboard inside of Dynamics 365, the jQuery tabs would use asynchronous rendering to load each of their SSRS Report Viewer controls with different reports. The parameters for the three reports were predetermined and static in the SSRS reports based upon date ranges. While all three load, tab index zero is displayed first while the other two tabs are basically div tags that are hidden on the page.
When flipping back and forth between the jQuery tabs and drilling into the sub-reports, the SSRS Report Viewer tool bar on each of the SSRS Report Viewer controls would eventually disappear and leave you stuck in a sub-report with no way to navigate back to the parent report. Eventually all three tabs and report viewers ended up in this state! This was obviously not good for the end-user experience. The issue is linked to the behavior (or a bug) in the Report viewer control and occurs when hiding and showing the div that is wrapping the SSRS Report Viewer control, such as what happens with jQuery tabs. After much debugging with the browser developer tools and research on Microsoft and jQuery forums and blogs, a workaround was still nowhere to be found.
Some old fashioned “rolling up the sleeves” and digging into the SSRS control itself led us to discover the “RecalculateLayout()” method in the control. Placing a simple java script function call on the “onclick” event of each of the jQuery tabs locates the SSRS Report Viewer control on the client’s side page and then invokes this method, it refreshed control and reloaded the lost (or soon to be lost) SSRS Report viewer tool bar. This is not necessary if you are only using a single report SSRS Report Viewer control or even multiple SSRS controls on a web page if you are not using a jQuery tab control or something else that hides and shows the div tags in which the controls are wrapped.
We hope you found this solution to a common “gotcha” helpful. Don't forget to subscribe to our blog for more helpful tips and tricks.
As always, happy Dynamics 365’ing!