Create a Custom Item for the Web Dashboard
- 2 minutes to read
In addition to built-in dashboard items, you can implement and embed custom items into the Web Dashboard. A custom item is a JavaScript extension that supports data shaping, interactivity, export, and other item-related features. If you are not familiar with the basic concepts of extensions, please start with the following topic: Extensions Overview.
The tutorials below describe how to create custom items step by step:
- Static Item
- Create a custom Hello World item that displays static text and allows a user to change this text in the UI.
- Data-Aware Item
- Create a custom item that displays formatted dimension values and allows users to color these values.
- Data-Aware Item Based on an External Visualization Widget
- Create a custom item that uses the external dxFunnel widget. This widget supports data binding, master filtering, and coloring.
You can download the projects with the ready-to-use custom items based on the tutorials above:
Custom Item Gallery
The Custom Item Gallery contains custom items created from the most popular user requests. You can find the following custom items inside:
- Simple Table
- Parameter Item
- Online Map
- Web Page
- Gantt Chart
- Funnel D3 Chart
- Polar Chart
- Hierarchical Tree View
Export Limitations
A custom item does not support the default export mechanism. For example, you cannot use WebDashboardExporter / ASPxDashboardExporter to export custom items. In this instance, you need to implement custom export:
- On the client, override the CustomItemViewer.getExportInfo method and pass an object with the
image
field. Encode the image in the ASCII format using the Base64 scheme to display a custom item in the exported document. - If you cannot generate an image on the client, implement your own export logic on the server side. For this, handle the DashboardConfigurator.CustomExport / ASPxDashboard.CustomExport events.