Web Dashboard Technical Overview

• Mar 19, 2021
• 6 minutes to read

The Web Dashboard consists of client and server parts:

Client

The client is a JavaScript application that supplies users with a UI to design and interact with a dashboard. The DashboardControl is the underlying control. The client communicates with the server using HTTP requests.

Server

The server is an ASP.NET Core or ASP.NET MVC application that handles client data requests and provides access to data sources, dashboard storage and other backend capabilities.

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)
ASP.NET MVC Razor Extension
ASP.NET Core Razor Extension
Dashboard Component for Angular
Dashboard Component for React
Dashboard Component for Vue
Dashboard Control for JavaScript Applications (JQuery, Knockout, etc.)

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:

• ASP.NET Core Dashboard Control
• ASP.NET MVC Dashboard Extension
• ASP.NET Web Forms Dashboard Control

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:

• Dashboard Component for Angular
• Dashboard Component for React
• Dashboard Component for Vue

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.

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:

• DashboardConfigurator - Prepare Dashboard Storage
• ASPxDashboard - Prepare Dashboard Storage

Provide Data

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

• Register a set of default data sources that will be available in the Data Source Wizard.
  • DashboardConfigurator - Register Default Data Sources
  • ASPxDashboard - Register Default Data Sources
• Add predefined data connections and allow end users to create their own data sources.
  • DashboardConfigurator - Register Default Data Connections
  • ASPxDashboard - Register Default Data Connections

Designer and Viewer Modes

The Web Dashboard can act as a designer or viewer. The following modes are available:

Designer

The Web Dashboard works as a designer and allows users to create, edit, and save dashboards. In this mode, the Web Dashboard loads the extensions required to design dashboards. A user can switch the Web Dashboard to Viewer mode and can modify dashboards from storage on the client side. This is the default mode.

Viewer

The Web Dashboard works as a viewer and displays dashboards to users. In this mode, the Web Dashboard also loads the extensions required to design dashboards. A user can switch the Web Dashboard to Designer mode.

ViewerOnly

The Web Dashboard does not load the extensions required to design dashboards. Users cannot switch to Designer or Viewer modes on the client. This mode affects only the Web Dashboard’s UI and does not afffect server settings. See the following topic for information on how to protect your data: Working Mode Access Rights.

You can set the default working mode on the server, or switch between modes with the client-side API.

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

• ASP.NET Core
• ASP.NET MVC
• ASP.NET Web Forms
• Angular
• React
• Vue
• JavaScript Applications

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.