Web Dashboard Technical Overview
- 5 minutes to read
The Web Dashboard is a client-side control which communicates with server part using HTTP requests:
- The client part is the DashboardControl that supplies end-users with a UI for designing a dashboard and interacting with it.
- The server part handles client data requests and provides various backend capabilities such as accessing data, storing dashboards, etc.
The client communicates with the server part using a RESTful API, allowing 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.
- Combined Application
- Application with Separated Client and Server Parts
- Client and Server Specifics
- Designer and Viewer Modes
Combined Application
A combined application comprises client and server parts in one application. The following frameworks-based wrappers for the DashboardControl are available when creating a Web Dashboard application:
Or you can combine the client HTML JavaScript Dashboard Control with the server side in one application:
- HTML JavaScript Dashboard Control + ASP.NET MVC Server-Side Configuration
- HTML JavaScript Dashboard Control + ASP.NET Core Server-Side Configuration
Note
The ASP.NET WebForms platform has some 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 allow you to use Web Dashboard in the following ways:
- Create cross-platform Web Dashboard applications.
- Integrate Web Dashboard in any place that supports HTTP requests (e.g., see the GitHub Pages Demo).
- Publish the Web Dashboard as a part of applications based on Angular, Knockout, Vue and similar frameworks.
- Use Web Dashboard side-by-side with DevExtreme client-side widgets to create highly responsive web apps.
Separated client and server parts require configuring one Web Dashboard application as a server and configuring another Web Dashboard application as a client to enable working with the server.
The table below illustrates correlations between server and client. The column headers display platforms you can use as a server, the row headers show available client counterparts.
Client \ Server | ASP.NET HTTP Handlers | ASP.NET MVC | ASP.NET Core |
|---|---|---|---|
ASP.NET Web Forms (UseDashboardConfigurator = false)1 |
|
|
|
ASP.NET Web Forms (UseDashboardConfigurator = true) |
|
|
|
ASP.NET MVC |
|
|
|
ASP.NET Core |
|
|
|
HTML JS |
|
|
|
2
1 It is a default ASPxDashboardControl mode. See Server-Side API Overview to learn more.
2 In this case, the Web Forms Dashboard sends requests only to its own instance.
Note that you need to 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 and Server Specifics
Client-Side Specifics
On the client side, you can use ASPxClientDashboard for Web Forms and MVC wrappers or get access to the HTML JavaScript Dashboard Control directly.
- The ASPxClientDashboard object is a wrapper over the DashboardControl with a similar API. Go to Client-Side API Overview to learn more.
- The DashboardControl object uses DevExtreme widgets to visualize data within dashboard items and render various UI elements. The HTML JavaScript dashboard allows you to maintain specific end-user capabilities (exporting, binding to data, the toolbox capabilities, etc.) using independent modules called extensions. You can customize existing extensions (for instance, add or remove commands from the dashboard menu) or create new extensions to add the required functionality. To learn more, see Extensions.
Note
The DashboardControl requires various third-party (such as JQuery, JQuery-UI, Knockout, and Globalize) 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. You need to configure some specific settings before the first use:
Create a Dashboard Storage
The Web Dashboard requires creating 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 is used to keep dashboard XML definitions in a file system.
- Custom Storage - Allows you to create a custom storage (for instance, you can save dashboards to a database).
- Dashboard Type Storage - A storage of dashboards created at design time within Visual Studio.
See the Preparing a Dashboard Storage topics in the required framework‘s section (for instance, ASP.NET Web Forms Dashboard Control - Preparing a Dashboard Storage).
Provide Data
Use the following approaches to supply the Web Dashboard with data:
- Register a set of default data sources. See Register Default Data Sources to learn how to do this for the ASPxDashboard control.
- Add data connections allowing end-users to create their own data sources. For the ASPxDashboard control, refer to Register Default Data Connections. Note that end-users are not allowed to use data connections by default. See Security Considerations topic to learn more.
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 using the client-side API. See the Designer and Viewer Modes topics for a required framework‘s section (for instance, Designer and Viewer Modes).