How to use Web Report Designer in React Application

Environment

Product	R3 SP1 2022+
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, users can create or modify existing declarative (TRDX, TRDP, and TRBP) reports directly from inside the React application. The solution we are about to demonstrate is a very basic approach to creating a new React application, including the web report designer's dependencies and displaying the web report designer.

Solution

The following guide assumes previous knowledge of React:

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

   npx create-react-app my-app
   cd my-app
   npm run 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 designer. The required steps depending on the framework can be found in:

   • Setting up the Web Report Designer in .NET and .NET Core 3.1 applications

   • How to set up the Web Report Designer service in .NET Framework application

   You can also find demo projects with the .NET Core implementation 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 designer depends on jQuery. Add a CDN link to the jQuery library in public/index.html:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
   

4. Also in the head, add a reference for Kendo all:

   <script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
   

5. Refer the JavaScript of the web report designer and the viewer also in public/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-18.3.24.1218.min.js"></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 run start
   

Notes

If you do not wish to load the scripts for the designer and viewer in the index.html since it would increase the initial load time, the scripts may be loaded in the component itself. In this scenario, steps 3 through 5 can be skipped.

To load the jQuery and Kendo subsets in the component where the Web Report Designer will be used, the following packages must be installed:

> npm install jquery
> npm install @progress/kendo-ui

Then, the component needs to be edited as follows:

import React, { Component } from 'react';
import * as $ from 'jquery';
import '@progress/kendo-ui';

export default class ReportDesigner extends Component {

    componentDidMount() {
        window.jQuery = $;
        window.$ = $;
        this.loadScriptPromise("https://demos.telerik.com/reporting/api/reportdesigner/designerresources/js/webReportDesigner/").then(a => {
            $('#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");
        })

    this.loadScriptPromise("https://demos.telerik.com/reporting/api/reportdesigner/resources/js/telerikReportViewer/")
    }

    render() {
        return <div id="reportDesigner1"></div>
    }

    loadScriptPromise(scriptUrl) {
        return new Promise(resolve => {
          const scriptElement = document.createElement('script');
          scriptElement.src = scriptUrl;
          scriptElement.onload = resolve;
          document.body.appendChild(scriptElement);
        });
      }
}

Additional resources

You can find the sample application in our GitHub repository.

See Also

• Create a New React App