Home > jQuery, Reporting Services > How to use jQuery library with MS Reporting Services for DOM manipulation?

How to use jQuery library with MS Reporting Services for DOM manipulation?

Introduction:

This article illustrates user to wire-up popular jQuery library within SSRS and use it to 1) correctly display report page in Firefox browser 2) use jQuery to customize site header/images etc.

 Assumptions:

To follow instructions in this article it is assumed that you have server access to the Reporting Services (application server) as administrator. Alternately, an server admin may need to complete some steps before end users can make use of this enhancement.

How to setup jQuery library?

There are essentially two ways to get this done. I have used method ‘b’ in our case. But both the methods will give the same results.

A)  Append the jQuery script to the end of ‘\Reporting Services\ReportManager\js\ReportingServices.js’ file

–          Locate the js file above and open it in either “Visual Studio”, Notepad++ or Dreamweaver (any HTML editor should be fine).

–          Next copy and paste the whole js code (preferably minified version). This can be found at: http://code.jquery.com/jquery-1.7.2.min.js

–          Save the ReportingServices.js file

B)      Second method is to add a reference to the jQuery lib hosted on either Google or any other CDN. You can even reference it from your own server if you want to.

–          I recommend using Google CDN at http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

To add reference you would need to do it at couple of pages.

  • 1)  \Reporting Services\ReportManager\Pages\Reports.aspx – this is to alter reports DOM elements after they are rendered.
  • 2)   \Reporting Services\ReportManager\Pages\Folder.aspx – this is to set custom header/images for the reporting services.

Refer to screen shot below to how it will look after the code is inserted:

Script code used above is:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script type=”text/javascript”>
//———————hack from jqery ——–
$(document.body).ready(function () {
try {
//—–set the display for all table and span elements to “” if they are set to “inline-block”—–
// — this will correct the render problem in FF browser. The report will fit the whole screen.
$(“table”).each(function (i) {
if ($.trim(this.style.display) == “inline-block”) {this.style.display = “”;}
});
$(“span”).each(function (i) {
if ($.trim(this.style.display) == “inline-block”) {this.style.display = “”;}
});
// —- these are hacks for customizing the site header, link to the help document, etc.. ——-
//  $(“.msrs-buttonHeaderBackground”).hide();
//  $(“table.msrs-topBreadcrumb tbody>tr>td:first”).html(“<img src=’/Reports/images/iupui.gif’ alt=’IUPUI’ />”);
$(“td.msrs-logo”).html(“<img src=’/Reports/images/IMIR-Logo.gif’ style=’width:53px; height:42px;’ alt=’IMIR’ />”);
//———————————————————–
$(‘a[target=MicrosoftReportingServicesHelp]’).attr(“href”, “https://www.sharepoint.iu.edu/sites/imir/Help/Documents/Forms/AllItems.aspx&#8221;).attr(“target”, “_blank”);      }
catch (e) { }
}); </script>

Please note that in the code above you can follow the tricks above and add more custom JS code as needed.

To find the reference to the html/DOM element you can use either ‘Firebug’ in Firefox or Developers Tools in IE.

Results:

Once the changes above are done you can see the result on the site as below:

Screen shot for the Folder.aspx page

Screen shot for the Reports.aspx page

Note that the header is customized. If you want to change the style for site header you need to update CSS file for ReportingServices.

Advertisements
Categories: jQuery, Reporting Services

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s