Dashboard for Angular - How to Implement a Custom Service and UI for Managing Dashboards List

This example shows how to create a custom list of dashboards similar to the Dashboard Panel.

Server

The DevExtreme ASP.NET Data package's API is used to prepare a list of dashboard names with their IDs. Identifiers are based on the Products table from the Northwind database and accessed through the Entity Framework Core. The DashboardPanelController.Dashboards action method call returns this list.

You need to implement the custom dashboard storage to store dashboards. Call the IDashboardStorage.LoadDashboard method to return the corresponding dashboard from this storage. This example uses a single dashboard XML template (the DashboardTemplate.xml file) and only modifies the dashboard's title to emulate different dashboards. In this particular usage scenario, you can store dashboard layouts in the database and load them from here (for example, see Dashboard for ASP.NET Core - How to load and save dashboards from/to a database).

Client

The dxList widget is used to load and display the list of dashboards. The searchEnabled option of this widget is enabled to allow search. You can use other widget options to enable the required functionality. For example, the itemDragging.allowReordering option allows end users to reorder items (see Item Dragging).

NOTE: This example uses the ProductID database field as a dashboard's ID. The field's type is number while the DashboardInfo.ID property and the IDashboardStorage.LoadDashboard method's argument type is string. It is necessary to convert types. In this example, this is done in the NorthwindContext.OnModelCreating method (see NorthwindContext.cs).

Files to Review

• Startup.cs
• DashboardPanelController.cs
• CustomDashboardStorage.cs
• Product.cs
• NorthwindContext.cs
• app.component.ts
• app.component.html

Quick Start

Server

Run the following command in the asp-net-core-server folder:

dotnet run

The server starts at http://localhost:5000 and the client gets data from http://localhost:5000/api/dashboard. To debug the server, run the asp-net-core-server application in Visual Studio and change the client's serverUrl property according to the listening port: https://localhost:44396/.

See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: Install DevExpress Controls Using NuGet Packages.

This server allows CORS requests from all origins with any scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: Cross-Origin Resource Sharing (CORS)

Client

In the dashboard-angular-app folder, run the following commands:

npm install
npm start

Open http://localhost:4200/ in your browser to see the Web Dashboard application.

Documentation

• Prepare Dashboard Storage

More Examples

• Dashboard for ASP.NET Core - How to Implement a Custom Service and UI for Managing Dashboards List
• Dashboard for ASP.NET Core - How to load and save dashboards from/to a database

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)