Client-Side Configuration (React)

• Dec 24, 2019
• 3 minutes to read

This approach is based on the client-server model. You need a server (backend) project and a client (frontend) application that includes all the necessary styles, scripts and HTML-templates. Note that the script version on the client should match with libraries version on the server up to a minor version.

The modular approach allows you to integrate the HTML JavaScript Dashboard control into web applications. This topic describes how to add the HTML JavaScript Dashboard control to a React application.

Tip

Get Started: Build Web Dashboard Applications

Example: Dashboard Client-Side Application (React)

• Prerequisites
• Create React Application
• Install Dashboard Package
• Create Dashboard Component
• Modify App Content
• Add Global Styles
• Run the Application

Prerequisites

Make sure you have Node.js 6+ and npm 5.2+ installed on your machine.

Create React Application

In the command prompt, create a React application and navigate to the created folder:

npx create-react-app dashboard-react-app
cd dashboard-react-app

Install Dashboard Package

The devexpress-dashboard npm package references devextreme and @devexpress/analytics-core as peerDependencies. The peerDependencies packages should be installed manually. This allows developers to control a version of the peerDependencies packages and guarantees that the package is installed once.

Install a dashboard package with required peerDependencies:

npm install devextreme @devexpress/analytics-core devexpress-dashboard --save

Create Dashboard Component

In the src folder, create a DashboardComponent.js file and add the content below:

import React from 'react';
import { DashboardControl, ResourceManager } from 'devexpress-dashboard';

class DashboardComponent extends React.Component {
    constructor(props) {
        super(props);
        ResourceManager.embedBundledResources();
    }

    componentDidMount() {
        this.dashboardControl = new DashboardControl(this.refs.dashboardcontainer,  {          
            // Specifies the URL where the Web Dashboard's server side is hosted.
            endpoint: "https://demos.devexpress.com/services/dashboard/api",
            workingMode: "Designer",
        });
        this.dashboardControl.render();
    }

    componentWillUnmount() {
        this.dashboardControl.dispose();
    }

    render() {
        return (
            <div ref="dashboardcontainer" style={{ width: '100%', height: '100%' }}></div>
        );
    }
}

export default DashboardComponent;

The DashboardControlOptions.endpoint property specifies the URL used to send data requests to a server. The value should consist of a base URL where the Web Dashboard’s server side is hosted and a route prefix - a value that is set in the MVC / .NET Core MapDashboardRoute properties.

Modify App Content

Modify the App.js file as shown below to display a dashboard component on the page:

import React, { Component } from 'react';
import DashboardComponent from './DashboardComponent';

class App extends Component {
    render() {
        return (
        <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
            <DashboardComponent />
        </div>
        );
    }
}

export default App;

Add Global Styles

Replace the index.css file content with the following global styles:

@import url("../node_modules/jquery-ui/themes/base/all.css");
@import url("../node_modules/devextreme/dist/css/dx.common.css");
@import url("../node_modules/devextreme/dist/css/dx.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");

Run the Application

Run the application.

npm start

Open http://localhost:3000/ in your browser to see the result. The HTML JavaScript Dashboard displays the dashboard stored on the preconfigured server (https://demos.devexpress.com/services/dashboard/api).