Dashboards Module

• Oct 28, 2021
• 5 minutes to read

The Dashboards Module allows you to integrate DevExpress Dashboard controls into WinForms, ASP.NET Web Forms, and ASP.NET Core Blazor XAF applications.

The Dashboards Module is demonstrated in the Dashboards section of the Feature Center application. The Feature Center demo is installed in %PUBLIC%\Documents\DevExpress Demos 21.2\Components\eXpressApp Framework\FeatureCenter. The ASP.NET Web Forms version of this demo is available online at https://demos.devexpress.com/XAF/FeatureCenter/.

Dashboards Module Capabilities

Dashboards Module Components

Modules

Integrated DevExpress Controls

• DashboardDesigner - used to design dashboards in a WinForms application.
• DashboardViewer - used to view dashboards in a WinForms application.
• ASPxDashboard - used to view and create dashboards in an ASP.NET Web Forms application.
• DxDashboard - used to view and create dashboards in an ASP.NET Core Blazor application.

View Items

The Dashboards Module uses the following View Items to host dashboard controls in WinForms, ASP.NET Web Forms, and ASP.NET Core Blazor XAF applications:

• WinDashboardViewerViewItem
• WebDashboardViewerViewItem
• BlazorDashboardViewerViewItem

Application Model Extensions

The Dashboards Module extends the Application Model with the IModelDashboardNavigationItem node and adds the IModelClassDashboardsVisibility.IsVisibleInDashboards property to the IModelClass node.

Dashboard Data Type

The Module uses the following built-in business objects (entities) that implement the IDashboardData interface to store dashboards:

• DevExpress.Persistent.BaseImpl.DashboardData (in XPO-based applications)
• DevExpress.Persistent.BaseImpl.EF.DashboardData (in EF Core and EF 6-based applications)

You can also use a custom dashboard data type. To do this, inherit DashboardData or implement the IDashboardData interface and pass the implemented type to the DashboardsModule.DashboardDataType property.

Add the Dashboards Module to Your Application

Follow the steps below to add the Dashboards Module to your application. If you added this Module when you created an XAF application, the Solution Wizard generates the code demonstrated in this section automatically.

1. Add the platform-agnostic and required platform-specific NuGet packages from the following table:

   Package	Project
   DevExpress.ExpressApp.Dashboards	platform-agnostic module project (MySolution.Module)
   DevExpress.ExpressApp.Dashboards.Blazor	Blazor-specific module project (MySolution.Blazor.Server)
   DevExpress.ExpressApp.Dashboards.Win	WinForms-specific module project (MySolution.Win)
   DevExpress.ExpressApp.Dashboards.Web	ASP.NET Web Forms-specific module project (MySolution.Web)

2. In the application constructor, add the platform-agnostic and platform-specific Dashboards Modules to the Modules collection:

   WinForms
   File: MySolution.Win\WinApplication.cs.

   • C#
   • VB.NET

   using DevExpress.ExpressApp.Dashboards;
   using DevExpress.ExpressApp.Dashboards.Win;
   // ...
   public partial class MySolutionWindowsFormsApplication : WinApplication {
       public MySolutionWindowsFormsApplication() {
           // ...
           Modules.Add(new DashboardsModule() { 
               // uncomment the following line in EF Core-based applications
               // DashboardDataType = typeof(DevExpress.Persistent.BaseImpl.EF.DashboardData) 
           });
           Modules.Add(new DashboardsWindowsFormsModule());
       }
       // ...
   }
   

   ASP.NET Web Forms
   File: MySolution.Web\WebApplication.cs.

   • C#
   • VB.NET

   using DevExpress.ExpressApp.Dashboards;
   using DevExpress.ExpressApp.Dashboards.Web;
   // ...
   public partial class MySolutionAspNetApplication : WebApplication {
       public MySolutionAspNetApplication() {
           // ...
           Modules.Add(new DashboardsModule() { 
               // uncomment the following line in EF 6-based applications
               // DashboardDataType = typeof(DevExpress.Persistent.BaseImpl.EF.DashboardData) 
           });
           Modules.Add(new DashboardsAspNetModule());
       }
       // ...
   }
   

   ASP.NET Core Blazor
   File: MySolution.Blazor.Server\BlazorApplication.cs.

   • C#

   using DevExpress.ExpressApp.Dashboards;
   using DevExpress.ExpressApp.Dashboards.Blazor;
   // ...
   public partial class MySolutionBlazorApplication : BlazorApplication {
       public MySolutionBlazorApplication() {
           // ...
           Modules.Add(new DashboardsModule() { 
               // uncomment the following line in EF Core-based applications
               // DashboardDataType = typeof(DevExpress.Persistent.BaseImpl.EF.DashboardData) 
           });
           Modules.Add(new DashboardsBlazorModule());
       }
       // ...
   }
   

   Tip

   • Alternatively, you can add these Modules to the ModuleBase.RequiredModuleTypes collection of the platform-specific Module.
   • In .NET Framework applications, you can also use the Module Designer and Application Designer to add a module to your project.

3. In EF Core-based applications, include the DashboardData entity in the data model:

   File: MySolution.Module\BusinessObjects\MySolutionDbContext.cs.

   • C#
   • VB.NET

   using DevExpress.Persistent.BaseImpl.EF;
   // ...
   public class MySolutionEFCoreDbContext : DbContext {
       // ...
       public DbSet<DashboardData> DashboardData { get; set; }
       // ...
   }
   

4. In ASP.NET Core Blazor applications, do the following in the MySolution.Blazor.Server\Startup.cs file:

   • In the Startup.ConfigureServices method, call the AddXafDashboards method to register Dashboards Module services.
   • In the Startup.Configure method, call the MapXafDashboards method to configure endpoints for the Dashboards Module.
   • C#

   using DevExpress.ExpressApp.Dashboards.Blazor;
   // ...
   public class Startup {
       // ...
       public void ConfigureServices(IServiceCollection services){
           //...
           services.AddXafDashboards();
       }
       public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
           // ...
           app.UseEndpoints(endpoints => {
               endpoints.MapXafDashboards();
               // ...
           }
       }
   }