Create a React Dashboard Application

• Oct 21, 2021
• 5 minutes to read

The Web Dashboard consists of client and server parts:

Client

The client is a JavaScript application that supplies users with a UI to design and interact with a dashboard. The DashboardControl is the underlying control. The client communicates with the server using HTTP requests.

Server

The server is an ASP.NET Core or ASP.NET MVC application that handles client data requests and provides access to data sources, dashboard storage and other backend capabilities.

The tutorial creates and configures a client React application that contains the Web Dashboard and a server ASP.NET Core application.

View Example

Prerequisites

• Node.js 6+ and npm 5.2+

Requirements

• The script version on the client should match the library version on the server.
• Versions of the DevExpress npm packages should be identical.

Step 1. Create a Client Application

In the command prompt, create a React application:

npx create-react-app dashboard-react-app

Navigate to the created folder after the project is created:

cd dashboard-react-app

Install the following npm packages:

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

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

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

import React from 'react';
import './App.css';
import DashboardControl from 'devexpress-dashboard-react';

function App() {  
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
      <DashboardControl style={{ height: '100%' }} 
        endpoint="https://demos.devexpress.com/services/dashboard/api">
      </DashboardControl>
  </div>
  );
}

export default App;

Open the index.css file and add the following global styles:

@import url("../node_modules/jquery-ui/themes/base/all.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");

Use the command below to launch the application.

npm start

Open http://localhost:3000/ in your browser to see the result. The Web Dashboard uses data from the preconfigured server (https://demos.devexpress.com/services/dashboard/api).

Step 2. Create a Server Application

Create a custom server application to show your data. In Visual Studio, create an ASP.NET Core 3.1+ application. Select the Empty template.

In your application, create the App_Data/Dashboards folder that will store dashboards.

Create a new empty DefaultDashboard controller and derive it from the DashboardController class:

using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardWeb;
using Microsoft.AspNetCore.DataProtection;

namespace AspNetCoreDashboardBackend {
    public class DefaultDashboardController : DashboardController {
        public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider dataProtectionProvider = null)
            : base(configurator, dataProtectionProvider) {
        }
    }
}

Replace the content of the Startup.cs file with the code below to configure the following parameters:

• Configure CORS policy.
• Add and use services for DevExpress Controls.
• Map the dashboard route.
• Add a JSON data Source to a data source storage.

using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.FileProviders;
using System;

namespace AspNetCoreDashboardBackend {
    public class Startup {
        public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
            Configuration = configuration;
            FileProvider = hostingEnvironment.ContentRootFileProvider;
        }

        public IConfiguration Configuration { get; }
        public IFileProvider FileProvider { get; }

        public void ConfigureServices(IServiceCollection services) {
            // Configures services to use the Web Dashboard Control.
            services
                .AddCors(options => {
                    options.AddPolicy("CorsPolicy", builder => {
                        builder.AllowAnyOrigin();
                        builder.AllowAnyMethod();
                        builder.WithHeaders("Content-Type");
                    });
                })
                .AddDevExpressControls()
                .AddControllers();
            services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
                DashboardConfigurator configurator = new DashboardConfigurator();
                configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
                configurator.SetDataSourceStorage(CreateDataSourceStorage());
                configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));
                configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
                return configurator;
            });
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
            // Registers the DevExpress middleware.
            app.UseDevExpressControls();
            app.UseRouting();
            app.UseCors("CorsPolicy");
            app.UseEndpoints(endpoints => {
                // Maps the dashboard route.
                EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard", "DefaultDashboard");
                // Requires CORS policies.
                endpoints.MapControllers().RequireCors("CorsPolicy");
            });
        }
        public DataSourceInMemoryStorage CreateDataSourceStorage() {
            DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
            DashboardJsonDataSource jsonDataSource = new DashboardJsonDataSource("Customers");
            jsonDataSource.ConnectionName = "jsonDataSourceConnection";
            jsonDataSource.RootElement = "Customers";
            dataSourceStorage.RegisterDataSource("jsonDataSourceSupport", jsonDataSource.SaveToXml());
            return dataSourceStorage;
        }
        private void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "jsonDataSourceConnection") {
                Uri fileUri = new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json");
                JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
                jsonParams.JsonSource = new UriJsonSource(fileUri);
                e.ConnectionParameters = jsonParams;
            }
        }
    }
}

In the command prompt, run the following command to start the server:

dotnet run

To use this server in the client application, go to the App.js file. Set the following URL as an endpoint: http://localhost:5000/api/dashboard

import React from 'react';
import './App.css';
import DashboardControl from 'devexpress-dashboard-react';

function App() {  
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
      <DashboardControl style={{ height: '100%' }} 
        endpoint="http://localhost:5000/api/dashboard">
      </DashboardControl>
  </div>
  );
}

export default App;

Use the command below to launch the application.

npm start

Open http://localhost:3000/ in your browser to see the result. The client Web Dashboard app uses data from the newly created server (http://localhost:5000/api/dashboard).

Step 3. Switch to Viewer Mode

Once you create and save a dashboard, you can switch your Dashboard Designer to Viewer mode. Open the App.js file and set the workingMode property to ViewerOnly:

<DashboardControl style={{ height: '100%' }} 
    endpoint="http://localhost:5000/api/dashboard">
    workingMode="ViewerOnly"
</DashboardControl>

Next Steps

• Create Dashboards on the Web

  Describes how to create and configure dashboards in the Web Dashboard control.

• Dashboard Component for React

  Contains instructions on how to use the Dashboard Component for React.