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:

   • How to set up in .NET 5 and .NET Core 3.1 applications

   • How to set up in .NET Framework application

   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