Report Designer Integration in ReactJS

May 06, 2019
3 minutes to read

Tip

Online Example: How to use the Web Report Designer in JavaScript with ReactJS

You can use the End-User Web Report Designer in JavaScript with React by creating two projects: a server (backend) project in ASP.NET MVC implementation and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Note

Perform the steps in the Creating a Server Side for the Report Designer topic to create a backend application.

This document describes how to configure and host the client part:

Create a new folder to store all files related to the client-side functionality (for instance, name it ClientSide).
Download all the required client resources using Bower. Add the bower.json file to the created folder and add the following code to this file:
- JSON
```
{
    "name": "report-designer-example-react",
  "dependencies": {
    "xtrareportsjs": "~17.2.3",
    "react": "latest",
    "babel": "latest"
  }
}
```
Ensure that you correctly specify the reporting controls’ version.
Open the console, navigate to your application’s folder and run the following command:

bower install

You can find all the libraries in the bower_components folder after installation is completed.

Create a View file in the root folder (the index.html file in this example) and link the Bower resources to the head section.

HTML

<head>
    <title></title>
    <link rel="stylesheet" href="bower_components/devextreme/css/dx.common.css" />
    <link rel="stylesheet" href="bower_components/devextreme/css/dx.light.css" />
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="bower_components/knockout/dist/knockout.js"></script>
    <script type="text/javascript" src="bower_components/devextreme/js/dx.all.js"></script>
    <script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.js"></script>
    <link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet" />

    <link href="bower_components/xtrareportsjs/css/report-designer-light.css" rel="stylesheet" />
    <script type="text/html" src="bower_components/xtrareportsjs/html/report-designer.html"></script>
    <script type="text/javascript" src="bower_components/xtrareportsjs/js/dx-designer.js"></script>
    <script type="text/javascript" src="bower_components/xtrareportsjs/js/report-designer.js"></script>
    <script type="text/javascript" src="bower_components/xtrareportsjs/js/localization/report-designer.en.js"></script>

    <script type="text/javascript" src="bower_components/react/react.development.js"></script>
    <script type="text/javascript" src="bower_components/react/react-dom.development.js"></script>
    <script type="text/javascript" src="bower_components/babel/browser.js"></script></head>

Make sure that you meet all the requirements for deploying the control on the client. Refer to Report Designer Requirements and Limitations for a list of necessary client resources.

Note that this sample uses a script with a predefined localization dictionary.

Add a JSX file (example.jsx) to provide the required data to the View.

Create the ReportDesigner and Root classes that extend the base React.Component class as demonstrated below. Use the dxReportDesigner binding to render the Report Designer.

"use strict"
const host = 'http://localhost:54111/';

class ReportDesigner extends React.Component {
    constructor(props) {
        super(props);
        this.reportUrl = ko.observable(props.reportUrl);
        this.requestOptions = {
            host,
            getDesignerModelAction: "/ReportDesigner/GetReportDesignerModel"
        };
    }
    render() {
        return (<div ref="designer" data-bind="dxReportDesigner: $data"></div>);
    }
    componentWillReceiveProps(newProps) {
        this.reportUrl(newProps.reportUrl);
    }
    componentDidMount() {
        ko.applyBindings({
            reportUrl: this.reportUrl,
            requestOptions: this.requestOptions
        }, this.refs.designer);
    }
    componentWillUnmount() {
        ko.cleanNode(this.refs.designer);
    }
};

class Root extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: "Products" };
    }
    render() {
        return (<div style = {{width: "100%", height: "1000px"}}>
            <ReportDesigner reportUrl={this.state.value} />
        </div>);
    }
}

ReactDOM.render(<Root />, document.getElementById("designerhost"))

Link the file created in the previous step in the index.html file as follows:

HTML

...

<body>
    <div id="designerhost"></div>
    <script type="text/babel" src="example.jsx"></script>
</body>

Host your client-side part on the web server.

For instance, start the Internet Information Services (IIS) Manager, right-click the Sites item in the Connections section and select Add Website. In the invoked dialog, specify the site name, path to the folder with the client-side functionality, and the website’s IP address.
For the example to work correctly, you should first run a backend project in Visual Studio, and then, run a client part.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode