Client-Side Configuration (React)

• Jul 26, 2019
• 4 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
• Add Rewired Config
• 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, DashboardPanelExtension } from 'devexpress-dashboard';
import Globalize from 'globalize'

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

        this.initGlobalize();
        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.registerExtension(new DashboardPanelExtension(this.dashboardControl));
        this.dashboardControl.render();
    }

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

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

    initGlobalize() {
        Globalize.load(
            require('devextreme-cldr-data/en.json'),
            require('devextreme-cldr-data/supplemental.json')
        );
        Globalize.locale('en');
    }
}

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");

Add Rewired Config

1. Install the react-app-rewired library to customize CRA and its Webpack config without ejecting.

npm install react-app-rewired

2. Create a config-overrides.js file at the root of your application and add the following content:

var path = require('path');

module.exports = function override(config, env) {
    config.resolve.alias = {
    globalize$: path.resolve(__dirname, 'node_modules/globalize/dist/globalize.js'),
    globalize: path.resolve(__dirname, 'node_modules/globalize/dist/globalize'),
    cldr$: path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr.js'),
    cldr: path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr')
    };
    return config;
}

3. Open package.json and modify the scripts section as shown below:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

Support Culture-Specific Data

Web Dashboard uses the globalize library to display culture-specific data.

Add the required cultures and specify one of the added locales in the Globalize.locale method to change the culture:

initGlobalize() {
    Globalize.load(
        require('devextreme-cldr-data/en.json'),
        require('devextreme-cldr-data/de.json'), 
        require('devextreme-cldr-data/supplemental.json')
    );
    Globalize.locale('de');
}

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).