Reporting Services and the Report Viewer component - Part II

Since I posted the initial article on Reporting Services and the Report Viewer component, we have had a steady slew of questions and emails about it. Rather then answer each one of these questions individually, I’ve decided to post an example on how to use this component from a web application and hopefully answer the entire gamut of questions.

Many of you have faced the situation where you need to build a custom UI for your report. It could be to enable you to do user specific validation for input parameters, or to match the look and feel of you current web application, or to support multi-select parameters. Whatever the reason, this seems to be a common requirement.

In this example, I am going to create a new web project – RsFromAWebApp and embed the Product Line Sales Report, which is a part of the SampleReports project that is including with Reporting Services.  The input parameters for this report are going to be entered on the Web Form via user controls, and not using Reporting Services.

The Product Lines Sales Report has four input parameters, Product Category, Product Sub Category, Start Date and End Date. The first thing I want to do is create my own set of user controls in my Web form.  So lets take a look at the web form :

    <form id="Form1" method="post" runat="server">
      <table height="95%" width="95%">
        <tr id="Toolbar" height="100" bgcolor=#ccccff>
          <td>Category<asp:dropdownlist id="CategoryDropDown" 
              runat="server" Width="120px" 
              AutoPostBack="True"></asp:dropdownlist></td>
          <td>Sub Category<asp:dropdownlist id="SubCategoryDropDown"
              runat="server" Width="120px"></asp:dropdownlist></td>
          <td>Start Date<asp:textbox id="StartDate" runat="server"
              Width="110px"></asp:textbox></td>
          <td>End Date<asp:textbox id="EndDate" runat="server" 
              Width="110px"></asp:textbox></td>
          <td><asp:button id="Button1" width="30px" runat="server"
              Text="Go"></asp:button></td>
        </tr>
        <tr id=Main>
          <td colspan="5"><cc1:ReportViewer id="ReportViewer1" 
              runat="server" width="100%" height="95%" ></cc1:ReportViewer></td>
        </tr>
      </table>

Having created the form to look exactly as we need, and validated it the next step is to pass the values in the above user controls to the report viewer component. We need to find the name of the parameters expected by the Product Line Sales Report. To do this click on Report --> Report Parameters and we find that the Parameter names are ProductCategory, ProductSubCategory, StartDate and EndDate. We now have all the information we need to proceed. As in the previous article, we now need to specify the ServerURL and the Report name to the Report Viewer component.

ReportViewer1.ServerUrl=@"http://localhost/ReportServer";
ReportViewer1.ReportPath=@"/SampleReports/Product Line Sales";

To pass the parameters to the report, we need to use the SetQueryParameter method that we added to the ReportViewer component in the last article.

ReportViewer1.SetQueryParameter("ProductCategory",CategoryDropDown.SelectedValue);
ReportViewer1.SetQueryParameter("ProductSubCategory",SubCategoryDropDown.SelectedValue);
ReportViewer1.SetQueryParameter("StartDate",StartDate.Text);
ReportViewer1.SetQueryParameter("EndDate",EndDate.Text);

Our next step is to hide the parameters part of the toolbar created in the Report. Since our web page now accepts user inputs, we don’t need Reporting Services to do this.

ReportViewer1.Parameters=Microsoft.Samples.ReportingServices.ReportViewer.multiState.False;

If you want to hide the rest of the toolbar as well (the area from where you can export to another format), set the Toolbar to false.

ReportViewer1.Toolbar=Microsoft.Samples.ReportingServices.ReportViewer.multiState.False;

 Compile your project and this is what your page should look like

Login to download code

\

by Llama Lopon