VCL Backend: How to Use Memory-Based Data Sources

• Jan 26, 2026
• 5 minutes to read

VCL Backend implementation allows you to connect TdxDashboardControl and TdxReport components to data stored in memory using the TdxBackendInMemoryJSONConnection component.

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

In this topic…

• Configure a RAD Studio App Project
• Configure the Memory-Based JSON Connection Component
  • Code Example: Assign a JSON Data String
• Build & Run the Test App
  • Add and Configure a JSON Data Source
  • Bind a Dashboard Item to Data

Configure 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 component to a form and handle the component’s OnClick event.

Tip

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.

Code Example: Assign a JSON Data String

The following code example demonstrates an OnClick event handler that calls the SetJSONValue procedure to assign a table defined within a JSON string to the TdxBackendInMemoryJSONConnection component and displays the Dashboard Designer dialog:

Delphi

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

procedure TMyForm.cxButton1Click(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::cxButton1Click(TObject *Sender)
{
  // Define a table that consists of three columns ("id", "Region", and "Sales") and five data rows
  UnicodeString AJSONData =

    "[{\"id\": 1, \"Region\": \"Asia\", \"Sales\": 1.9576},"  // 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 Source";
  dxBackendInMemoryJSONConnection1->SetJSONValue(AJSONData);  // Assigns the defined JSON data string
  dxDashboardControl1->ShowDesigner();  // Displays the Dashboard Designer dialog
}

Build & Run the Test App

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

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.

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 the 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: