Run-Time Data in the HTML5 Viewer

January 13 2017

First, it helps to understand how the ActiveReports HTML5 viewer works. As a JavaScript component, the HTML5 Viewer runs on the client browser. It gets its report output from an ActiveReports 11 Web service (ActiveReports.ReportService.asmx). This is why you can't modify report data sources and pass in parameters using server-side code (.vb or .cs). Here are the alternatives to server-side code that let you change data at run time.

Pass parameter values in through script
Customize a web service to modify the data source

Let's take a look at both alternatives.

To pass parameter values in through script

You can pass parameters to a report in the HTML5 viewer from the client script. Here, we will use the HTML5 Viewer sample included with the ActiveReports installation to illustrate how to do this. In this sample, the MoviesReport.rdlx RDL report has a GenreName parameter: To pass a value to this parameter and show the report in the HTML5 viewer, we replace the script in the sample project's index.html file with one like the following.

// Javascript  
        $(function ()  
        {  
            var viewer = GrapeCity.ActiveReports.Viewer(  
            {  
                element: '#viewerContainer',  
                report:   
                {  
                    // Page Report   
                    id: 'Reports/MoviesReport.rdlx' ,  
                    parameters: [  
                    {  
                        // Name the report parameter   
                        // and pass in a value  
                        name: 'GenreName',  
                        value: 'comedy'  
                    }]  
                },  
　  
                reportService: {  
                    url: '/ActiveReports.ReportService.asmx'  
                },  
                uiType: 'desktop'  
            });  
        });

This script modifies the report data source parameter, GenreName, added in the WHERE clause of the SQL query. The value we pass in replaces [?] in the report's SQL query:

SELECT  
  Genre.GenreName,  
  Movie.Title,  
  Movie.YearReleased,  
  Movie.UserRating,  
  Movie.Country  
FROM Movie  
INNER JOIN (Genre  
INNER JOIN MovieGenres  
  ON Genre.[GenreID] = MovieGenres.[GenreID])  
  ON Movie.[MovieID] = MovieGenres.[MovieID]  
WHERE Genre.GenreName = [?];

This is how we can modify the data sent to the report with client-side script instead of server-side code. For more on how to use parameters and filter values, see the following topics in our User Guide. - Parameters - Filtering

To customize a web service

Create a web service that inherits ActiveReports.ReportService.asmx and reference it.
Add a handler for a report event.
Modify the report's data source within the event.

When a report is created, the OnCreateReportHandler event occurs and a reportID value is passed as a string from the client side script. You can add report parameters to this string to specify the data source to use. In Page and RDL reports, you can use the LocateDataSource event. To see how to implement this, check out the MyReportService.asmx.cs (or .vb) file in this sample. MVC Unbound C# Sample | MVC Unbound Visual Basic Sample Note: This sample is an ASP.NET MVC application, but you can apply the same principles in an ASP.NET application.

MESCIUS inc.