Embedding Beautiful Reporting into Your HTML5 Applications

Here’s what you need to do to grab reports from a remote Telerik Reporting REST Service and have them display in Views or HTML pages in any web application.

It’s easy to implement client-side reporting in your applications using the Telerik HTML5 Report Viewer. In the most common scenarios, the HTML5 Report Viewer is connected to a Telerik Reporting REST Service, hosted in the same application. This service does the heavy lifting of rendering the report and delivering the pages back to the report viewer. But how can we connect the report viewer to the Telerik Reporting REST Service that operates on a Report Server instance? Here’s what you need to do to grab reports from the Telerik Report Server and have them display in Views or HTML pages in both ASP.NET and ASP.NET Core projects… or, really, any web application.

In this post, I’ll show how to use the HTML5 Report Viewer in plain old HTML pages. I’m also going to show how to use the Telerik Report Server, which is easier than creating your own REST-based Report Service (which the Telerik Reporting solution also lets you do).

Setting up Report Server

The first step in using Report Server is to download its installation package from your Telerik.com account. Once the installation package has finished running, you can access the Report Server Manager either from your Window’s Start menu or by opening a browser and surfing to localhost:83. The first time you access the manager, you’ll be asked to specify a storage location (I just accepted the default location in my computer’s file system) and set up an admin account with password and email address. Other than loading your reports, you’re ready to start serving reports to your application.

The Report Server default installation contains a half-dozen sample reports in a category called Samples, and you can use them to build your first reporting pages. If you’ve already created reports with the Telerik Report Designer, you can upload them to the server and organize them into categories.

Alternatively, you can link your copy of Report Designer to Report Server. In Report Designer, go to the File | Open menu, select Report Servers on the left and then click on the Add Server button on the right. You’ll then need to provide the URL for your Report Manager installation (localhost:83, again) and the admin name/password you set up when you installed Report Server. You should now be able to create reports in Report Designer and save them to Report Server as you work on them. To use any of those reports from Report Server, you just need to click the Publish button in Report Designer and the report will be available for all Report Server users.

To access reports, your applications will need to log in to Report Server. As you’ll see, you can just use the admin username/password you’ve set up. Alternatively, from the Users tab on the left-hand side of Report Server Manager’s menu, you can enable the Guest account which doesn’t require an account name or password. You might even want to create a new user with tailored reporting permissions: Users can, for example, be set up with read-only permissions and be limited to accessing reports in a specific category (or even to a specific report).

For this post, I used a report I created earlier in Report Designer that includes an embedded connection string. All I had to do, once I’d connected Report Designer to Report Server, was publish my report and I was ready to use it in Report Viewer.

Grab the eBook: A Quick Guide to Expert .NET Reporting Tools 

Configuring the Report Viewer’s Web Page

If you’re working with an ASP.NET project, the easiest way to add a page or View that supports the HTML5 Report Viewer is to use Visual Studio’s Add | New Item dialog and select Telerik HTML5 Report Viewer Page (for an .html page) or HTML5 Report Viewer View (for a .cshtml view). Either of those choices starts up a wizard that lets you select the report you want in your Report Server. If you haven’t built your project successfully at this point, the wizard will make you do it now.

As you work through the wizard, you’ll need to provide the URL for Report Server and the username/password for the account you want to use (if you’ve enabled the Guest account or created a new account, you can use them). If you’ve limited the account to only reading reports, then you’ll need to type in the name of the report and its category because the user won’t be allowed to list reports and categories.

The wizard will not only add a page (or View) with the HTML and JavaScript support your Report Viewer requires but will also ensure that your project has all the necessary references. Having said that, both ASP.NET MVC projects using .NET 4.7 and ASP.NET Core projects don’t require any additional references.

If you’re working in an ASP.NET Core project (or want to add the Report Viewer to an existing page/View in an ASP.NET project), you can configure the page yourself. To do that, first, in your page’s head element, add these two script tags (if you already have the jQuery tag, make sure that the script tag for the telerikReportViewer follows it):

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://localhost:83/api/reports/resources/js/telerikReportViewer-14.1.20.618.min.js/"></script>

You’ll also need to add these two link tags to get the stylesheets you’ll need:

<link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css" rel="stylesheet" />

Finally, you’ll need to create a style for the div element that displays your Report Viewer (this example uses a local style in the head element and assumes the div element has its id attribute set to reportViewer1):

<style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
            overflow: hidden;
            font-family: Verdana, Arial;
        }
</style>

In ASP.NET Core projects, you’ll need to make sure that you have this line in your Startup.cs file’s Configure method:

app.UseStaticFiles();

However, the defaults for most ASP.NET Care projects will automatically include that line.

Displaying the Report

To display your page, in your page’s body element, you need a div element to hold the Report Viewer. This sample element both provides a message to display while the report is being fetched and sets the element’s id attribute (which matters both for the style applied to the element and for some upcoming JavaScript).

<div id="reportViewer1">
   Please wait, your report is loading
</div>

Now you need some JavaScript to load your report into the div element when the page is ready. The core of this code is the object literal that you pass to the telerik_ReportViewer method. In the parameters to that method, you’ll need to specify the URL for your Report Server (still localhost:83) and the name and category of the report you want to display.

A minimal implementation for an acceptable looking display looks like this:

<script type="text/javascript">
        $(document).ready(function () {
            $("#reportViewer1")
                .telerik_ReportViewer({
                    reportServer: {
        url: "http://localhost:83",
            },
                    reportSource: {
                            report: "Samples/First Server Report"
                    },
                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                    scale: 1.0
                });
        });
    </script>

You can check out the Report Viewer documentation for more options.

That sample JavaScript code will only work, however, if you enabled the Guest account in Report Server’s Guest account. If you’ve set up and want to use other accounts, you’ll need include the account name and password in the ReportServer parameter. This example uses an account called PeterVogel with a password of “password”:

reportServer: {
url: "http://localhost:83",
    username: "PeterVogel",
    password: "password"
}

If you run into any problems when you test your application, check out the troubleshooting section at the end of this page. But, if your experience is like mine, you’ll probably just press F5 and, a couple of seconds later, find yourself looking at your report.

Tried Telerik DevCraft?

You can choose Telerik Reporting and Telerik Report Server as individual products or enjoy them as part of the great Telerik DevCraft bundles.

Try Telerik DevCraft

Telerik DevCraft is the finest software developer tools collection across .NET and JavaScript technologies, which includes modern, feature-rich and professionally designed UI components for web, desktop and mobile applications, embedded reporting and report management solutions, document processing libraries, automated testing and mocking tools from the Telerik and Kendo UI suites. DevCraft will arm you with everything you need to deliver outstanding applications in less time and with less effort. With the backing of our legendary support team, which consists of the developers who build the products, and a ton of resources and trainings you can rest assured that you have a stable partner to rely on for your everyday challenges along your software development journey.