Showing an SSRS Report in a SharePoint Modal Dialog

One of the challenges I have had recently was trying to integrate the awesome features of SQL Server Reporting Services and SharePoint. Our installation of SSRS is in SharePoint Integrated mode so if you are following along you will need to make sure you are running the same setup.

My objective with this project was to add a Content Editor web part to all 500 of our dashboard sub sites that pointed to a single file that use some javascript to open a SharePoint modal dialog window with the report in it. This report had open in a  window that was 1024x800 in order to see the whole report. Also for this particular project I was not worried about refreshing my dashboard page once the modal window was closed, so that is not included in this script.

I created a document library called scripts that lives in the root site of my site collection, inside I created a text file called reports.txt, every single content editor webpart points to this file. The final thing to note here is that I am getting the order number from the url, which also happens to be my sub sites name, I need this number to pass to my report so it will generate no matter which Order dashboard you go to.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<script type="text/javascript"> // The button id is report var elements = document.getElementsByName('report'); // Get the current url so we can grab the order number var addy = window.location.href; // The order number is after the 4th / in the url var ton = addy.split('/')[4]; // Set the url to the report in a variable // In the url I am specifying some explicit options for the parameters and the tool bar that only allows the report to be exported var report = "http://sp2010/bi/_layouts/ReportServer/RSViewerPage.aspx?" var report += "rv:RelativeReportUrl=/bi/DailyReports/Daily.rdl&rp:Order=" + ton + "&rv:HeaderArea=None&rv:ParamMode=Hidden&rv:ToolBarItemsDisplayMode=128"; function openReport() {   var reportWindow = SP.UI.$create_DialogOptions(); reportWindow.url = report; reportWindow.width  = "1024"; reportWindow.height = "800"; reportWindow.title = "Order Number: " + ton + " Daily Report"; reportWindow.allowMaximize ="true"; reportWindow.showClose ="true"; SP.UI.ModalDialog.showModalDialog(reportWindow); } </script> // Here I centered the button to the middle of the web part <div style="text-align: center;"> </div> <div style="text-align: center;"> </div> <div style="text-align: center;"> </div> <div style="text-align: center;"> </div> <div style="text-align: center;"> </div> <div style="text-align: center;"> </div> <div style="text-align: center;"> </div> <div class="ms-rteFontSize-3" style="text-align: center;"> <input id="report" onclick="openReport();" type="button" value="View Report"></div>