Web Dashboard Technical Overview
- 5 minutes to read
The Web Dashboard is a client-side control that 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
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:
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 the 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 the Web Dashboard side-by-side with DevExtreme client-side widgets to create highly responsive web apps.
Separated client and server parts require you to configure one Web Dashboard application as a server and to configure 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 Web Forms (UseDashboardConfigurator = false)1
ASP.NET Web Forms (UseDashboardConfigurator = true)
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
- 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 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 new extensions. For more information, see Extensions.
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 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 Preparing a Dashboard Storage topics in the required framework's section (for instance, ASP.NET Web Forms Dashboard Control - Preparing a Dashboard Storage).
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 the Security Considerations topic for more information.
Designer and Viewer Modes
Refer to the following Designer and Viewer Modes topics for different platforms: