New to Telerik Reporting? Download free 30-day trial

How to use Web Report Designer in React Application

Environment

Product R3 2019+
Framework React
Report Designer Web Report Designer

Description

The Telerik Web Report Designer is an HTML5/JavaScript/CSS3 jQuery-based widget that allows integration into your web applications built on virtually any JavaScript framework.

With it, your users can create or modify existing declarative (TRDX, TRDP and TRBP) reports directly from your React application. The solution we are about to demonstrate is a very basic approach to create a new React application, include the web report designer's dependencies and lastly, display the web report designer.

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
    

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

  2. Create a new .NET or .NET Core Web Application that will host the Rest Service for the web report desiger. The required steps depending on the framework can be found in:

    You can also find a demo projects with the .NET Core imeplementation in the installation folder of Telerik Reporting -> Examples -> CSharp -> .NET 6 -> ReportingRestServiceCorsDemo subfolder.

    For this example, we will use the REST service from our online demos.

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
  4. Also in the head, add a reference for Kendo all:

    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
    
  5. Refer the JavaScript of the web report designer and the viewer also in index.html as:

    <script src="https://demos.telerik.com/reporting/api/reports/resources/js/telerikReportViewer"></script>
    <script src="https://demos.telerik.com/reporting/api/reportdesigner/designerresources/js/webReportDesigner"></script>
    
  6. Create a new web report designer component (components/ReportDesigner.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 ReportDesigner extends Component {
    
        componentDidMount() {
            window.jQuery('#reportDesigner1')
                .telerik_WebReportDesigner({
                    toolboxArea: {
                        layout: "list" //Change to "grid" to display the contents of the Components area in a flow grid layout.
                    },
                    serviceUrl: "https://demos.telerik.com/reporting/api/reportdesigner/",
                    report: "Barcodes report.trdx"
                }).data("telerik_WebDesigner");
        }
    
        render() {
            return <div id="reportDesigner1"></div>
        }
    }
    
  7. In the required page (for example App.js), render the React component:

    import React, { Component } from 'react';
        import './App.css';
    
        import ReportDesigner from './components/ReportDesigner';
    
        class App extends Component {
        render() {
          return (
            <div className="App">
              <ReportDesigner />
            </div>
          );
        }
        }
    
        export default App;
    
  8. Run

    npm start
    

Additional resources

You can find the sample application in our GitHub repository.

See Also

Create a New React App

In this article