Telerik Reporting R1 2017

How To: Use HTML5 Report Viewer with Report Server

This topic explains how to setup the HTML5 Report Viewer to work with Telerik Report Server using the built-in Guest account

Prerequisites

  • Installed and running Telerik Report Server.

  • Report Server's built-in Guest user should be enabled.

  • Report Server should contain at least one report that can be accessed by the Guest user account.

Configuring the HTML5 Report Viewer to work with Report Server using Item Templates

The Visual Studio Item Templates are very convenient when adding an item to your project with some basic functionality. They are ideal for the current scenario, because Telerik HTML5 Report Viewer item template provides also a small wizard that will help you to setup the report viewer to a working state.

  1. Usually the HTML5 viewer page is added to an existing Web application. Use the Add -> New Item option from the project context menu to add a new HTML5 page with viewer.

  2. When the Add New Item dialog appear, select Telerik HTML5 Report Viewer Page as shown here:

    add-html 5-item-template-1
  3. In case your project wasn't built previously, a notification will appear. Once you build it, the Add New Report Viewer wizard will appear. Click on Existing report definition and select the Report hosted on Telerik Report Server option, as shown below:

    add-html 5-item-template-2
  4. Fill in the wizard fields, specifying the Report Server URL, Category and Report Name. The wizard will not setup any credentials, which means that the Guest account will be used to connect to the report server, but the username and password can be changed later.

  5. When you click OK, the wizard will close and the logic behind the item template will do the necessary changes to your project. Finally a Summary page should appear, displaying the information about the added items.

  6. Start your project and navigate to the newly added page. You should be able to see the report viewer loading and displaying your report, which is hosted on Telerik Report Server.

Manually configuring the HTML5 Report Viewer to work with Report Server

Although the fastest and most convenient way to get a working HTML5 viewer in your application is to use the Visual Studio item templates, the same result can be achieved using manual configuration.

  1. Follow the steps described in HTML5 Viewer Manual Setup article to get your HTML5 viewer working. Examine the produced HTML page and especially the section that configures the viewer:

    JavaScript
    $("#reportViewer1")
        .telerik_ReportViewer({
            serviceUrl: "/api/reports/",
            templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-x.x.xx.xxx.html',
            reportSource: {
                report: "Telerik.Reporting.Examples.CSharp.ProductCatalog, CSharp.ReportLibrary",
                parameters: {
                    CultureID: "en"
                }
            }
        });
  2. Locate the line that sets the service URL: serviceUrl: "/api/reports/",. Comment it out or replace it with the following code:

    JavaScript
    reportServer: {
        url: "http://yourReportServerUrl:port",
        username: null,
        password: null
    },

    Substitute the yourReportServerUrl:port with the actual url of your Report Server instance along with the port if needed. Specifying the username and password can be omitted (in this case the Report Server's Guest account will be used) or can be set to an actual account, defined in Report Server.

  3. If you have modified the Telerik Report Viewer Template HTML file, you can leave the templateUrl option intact. Otherwise it is recommended to delete the line templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-x.x.xx.xxx.html', so the template will be downloaded automatically from the server.

  4. Locate the lines that sets the report source's report definition (it should start with report: "...). Replace them with the following line: report: "{Category}/{ReportName}", where {Category} and {ReportName} are the actual names of the category and report that can be accessed by the Guest user or by the user you have provided login credentials for.

    Setup the report parameters if needed.

  5. Run the project and you should see the configured in the previous step report appearing in the Report Viewer. If not, check the Troubleshooting section below.

Troubleshooting

The most common reasons for failure are related with the authentication against Report Server. It is strongly recommended to use a tool like Fiddler or any other web debugger when investigating such a problem.

Problem

Cause

The viewer displays the message: Error registering the viewer with the service. Authorization has been denied for this request.

Check if the supplied username and password are valid and the user's state is Enabled in Report Server.

The page shows the message: The report server URL is not specified or Error loading the report viewer's templates

The reportServer's url property is empty or invalid.

The report viewer loads the template, but displays a message "Error creating report instance. Report 'Category/Report' cannot be resolved.

Check again the report source's report parameter and make sure the category name and the report name exist in Report Server.

The viewer doesn't load any page and there is only a label saying loading... in the top left page corner.

Check the Fiddler log for a request to the /Token URL. This is the request that should obtain the token used to authenticate the Guest account. When found, check the Response headers and look for the error code below:

  • HTTP/1.1 502 Fiddler - DNS Lookup Failed - make sure you have set the Report Server URL correctly.

  • HTTP/1.1 400 Bad Request - check if the built-in Guest user is Enabled and has Read permissions for configured report.

Conclusion

In this article we demonstrated how to setup the HTML5 Report Viewer to access reports, hosted in Telerik Report Server and troubleshoot the most common faults that may appear in the process.

See Also