Files to look at:

• HelloWorldItem.js
• DataAwareItem.js
• FunnelChartItem.js
• App.js

Dashboard for React - Custom Item Tutorials

The example contains the source code of the scripts created in this step-by-step tutorials.

This example uses a client-server architecture. The server (backend) project communicates with the client (frontend) application that includes all the necessary styles, scripts and HTML templates. Note that the script version on the client must match the version of libraries on the server.

• The asp-net-core-server folder contains the backend project built with ASP.NET Core 3.1.
• The dashboard-react-app folder contains the client application built with React.

Static Custom Item

View Tutorial: Create a Static Custom Item

View Script: HelloWorldItem.js

The script contains a HelloWorld static custom item with a custom property that allows you to change the static text.

Data-Aware Custom Item

View Tutorial: Create a Data-Aware Custom Item

View Script: DataAwareItem.js

This script contains a data-aware custom item that displays formatted dimension values and allows users to color these values.

Data-Aware Item based on External Visualization Widget

View Tutorial: Create a Data-Aware Item based on an External Visualization Widget

View Script: FunnelChartItem.js

This script contains a more "real-world" custom item that uses an external visualization widget. In this example, it is the dxFunnel widget that can show values across multiple stages in a process. This widget supports data binding, master filtering, and coloring.

Quick Start

In the asp-net-core-server folder, run the following command:

dotnet run

See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: Install DevExpress Controls Using NuGet Packages.

This server allows CORS requests from all origins with any scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: Cross-Origin Resource Sharing (CORS)

In the dashboard-react-app folder, run the following commands:

npm install
npm start

Open http://localhost:3000/ in your browser to see the result.

Documentation

• Create a Custom Item
• Install DevExpress Controls Using NuGet Packages

More Examples

• Dashboard for ASP.NET Core - Custom Item Tutorials