Create a Table Report Using the Report Wizard

• Jul 28, 2026
• 8 minutes to read

This tutorial creates a new application, sets up an in-memory data source, adds a TdxReport component, and uses the Report Wizard dialog to set up a table report based on available data.

---

In this topic...

• Step 1 — Create & Configure a RAD Studio Project
  • Create & Configure a JSON Data Source
• Step 2 — Configure Data & Report Layout Using the Report Wizard
• Step 3 — Modify/Preview & Save the Generated Report Layout
  • Modify the Report Layout (Optional)
  • Preview & Save the Report Layout
• Step 4 — Display Report Viewer & Designer Dialogs at Runtime
• Step 5 — Build & Test Your First App
  • Post-Build Events for WebView2 Loader DLL Deployment
  • Run & Test the App
• Other Tutorials
  • Master-Detail Report Tutorials
  • Parametrized Report Tutorials

Step 1 — Create & Configure a RAD Studio Project

Create a new Delphi or C++Builder project. Use the Tool Palette to place the following DevExpress components on a form:

TdxBackendDataConnectionManager

Manages data sources for all reports in your application.

TdxReport

Manages report document layouts, end-user dialogs, and related settings.

Create & Configure a JSON Data Source

1. Copy the following connection string. The string points to a sample JSON data file hosted on GitHub by DevExpress:

   Connection String

   Uri=https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json
   

2. Double-click the TdxBackendDataConnectionManager component. In the Collection Editor dialog, select Add → In-Memory Data (JSON). This menu item creates a TdxBackendInMemoryJSONConnection component designed to load JSON data and bind it to your report.

   

3. Select the created component in the Collection Editor dialog. Paste the copied string to the ConnectionString property editor in the Object Inspector.

   

Step 2 — Configure Data & Report Layout Using the Report Wizard

Right-click the TdxReport component and select the Designer… option^[1] to display the Report Designer dialog. Click the hamburger button to display the Report Designer menu:

Select Design in the Report Wizard to display available report types:

Select Table Report on the Select Report Type page to create a tabular layout and click Next.

Select JSON on the Select Data Source page to use the previously configured JSON connection component as a data source and click Next.

Select the configured JSON connection component on the Specify Data Source Settings page and uncheck the following fields in the right pane (Select data fields): Address, ContactTitle, Fax, PostalCode, and Region.

Check Customers in panes 1 and 2 on the Define Report Layout page to use all data fields defined in the previous step and click Finish.

Step 3 — Modify/Preview & Save the Generated Report Layout

The Report Designer dialog displays the generated report layout. To switch between Design and Preview modes^[2], click corresponding buttons.

Modify the Report Layout (Optional)

You can modify the generated report layout as necessary (rearrange columns, customize appearance settings, add labels, logos, etc.). For example, you can move the Id column to the leftmost position.

Rearrange Columns

Switch to Design^[2] mode and do the following:

• 1. Select the Id header cell in the report layout.
• 2. Expand the REPORT EXPLORER pane.

• 3. Drag the header cell within the REPORT EXPLORER to the first position:

  

• 4. Select the Id detail cell in the report layout.

• 5. Drag the detail cell within the REPORT EXPLORER to the first position:

  

• 6. Collapse the REPORT EXPLORER pane and review the updated report layout (the Id column occupies the leftmost position within the report layout table).

  

Tip

Refer to the following section for detailed information on report layout customization options:

Reports for Web — Report Designer

Preview & Save the Report Layout

Click the PREVIEW button and review the resulting report document. The report title and table headers are followed by the data row template (repeated for every record in the bound JSON file).

Switch back to Design mode. Click the hamburger button, select the Save^[3] option, and specify a report layout name (CustomerList, for example).

The Report Designer dialog saves the current report layout and the specified name to the TdxReport component’s Layout and ReportName properties. These property values are stored in the RAD Studio project’s DFM file when defined at design time.

Step 4 — Display Report Viewer & Designer Dialogs at Runtime

Place two TcxButton components on a form. Change the predefined button captions to Display Designer and Display Viewer.

Double-click the Display Designer button and handle its OnClick event as follows:

Delphi

procedure TMyForm.cxButtonDisplayDesignerClick(Sender: TObject);
begin
  dxReport1.ShowDesigner;
end;

C++

void __fastcall TMyForm::cxButtonDisplayDesignerClick(TObject *Sender)
{
  dxReport1->ShowDesigner();
}

Switch to the Design form view, double-click the Display Viewer button and handle its OnClick event as follows:

Delphi

procedure TMyForm.cxButtonDisplayViewerClick(Sender: TObject);
begin
  dxReport1.ShowViewer;
end;

C++

void __fastcall TMyForm::cxButtonDisplayViewerClick(TObject *Sender)
{
  dxReport1->ShowViewer();
}

Step 5 — Build & Test Your First App

Post-Build Events for WebView2 Loader DLL Deployment

All applications that include the TdxReport component require the WebView2 Runtime as a dependency.

To automatically copy a 32- or 64-bit WebView2Loader.dll file to the target build folder, do the following:

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 command line for the target compiler and platform:

   All Delphi & C++ (Classic Compiler)

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

   C++ (64-bit Modern Compiler)

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

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

   

5. Optional. This step is required only for the Modern C++ RAD Studio compiler.

   If you use Windows 64-bit (Modern) as a build target, select the Windows 64-bit (Modern) platform (1), expand the Post-build events → Commands node (2), uncheck the Inherit option (3), and paste the Modern compiler-specific command into the Commands box (4):

   

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

7. 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 & Test the App

Run the app and click Display Viewer and Display Designer buttons to open end-user Report Designer and Report Viewer dialogs.

You can print and export reports using built-in UI elements within the Report Viewer dialog:

Other Tutorials

Master-Detail Report Tutorials

Read Tutorial: Create a Master-Detail Report (SQL Database)

Define a master-detail relationship between two tables, create the report layout in the Report Designer dialog at design time, and display the report in the Report Viewer end-user dialog at runtime.

The demonstrated solution defines SQL queries and a master-detail relationship at the TdxReport component level using the DevExpress XPO-based data connection component.

Featured Components: TdxReport | TdxBackendDataConnectionManager | TdxBackendDatabaseSQLConnection

Read Tutorial: Create a Master-Detail Report (FireDAC DataSet)

Load data from two tables in a sample SQLite database, configure the report layout using the Report Wizard, and display the resulting report in the Report Viewer end-user dialog at runtime.

The solution uses two SQL queries at the FireDAC dataset (TFDQuery) level and defines a master-detail relationship at the TdxReport component level using Data Federation.

Featured Components: TdxReport | TdxBackendDataConnectionManager | TdxBackendDataSetJSONConnection | TFDConnection | TFDQuery | TDataSource

Parametrized Report Tutorials

Read Tutorial: A Report Viewer in a Tabbed MDI (SQL Database)

Follow this tutorial to create a Tabbed MDI (multi-document interface) Report Viewer application where different tabs allow users to display the same parametrized report layout/template populated with different data loaded from a relational SQL database using a DevExpress XPO-based data connection component.

The demonstrated solution filters data using SQL queries and report parameters at the TdxReportControl component level.

Featured Components: TdxReportControl | TdxBackendDataConnectionManager | TdxBackendDatabaseSQLConnection | TdxTabbedMDIManager | TdxBarManager

Read Tutorial: A Report Viewer in a Tabbed MDI (FireDAC DataSet)

Follow this tutorial to create a Tabbed MDI (multi-document interface) Report Viewer application where different tabs display a parametrized report layout/template populated with different data loaded from a relational database using standard FireDAC components (TFDQuery and TFDConnection) shipped with the RAD Studio IDE.

The demonstrated solution filters data at the FireDAC dataset (TFDQuery) level using a SQL parameter.

Featured Components: TdxReportControl | TdxBackendDataConnectionManager | TdxBackendDataSetJSONConnection | TdxTabbedMDIManager | TdxBarManager | TFDConnection | TFDQuery | TDataSource

Tip

Refer to the following topic for a complete list of TdxReport/TdxReportControl tutorials: VCL Reports: Getting Started.

Footnotes

1. Alternatively, you can double-click the TdxReport component.

2. You can switch to Preview mode at any moment to ensure that the resulting report document looks as intended.

3. If you attempt to close the Report Designer dialog, you will be prompted to save pending report layout and data binding changes.