VCL Backend: How to Use PostgreSQL

• Jan 27, 2026
• 5 minutes to read

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

Tip

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

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: Specify a PostgreSQL Connection String.

Tip

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

Code Example: Specify a PostgreSQL Connection String

The following code example demonstrates an OnClick event handler that configures a TdxBackendDatabaseSQLConnection component to access postgres (a test PostgreSQL database) and displays the Dashboard Designer dialog:

Delphi

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

procedure TMyForm.cxButton1Click(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 "postgres" 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::cxButton1Click(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 "postgres" database
  dxDashboardControl1->ShowDesigner();  // Displays the Dashboard Designer dialog
}

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 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 folder 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.

Run App & Test Database Connection

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 defined in the following code example: Specify a PostgreSQL Connection String.

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.