Web Dashboard Technical Overview

  • 5 minutes to read

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 client communicates with the server side using a RESTful API that allows to you send multiple data requests simultaneously. For example, if you change the master filter in a dashboard containing several detail items, all these items send their queries to the server. These requests are independently processed on the server side for better performance.

The table below illustrates correlations between server and client. The column headers display what you can use on a server side, the row headers show available client controls.

Client \ Server

ASP.NET HTTP Handlers

ASP.NET MVC Controller

ASP.NET Core Controller

ASP.NET Web Forms (ASPxDashboard's API)[1]

ASP.NET Web Forms (DashboardConfigurator's API)

OK

ASP.NET MVC Razor Extension

OK

OK

ASP.NET Core Razor Extension

OK

OK

Dashboard Component for Angular

OK

OK

Dashboard Component for React

OK

OK

Dashboard Component for Vue

OK

OK

Dashboard Control for JavaScript Applications (JQuery, Knockout, etc.)

OK

OK

Combined Application

A combined application comprises client and server parts in one application. The following framework-based wrappers for the DashboardControl are available when you create a Web Dashboard application:

NOTE

The ASP.NET Web Forms platform has limitations when processing multiple requests. See Server-Side API Overview for details on how to overcome the ASPxDashboard control's limitations.

Application with Separated Client and Server Parts

Separated client and server parts require you to configure an ASP.NET Core or ASP.NET MVC Dashboard control as a server and create the client Web Dashboard application.

You can use a Web Dashboard in the following ways:

  • Create cross-platform Web Dashboard applications.
  • Integrate a Dashboard into anything that supports HTTP requests (e.g., websites, web applications). For example, see the GitHub Pages Demo.
  • Publish the Web Dashboard as a part of applications based on Angular, Knockout, Vue and similar frameworks.
  • Use the Dashboard with DevExtreme client-side widgets to create responsive web apps.

The Web Dashboard has the following components that are wrappers over client DashboardControl:

You can also integrate DashboardControl into JavaScript Applications (JQuery, Knockout, etc.).

TIP

Set up cross-origin resource sharing (CORS) on your back-end to configure corresponding permissions to access selected resources from a server at a different origin.

Client-Side Specifics

On the client side, a Web Dashboard is a DashboardControl. The DashboardControl object uses DevExtreme widgets to display data within dashboard items and render UI elements.

Independent modules called extensions allow you to implement end-user functionality such as exporting, binding to data, the toolbox, etc. You can customize existing extensions (for instance, add or remove commands from the dashboard menu) or create a new extension.

For ASP.NET Web Forms and ASP.NET MVC wrappers, you can use ASPxClientDashboard as a client-side equivalent of the ASPxDashboard control and MVCxDashboard extension. The ASPxClientDashboard object is a wrapper over the DashboardControl with a similar API. Go to Client-Side API Overview for details.

For ASP.NET Core, get access to the DashboardControl directly.

The Web Dashboard also has React and Angular components that are wrappers over the client DashboardControl.

Web Dashboard Client Architecture for Wrappers

The DashboardControl requires third-party (such as JQuery, JQuery-UI, and Knockout) and DevExtreme libraries. See Required Client Libraries for more information.

Server-Side Specifics

Web Dashboard needs a server-side background to operate with data, store dashboards, etc. Configure the settings below before the first use:

Create Dashboard Storage

The Web Dashboard requires you to create a special dashboard storage to keep the dashboards. End users can save new dashboards to this storage and open existing dashboards.

The following storage types are available:

  • In-Memory Storage - An in-memory dashboard storage.
  • File Storage - A dashboard file storage that is used to keep dashboard XML definitions in a file system.
  • Custom Storage - A custom storage (for instance, you can save dashboards to a database).
  • Dashboard Type Storage - A storage for dashboards created at design time within Visual Studio.

See the following documentation for details:

Provide Data

Use the following approaches to supply the Web Dashboard with data:

Designer and Viewer Modes

The Web Dashboard can act as the Designer or Viewer. You can set the default working mode on a server side, or switch between the Designer and Viewer with the client-side API.

Refer to the following Designer and Viewer Modes topics for different platforms:

Footnotes
  1. It is default ASPxDashboard mode. The control uses the ASPxDashboard's API for server-side configuration and sends requests only to its own instance.