Dashboard for Blazor - How to use Web Dashboard within your Blazor Apps

We now offer a way to use DevExpress Web Dashboard within your Blazor apps. 

In this post I'll show you how to integrate the HTML JavaScript Dashboard into your Blazor applications. I'll focus on integration details and create a sample dashboard application as well.

Prerequisites

Here’s what you’ll need to use our HTML JavaScript Dashboard with the Blazor framework:

Source Code

You can find the source code of the sample below on GitHub.

How to Add Dashboard Control to Blazor

To get started, you must first create a new Blazor application using the Blazor WebAssembly App template and enable the ASP.NET Core hosted check box (or run dotnet new blazorwasm –hosted command). If this template was not installed, please review the following document: Get started with ASP.NET Core Blazor.

This solution uses the ASP.NET Core backend (server-side Blazor) to process requests from the HTML JS Dashboard. The client side defines the UI for this component and the logic needed to respond to UI updates.


Configure the Server Project

  1. Install the DevExpress.AspNetCore.Dashboard NuGet package. You can find a comprehensive installation guide in our documentation: Install DevExpress Controls Using NuGet Packages.
  2. Create the App_Data/Dashboards folder to store dashboards.
  3. Install the Microsoft.AspNetCore.Mvc.NewtonsoftJson NuGet package to send the model to the client in JSON format.
  4. Open the Startup.cs file to register and adjust DashboardConfigurator:
    using DevExpress.AspNetCore;
    using DevExpress.DashboardAspNetCore;
    using DevExpress.DashboardCommon;
    using DevExpress.DashboardWeb;
    using DevExpress.DataAccess.Json;
    // ...
    public void ConfigureServices(IServiceCollection services) {
    	services.AddResponseCompression(opts => {
    		opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
    			new[] { "application/octet-stream" });
    	});
    	services.AddDevExpressControls();
    	services.AddMvc()
    	.AddDefaultDashboardController(configurator => {
    		// Register Dashboard Storage
    		configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
    		// Create a sample JSON data source
    		DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
    		DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("JSON Data Source (URL)");
    		jsonDataSourceUrl.JsonSource = new UriJsonSource(new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"));
    		jsonDataSourceUrl.RootElement = "Customers";
    		jsonDataSourceUrl.Fill();
    		dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
    		configurator.SetDataSourceStorage(dataSourceStorage);
    	});
    }
    
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
    	// ...
    	app.UseStaticFiles();
    	app.UseClientSideBlazorFiles<Client.Startup>();
    	app.UseDevExpressControls();
    	app.UseRouting();
    
    	app.UseEndpoints(endpoints => {
    		EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
    		endpoints.MapDefaultControllerRoute();
    		endpoints.MapFallbackToClientSideBlazor<Client.Startup>("index.html");
    	});
    }

Configure the Client Project
  1. Add the package.json configuration file and list the following npm packages required by our Dashboard component: 

    {
    "dependencies": {
        // ...
        "devexpress-dashboard": "~19.2.5"
        "@devexpress/analytics-core": "~19.2.5",
        "devextreme": "~19.2.5",
    },
    // ...
    }
  2. Run the npm install command to install these packages.

  3. Create the Dashboard.razor file and add the code below to render the Web Dashboard:

    @page "/dashboard"
    @inject IJSRuntime JSRuntime
    @implements IDisposable
    
    
        <div id="web-dashboard" style="width:100%; height: 600px">
        </div>
    
    @code {
        protected override void OnAfterRender(bool firstRender) {
            JSRuntime.InvokeAsync<object>("JsFunctions.InitWebDashboard");
        }
    
        public void Dispose() {
            JSRuntime.InvokeAsync<string>("JsFunctions.DisposeWebDashboard");
        }
    }

    You should use the OnAfterRender lifecycle method for the dashboard component for initialization and the Dispose method to release unused memory.

  4. Add the index.js file and implement the logic to initialize and dispose the components: 

    window.JsFunctions = {
        InitWebDashboard: function () {
            DevExpress.Dashboard.ResourceManager.embedBundledResources();
            this.dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
                endpoint: "/api/dashboard"
            });
            this.dashboardControl.render();
        },
        DisposeWebDashboard: function () {
            this.dashboardControl.dispose();
        }
    };
  5. Install the BuildBundlerMinifier NuGet package. Create a bundleconfig.json file to bundle scripts and styles required for Web Dashboard: 

    [
        {
            "outputFileName": "wwwroot/site/styles.css",
            "inputFiles": [
                "node_modules/devextreme/dist/css/dx.common.css",
                "node_modules/devextreme/dist/css/dx.light.css",
                "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
                "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
                "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
                "node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css"
            ],
            "minify": {
                "enabled": false,
                "adjustRelativePaths": false
            }
        },
        {
            "outputFileName": "wwwroot/site/bundle.js",
            "inputFiles": [
                "./index.js",
                "node_modules/jquery/dist/jquery.js",
                "node_modules/jquery-ui-dist/jquery-ui.js",
                "node_modules/knockout/build/output/knockout-latest.js",
                "node_modules/ace-builds/src-min-noconflict/ace.js",
                "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js",
                "node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js",
                "node_modules/ace-builds/src-min-noconflict/theme-ambiance.js",
                "node_modules/devextreme/dist/js/dx.all.js",
                "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
                "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
                "node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"
            ],
            "minify": {
                "enabled": false
            },
            "sourceMap": false
        }
    ]
  6. Register the bundled resources in the index.html file:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>WebDashboardBlazor</title>
        <base href="/" />
        <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
        <link href="css/site.css" rel="stylesheet" />
        <link href="site/styles.css" rel="stylesheet" />
    </head>
    
    <body>
        <app>Loading...</app>
    
        <div id="blazor-error-ui">
            An unhandled error has occurred.
            <a href="" class="reload">Reload</a>
            <a class="dismiss">🗙</a>
        </div>
        <script src="_framework/blazor.webassembly.js"></script>
        <script src="site/bundle.js"></script>
    </body>
    
    </html>
  7. Modify the NavMenu.razor file to add the Dashboard item to the menu:

    <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
        <ul class="nav flex-column">
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                    <span class="oi oi-home" aria-hidden="true"></span> Home
                </NavLink>
            </li>
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="dashboard">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Web Dashboard
                </NavLink>
            </li>
        </ul>
    </div>


Run and View Dashboard

Run the solution and view our sample in your browser:


Please test this example and share your thoughts in the survey at the end of this post.


Your Feedback Counts

As always, we welcome your feedback. Please take a moment to answer the following survey question so we can better understand your requirements regarding Web Dashboard in Blazor.


Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
11 comment(s)
CRM-685d5f89-76a5-41b0-9890-49131406c14c
Customer127969
must be added in XAF blazor
18 February 2020
Jacek Kosiński
Jacek Kosiński
1up for XAF blazor
18 February 2020
Isa_Tahiri
Isa_Tahiri
+1 for XAF Blazor
18 February 2020
Erich Glashagen 1
Erich Glashagen 1
I am currently using Extracteddatasources for my dashboard. How can I do that in Blazor?
18 February 2020
Dennis (DevExpress)
Dennis (DevExpress)
@XAFers: Thank you for your feedback!
18 February 2020
Norbert K.
Norbert K.
+1 for XAF Blazor
18 February 2020
Kalem Yazılım
Kalem Yazılım
+1 for XAF Blazor
19 February 2020
CRM-d068bddd-c03e-4bc3-a05c-bf04d36ae691
HelloDev

Is it possible to achieve this same solution with Blazor Server hosting model instead of Blazor WebAssembly that you've shown here in this example?


If so, do you have examples?

13 March 2020
Customer101672
Jayanand Konchery
Is it possible to extend this example with custom dashboard item widgets?
9 April 2020
CRM-78f8d751-246c-483b-b5a3-aeee95b033bc
Johan Fourie

Is it possible to achieve this same solution with Blazor Server hosting model instead of Blazor WebAssembly that you've shown here in this example?


If so, do you have examples?

24 July 2020
Joche Ojeda
Jose Javier Columbie
Dashboards for Blazor Server Side:  https://xafmarin.com/devexpress-dashboards-for-blazor-server-side/
21 September 2020

Please login or register to post comments.