vcl-405760-expressreports-getting-started-create-table-report-using-report-wizard.md
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...
Create a new Delphi or C++Builder project. Place two components on the form (Tool Palette Category – DevExpress ):
TdxBackendDataConnectionManagerManages data sources for all reports in your application.TdxReportManages report document layouts, end-user dialogs, and related settings.
Copy the following connection string. The string points to a sample JSON data file hosted on GitHub by DevExpress:
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.
Select the created component in the Collection Editor dialog. Paste the copied string to the ConnectionString property editor in the Object Inspector.
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.
The Report Designer dialog displays the generated report layout. To switch between Design and Preview modes[2], click corresponding buttons.
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
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.
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:
procedure TMyForm.cxButtonDisplayDesignerClick(Sender: TObject);
begin
dxReport1.ShowDesigner;
end;
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:
procedure TMyForm.cxButtonDisplayViewerClick(Sender: TObject);
begin
dxReport1.ShowViewer;
end;
void __fastcall TMyForm::cxButtonDisplayViewerClick(TObject *Sender)
{
dxReport1->ShowViewer();
}
All applications that include the TdxReport component require the WebView2 Runtime as a dependency.
To automatically place a 32 or 64-bit WebView2Loader.dll file into the target build folder, you must:
Open the Project Options dialog (select the Project → Options… item in the RAD Studio menu or press Ctrl + Shift + F11).
Select Build → Build Events in the tree view pane on the left and select the following option in the Target combo box:
Copy the following command line:
Paste the DLL deployment command line into the Commands box:
Click the Save button to apply pending changes and close the Project Options dialog.
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 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:
Footnotes
Alternatively, you can double-click the TdxReport component.
You can switch to Preview mode at any moment to make certain that the resulting report document looks as intended.
If you attempt to close the Report Designer dialog, you will be prompted to save pending report layout and data binding changes.
See Also
VCL Reports/Dashboards: Supported Database Systems
VCL Reports (Report Designer & Viewer) for Delphi/C++Builder
Sample GitHub Projects for VCL Reports (Report Designer & Viewer)