All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Create a React Dashboard Application

  • 4 minutes to read
IMPORTANT

Familiarity with the basic concepts and patterns of React is needed to use this tutorial. For a review of these concepts, visit reactjs.org.

The Web Dashboard is a client-side control that communicates with the server part using HTTP requests:

  • The client part is a JavaScript application that supplies end users with a UI to design and interact with a dashboard. The DashboardControl is the underlying control.
  • The server part is an ASP.NET Core or ASP.NET MVC application that handles client data requests and includes various backend capabilities such as data access, dashboard storage, etc.

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

View Example

Prerequisites

Requirements

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

Step 1. Configure the Client Dashboard Control in the React Project

  1. 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
    
  2. Install a dashboard package with required peerDependencies.

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

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

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

    import './App.css';
    import React from 'react';
    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;
    
  4. 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.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");
    
  5. Use the command below to launch the application.

    npm start
    

    Open http://localhost:3000/ in your browser to see the result. The Web Dashboard displays the dashboard stored on 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. Follow the steps below:

  1. In Visual Studio, create an ASP.NET Core 3.1 application. Select the Empty template.

  2. Create the App_Data/Dashboards folder that will store dashboards.

  3. Replace the content of the Startup.cs file with the following code:

    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) {
                services
                    // Configures CORS policies.                
                    .AddCors(options => {
                        options.AddPolicy("CorsPolicy", builder => {
                            builder.AllowAnyOrigin();
                            builder.AllowAnyMethod();
                            builder.WithHeaders("Content-Type");
                        });
                    })
                    // Adds the DevExpress middleware.
                    .AddDevExpressControls()
                    // Adds controllers.
                    .AddControllers()
                    // Configures the dashboard backend.
                    .AddDefaultDashboardController(configurator => {
                        configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
                        configurator.SetDataSourceStorage(CreateDataSourceStorage());
                        configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
                    });
            }
    
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
                // Registers the DevExpress middleware.            
                app.UseDevExpressControls();
                // Registers routing.
                app.UseRouting();
                // Registers CORS policies.
                app.UseCors("CorsPolicy");
                app.UseEndpoints(endpoints => {
                    // Maps the dashboard route.
                    EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
                    // Requires CORS policies.
                    endpoints.MapControllers().RequireCors("CorsPolicy");
                });
            }
            public DataSourceInMemoryStorage CreateDataSourceStorage() {
                DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();                        
                DashboardJsonDataSource jsonDataSource = new DashboardJsonDataSource("Customers");
                jsonDataSource.RootElement = "Customers";
                dataSourceStorage.RegisterDataSource("jsonDataSourceSupport", jsonDataSource.SaveToXml());
                return dataSourceStorage;
            }
            private void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
                if (e.DataSourceName.Contains("Customers")) {
                    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;            
                }
            }
        }
    }
    
  4. Run the following command to start the server:

    dotnet run
    
  1. 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 './App.css';
    import React from 'react';
    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;
    

Step 3. Switch to Viewer Mode

Once you create and save a dashboard, you can switch your Dashboard Designer to Viewer mode.

  1. 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>
    
    TIP

    Documentation: Change Control Options

Next Steps

See Also