VCL Reports/Dashboards: How to Use PostgreSQL

• Mar 11, 2026
• 7 minutes to read

PostgreSQL is an open-source relational database management system. You can connect TdxDashboard/TdxDashboardControl and TdxReport components to PostgreSQL databases using the TdxBackendDatabaseSQLConnection component.

In this topic…

• Configure & Build a RAD Studio App Project
  • Configure the SQL Connection Component
• Deploy & Run the Test App
  • Obtain & Deploy Dependencies
  • Run App & Test Database Connection
• Next Steps
• Other Supported Database Systems
  • Built-In Support
  • Database Providers That Require Assembly Deployment

Tip

Prerequisites: To use this guide, your development environment should include a configured PostgreSQL server component and test database table.

Prerequisites — Install PostgreSQL Components & Create a Test Database

1. Download a supported PostgreSQL server package for Microsoft Windows (18.1, for example): Download PostgreSQL.

2. Install PostgreSQL components:

   

3. Run the installed pgAdmin app and expand the Servers node in the Object Explorer.

4. Select the Databases node and create a new database (press Alt + Shift + N or right-click the node and select Create → Database…):

   

5. Specify a database name (dashboard_test) and click Save.

   

6. Run the Query Tool (press Alt + Shift + Q or right-click dashboard_test and select Query Tool):

   

7. Execute the following SQL query to create an empty products test table:

   create table products (
    id serial primary key,
    name varchar(100) not null,
    price int not null
   );
   

8. Execute the following SQL query to populate the table:

   insert into products (name, price) values
   ('Red Apple', 1.20),
   ('Orange Juice', 2.50),
   ('Chocolate Bar', 0.99);
   

9. Execute all SQL queries listed in this section to create a new PostgreSQL user and all necessary permissions. Run each line as a separate query according to the comments:

   create user myuser with password '123';  /* Query #1 */
   grant all privileges on database postgres to myuser; /* Query #2 */
   grant all privileges on table products to myuser; /* Query #3 */
   grant all privileges on sequence products_id_seq to myuser; /* Query #4 */
   

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 Database (SQL) option to create a TdxBackendDatabaseSQLConnection component:

Configure the SQL Connection Component

The previously added TdxBackendDatabaseSQLConnection component connects to the source PostgreSQL database using a connection string. To configure this component and specify a valid connection string, add a TcxButton component to a form and handle the component’s OnClick event as demonstrated in the following code example:

Delphi

uses
  dxDashboard.Control,             // Declares the TdxDashboardControl component
  dxBackend.ConnectionString.SQL;  // Declares the TdxBackendDatabaseSQLConnection component
// ...

procedure TMyForm.cxDisplayDesignerButtonClick(Sender: TObject);
begin
  dxBackendDatabaseSQLConnection1.Active := False;  // Terminates the current connection (if one exists)
  // Specify a user-friendly data connection name (for end-user dialogs) and a valid connection string:
  dxBackendDatabaseSQLConnection1.DisplayName := 'PostgreSQL Database Connection';
  dxBackendDatabaseSQLConnection1.ConnectionString :=

    'XpoProvider=Postgres;' +     // Specifies the database engine type
    'Server=127.0.0.1;' +         // Specifies the database host IP address
    'User ID=myuser;' +           // Specifies a valid user name
    'Password=123;' +             // Specifies the corresponding password for the user name
    'Database=dashboard_test;' +  // Specifies the target database name
    'Encoding=UNICODE';           // Sets UTF-8 as the required encoding

  dxBackendDatabaseSQLConnection1.Active := True;   // Connects to the test database
  dxDashboardControl1.ShowDesigner;                 // Displays the "Dashboard Designer" dialog
end;

C++

#include "dxDashboard.Control.hpp"             // Declares the TdxDashboardControl component
#include "dxBackend.ConnectionString.SQL.hpp"  // Declares the TdxBackendDatabaseSQLConnection 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.SQL.hpp declarations
  #pragma link "dxBackend.ConnectionString.SQL.o"
#else
  #pragma link "dxBackend.ConnectionString.SQL.obj"
#endif
// ...

void __fastcall TMyForm::cxDisplayDesignerButtonClick(TObject *Sender)
{
  dxBackendDatabaseSQLConnection1->Active = false; // Terminates the current connection (if one exists)
  // Specify a user-friendly data connection name (for end-user dialogs) and a valid connection string:
  dxBackendDatabaseSQLConnection1->DisplayName = "PostgreSQL Database Connection";
  dxBackendDatabaseSQLConnection1->ConnectionString =

    L"XpoProvider=Postgres;"     // Specifies the database engine type
    L"Server=127.0.0.1;"         // Specifies the database host IP address
    L"User ID=myuser;"           // Specifies a valid user name
    L"Password=123;"             // Specifies the corresponding password for the user name
    L"Database=dashboard_test;"  // Specifies the target database name
    L"Encoding=UNICODE";         // Sets UTF-8 as the required encoding

  dxBackendDatabaseSQLConnection1->Active = true;   // Connects to the test database
  dxDashboardControl1->ShowDesigner();              // Displays the "Dashboard Designer" dialog
}

Tip

Alternatively, you can select the created TdxBackendDatabaseSQLConnection component in the Collection Editor and specify all required settings using the Object Inspector.

Deploy & Run the Test App

Obtain & Deploy Dependencies

1. Open the PostgreSQL client NuGet package page and click Download package.
2. Rename the downloaded npgsql.9.0.4.nupkg^[1] file to npgsql.9.0.4.zip and extract the archive.
3. Navigate to the following folder: \npgsql.9.0.4\lib\net8.0\. Copy npgsql.dll.
4. Create a dotnet_libraries subfolder in the project folder containing the built executable file and paste the copied file into dotnet_libraries.

5. 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 App & Test Database Connection

The application form contains TdxDashboardControl and TcxButton components:

Run the built executable file and click the previously added button to display the DevExpress Dashboard Designer dialog. 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 Database in the Dashboard Data Source Wizard modal dialog and click Next:

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

Click Next and use the Run Query Builder… option:

Expand the AVAILABLE TABLES AND VIEWS node to browse tables from the connected database:

If the AVAILABLE TABLES AND VIEWS node contains the products test table created within the dashboard_test database, the created PostgreSQL connection is successful.

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

In-Memory/Remote Web Service

The TdxBackendInMemoryJSONConnection component allows you to bind TdxDashboard/TdxDashboardControl and TdxReport components to JSON data defined in code or loaded from a remote Web API service endpoint.

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

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.

Footnotes

1. The currently available NuGet assembly version may differ.