Skip to main content
A newer version of this page is available. .

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.

web-custom-item-tutorials-dashboard

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:

View Example: ASP.NET Core View Example: React

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

View Example: ASP.NET Core View Example: Angular View Example: React

web-dashboard-custom-item-gallery

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:

See Also