VCL Reports/Dashboards: How to Use Memory-Based or Remote API Data Sources

• Mar 11, 2026
• 7 minutes to read

The VCL Backend implementation allows you to connect TdxDashboard/TdxDashboardControl and TdxReport components to in-memory or remote JSON data using the TdxBackendInMemoryJSONConnection component. The component can load data from a JSON string defined in code or access remote Web API service endpoints using a connection string that can include the target URI, username, password, access tokens, and additional parameters.

Follow the steps described in this topic to load JSON data in a TdxBackendInMemoryJSONConnection component and use the component as a data source for ExpressReports or ExpressDashboards.

In this topic…

• Configure & Build a RAD Studio App Project
  • Configure the Memory-Based JSON Connection Component
  • Use Remote Web Service Endpoint (Alternative)
• Build & Run the Test App
  • Add and Configure a JSON Data Source
  • Bind a Dashboard Item to Data
• Next Steps
• Other Supported Database Systems
  • Built-In Support
  • Database Providers That Require Assembly Deployment

Configure & Build a RAD Studio App Project

Create a new project and place TdxDashboardControl and TdxBackendDataConnectionManager components on a form.

Double-click the TdxBackendDataConnectionManager component on the form to open the Collection Editor dialog, click the Add button, and select the In-Memory Data (JSON) option to create a TdxBackendInMemoryJSONConnection component:

Configure the Memory-Based JSON Connection Component

The previously added TdxBackendInMemoryJSONConnection component is designed to store data in memory. To configure this component and load JSON data, add a TcxButton to a form and handle the button’s OnClick event as demonstrated in the following code example:

Delphi

uses
  dxDashboard.Control,              // Declares the TdxDashboardControl component
  dxBackend.ConnectionString.JSON;  // Declares the TdxBackendInMemoryJSONConnection component
// ...

procedure TMyForm.cxDisplayDesignerButtonClick(Sender: TObject);
var
  AJSONData: string;
begin
  // Define a table that consists of three columns ("id", "Region", and "Sales") and five data rows:
  AJSONData :=

  '[{"id": 1, "Region": "Asia",          "Sales": 4.7685},' +  // Row #1
   '{"id": 2, "Region": "Australia",     "Sales": 1.9576},' +  // Row #2
   '{"id": 3, "Region": "Europe",        "Sales": 3.3579},' +  // Row #3
   '{"id": 4, "Region": "North America", "Sales": 3.7477},' +  // Row #4
   '{"id": 5, "Region": "South America", "Sales": 1.8237}]';   // Row #5

  // Specify a user-friendly data connection name (for end-user dialogs):
  dxBackendInMemoryJSONConnection1.DisplayName := 'Memory-Based JSON Data Storage';
  dxBackendInMemoryJSONConnection1.SetJSONValue(AJSONData);  // Assigns the defined JSON data string
  dxDashboardControl1.ShowDesigner;                          // Displays the Dashboard Designer dialog
end;

C++

#include "dxDashboard.Control.hpp"              // Declares the TdxDashboardControl component
#include "dxBackend.ConnectionString.JSON.hpp"  // Declares the TdxBackendInMemoryJSONConnection component

// Add the following linker directives to the corresponding CPP source file:
#pragma link "dxDashboard.Control"              // Required to use dxDashboard.Control.hpp declarations
#if defined(_WIN64)  // Required to use dxBackend.ConnectionString.JSON.hpp declarations
  #pragma link "dxBackend.ConnectionString.JSON.o"
#else
  #pragma link "dxBackend.ConnectionString.JSON.obj"
#endif
// ...

void __fastcall TMyForm::cxDisplayDesignerButtonClick(TObject *Sender)
{
  // Define a table that consists of three columns ("id", "Region", and "Sales") and five data rows:
  UnicodeString AJSONData =

    L"[{\"id\": 1, \"Region\": \"Asia\",          \"Sales\": 1.9576},"  // Row #1
     L"{\"id\": 2, \"Region\": \"Australia\",     \"Sales\": 1.9576},"  // Row #2
     L"{\"id\": 3, \"Region\": \"Europe\",        \"Sales\": 3.3579},"  // Row #3
     L"{\"id\": 4, \"Region\": \"North America\", \"Sales\": 3.7477},"  // Row #4
     L"{\"id\": 5, \"Region\": \"South America\", \"Sales\": 1.8237}]"  // Row #5

  // Specify a user-friendly data connection name (for end-user dialogs):
  dxBackendInMemoryJSONConnection1->DisplayName = "Memory-Based JSON Data Source";
  dxBackendInMemoryJSONConnection1->SetJSONValue(AJSONData);  // Assigns the defined JSON data string
  dxDashboardControl1->ShowDesigner();                        // Displays the "Dashboard Designer" dialog
}

Use Remote Web API Service Endpoint (Alternative)

The following code example uses a sample JSON file hosted on GitHub by DevExpress as a data source for the TdxBackendInMemoryJSONConnection component:

Delphi

uses
  dxDashboard.Control,              // Declares the TdxDashboardControl component
  dxBackend.ConnectionString.JSON;  // Declares the TdxBackendInMemoryJSONConnection component
// ...

procedure TMyForm.cxDisplayDesignerButtonClick(Sender: TObject);
var
  AUri: string;
begin
  AUri := 'Uri=https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json';
  // Specify a user-friendly data connection name (for end-user dialogs):
  dxBackendInMemoryJSONConnection1.DisplayName := 'Memory-Based JSON Data Storage';
  dxBackendInMemoryJSONConnection1.ConnectionString := AUri;  // Assigns the target Web Service URI
  dxDashboardControl1.ShowDesigner;                           // Displays the "Dashboard Designer" dialog
end;

C++

#include "dxDashboard.Control.hpp"              // Declares the TdxDashboardControl component
#include "dxBackend.ConnectionString.JSON.hpp"  // Declares the TdxBackendInMemoryJSONConnection component

// Add the following linker directives to the corresponding CPP source file:
#pragma link "dxDashboard.Control"              // Required to use dxDashboard.Control.hpp declarations
#if defined(_WIN64)  // Required to use dxBackend.ConnectionString.JSON.hpp declarations
  #pragma link "dxBackend.ConnectionString.JSON.o"
#else
  #pragma link "dxBackend.ConnectionString.JSON.obj"
#endif
// ...

void __fastcall TMyForm::cxDisplayDesignerButtonClick(TObject *Sender)
{
  UnicodeString AUri;
  AUri = "Uri=https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json";
  // Specify a user-friendly data connection name (for end-user dialogs):
  dxBackendInMemoryJSONConnection1->DisplayName = "Memory-Based JSON Data Source";
  dxBackendInMemoryJSONConnection1->ConnectionString = AUri;  // Assigns the target Web Service URI
  dxDashboardControl1->ShowDesigner();                        // Displays the "Dashboard Designer" dialog
}

Alternatively, you can select the created TdxBackendInMemoryJSONConnection component in the Collection Editor and specify all required settings (including source data in JSON format or a connection string for a remote data source) using the Object Inspector.

Build & Run the Test App

The application form contains TdxDashboardControl and TcxButton components:

Build the project and place the WebView2Loader.dll file from the EdgeView2 SDK GetIt package into the project folder containing the built executable file.

Automatic WebView2Loader.dll Deployment

To automatically place a 32 or 64-bit WebView2Loader.dll file into the target build folder, you must:

1. Open the Project Options dialog (select the Project → Options… item in the RAD Studio menu or press Ctrl + Shift + F11).

2. Select Build → Build Events in the tree view pane on the left and select the following option in the Target combo box:

   'All Configurations - All Platforms'

   

3. Copy the following command line:

   copy /Y "$(BDS)\Redist\$(Platform)\WebView2Loader.dll" $(OUTPUTDIR)
   

4. Paste the DLL deployment command line into the Commands box:

   

5. Click the Save button to apply pending changes and close the Project Options dialog.

6. Build the project. Confirm that the configured post-build event is trusted in the following dialog:

   

All build operations in the current RAD Studio project now ensure that the platform-specific WebView2Loader.dll file version is available in the target build folder (for both Debug and Release configurations).

Run the built executable and click the previously added button to display the DevExpress Dashboard Designer dialog.

Add and Configure a JSON Data Source

Click the hamburger button, select the Data Sources item, and click the Add link in the DATA SOURCES pane:

Click the Create data source… link in the Add Data Source modal dialog:

Select JSON in the Dashboard Data Source Wizard modal dialog and click Next:

The wizard displays the created data connection using its display name specified earlier.

Click Next to display fields loaded from source JSON data:

Click Finish to complete data source configuration. The Add Data Source dialog now displays the configured JSON data source:

Click Add to publish the data source for dashboard elements and close the Add Data Source dialog. The DATA SOURCES pane displays all fields and corresponding data types for the selected JSON data source:

Select the Save option in the hamburger menu to apply pending changes.

Bind a Dashboard Item to Data

Click the Grid button in the Dashboard Designer dialog to create a Grid dashboard item.

Use the Click here link within the Grid client area and click the Add Column button within the BINDING callout.

Select the Region field to associate it with the created grid column:

Click Add Column and select the Sales field to create a second column. Close the BINDING pane. The Grid dashboard item displays two columns populated with field values stored within the configured memory-based JSON connection component:

Next Steps

Review the following tutorials to get started with TdxDashboardControl and TdxReport components:

Create a Dashboard Using the Designer Dialog

Create a dashboard application: configure Bubble Map and Chart dashboard items, and bind them to data at design time.

Create a Table Report Using the Report Wizard

Create a simple report application: define a table report layout and bind it to data using the Report Wizard dialog at design time.

Other Supported Database Systems

Refer to the following topics for step-by-step instructions on using corresponding database systems for ExpressReports and ExpressDashboards:

Built-In Support

SQLite

SQLite is a file-based relational database engine.

Microsoft SQL/Azure Databases

Microsoft SQL Server and Azure SQL Database are proprietary relational database management systems developed by Microsoft.

Database Providers That Require Assembly Deployment

PostgreSQL

PostgreSQL is an open-source database management system.

Oracle Database

Oracle Database is a proprietary multi-model database management system developed by the Oracle Corporation.

MySQL

MySQL is an open-source relational database management system developed by the Oracle Corporation.

Firebird

Firebird is an open-source SQL relational database management system.