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:
-
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.
-
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.
-
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>
-
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>
-
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>
-
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> } }
-
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;
-
Run
npm start
Additional resources
You can find the sample application in our GitHub repository.