How to use HTML5 Report Viewer in React Application

Environment

Product Progress® Telerik® Reporting R3 2018
Framework React
Report Viewer HTML5

Description

The HTML5 Report Viewer is built upon HTML5, CSS, and JavaScript. This allows the viewer to be used in virtually any JavaScript framework. React has been gaining a lot of traction and we would like to explore how the HTML5 Report Viewer could be implemented, together with its dependencies, in a React application. The solution we are about to demonstrate is a very basic approach to create a new React application, include the viewer's dependencies and lastly, display the report viewer.

Solution

The following guide assumes previous knowledge of React:

  1. Start by creating a new React application using following CLI commands:

    npx create-react-app my-app
    cd my-app
    npm start
    

    Note: You’ll need to have Node >= 6 and npm >= 5.2 on your machine.

  2. The viewer depends on jQuery. Add a CDN link to jQuery library in public/index.html:

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    
  3. Add the desired Kendo UI Less-Based Theme to index.html in order to style the viewer:

    <head>
      <link href="http://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" rel="stylesheet" />
      <link href="http://kendo.cdn.telerik.com/2018.2.620/styles/kendo.default.min.css" rel="stylesheet" />
    ...
    
  4. Create new assets folder inside public and add the HTML5 Report Viewer JS library from the Telerik Reporting installation folder (C:\Program Files (x86)\Progress\Telerik Reporting R3 2018\Html5\ReportViewer\js). Refer the path to the file in index.html as:

    <script src="./assets/telerikReportViewer-12.2.18.912.min.js"></script>
    
  5. Add Kendo UI for jQuery JS library. An alternative approach is to add only the subset of Kendo widgets required for the proper work of the HTML5 Report Viewer. The subset is available in the Telerik Reporting installation folder (C:\Program Files (x86)\Progress\Telerik Reporting R3 2018\Html5\ReportViewer\js\telerikReportViewer.kendo-12.2.18.912.min.js) and can be copied to the React application's public/assets folder. Then reference it in index.html:

    <script src="./assets/telerikReportViewer.kendo-12.2.18.912.min.js"></script>
    
  6. Create a new report viewer component (components/ReportViewer.js) and configure the routes accordingly. The new component would contain the following template, scripts, and styles:

    import React, { Component } from 'react';
    
    export default class ReportViewer extends Component {
      // The componentDidMount() method runs after the component output has been rendered to the DOM. 
      componentDidMount() {
          window.jQuery('#reportViewer1')
              .telerik_ReportViewer({
                  serviceUrl: 'https://demos.telerik.com/reporting/api/reports/',
                  reportSource: {
                      report: 'Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary'
                  },
                  scale: 1.0,
                  viewMode: 'INTERACTIVE',
                  printMode: 'SPECIFIC',
                  sendEmail: { enabled: true }
              });
      }
    
      render() {
          return <div id="reportViewer1"></div>
      }
    }
    
  7. In the required page (for example App.js), render the React component:

    import React, { Component } from 'react';
    import './App.css';
    
    import ReportViewer from './components/ReportViewer';
    
    class App extends Component {
    render() {
      return (
        <div className="App">
          Welcome to React App
          <ReportViewer />
        </div>
      );
    }
    }
    
    export default App;
    
  8. Set the default styles of the report viewer to the corresponing page stylesheet file (for example App.css):

    body {
        font-family: Verdana, Arial;
        margin: 5px;
    }
    
    #reportViewer1 {
        position: absolute;
        top: 70px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        overflow: hidden;
        clear: both;
    }
    
  9. Run

    npm start
    

    HTML5 Report Viewer in React

Additional resources

Download the final React application.

See Also

Create a New React App

In this article
Not finding the help you need? Improve this article