AG Grid React in PowerBuilder 2025

A Simple Integration Example with WebBrowser

This example shows how to integrate AG Grid Community (React) into a classic PowerBuilder window using the WebBrowser control.

To keep the demo simple, the example uses a window called w_con_facturas, which loads 2026 invoices from a local JSON file: data2026.json.

The purpose of the example is not the data source itself, but the integration pattern between PowerBuilder and a modern web UI.

How It Works

The flow is intentionally simple:

1. Load invoice data into a DataWindow.
2. Export that data as JSON.
3. Send it to the embedded React + AG Grid app.
4. Display the result inside the PowerBuilder window.

In this demo, importing JSON into the DataWindow and then exporting it again to JSON may look unnecessary, but it is done on purpose to simulate a more realistic scenario:

• In a real application, data would typically come from the database.
• The DataWindow would still act as the data container.
• The exported JSON would then be passed to AG Grid.

This allows the example to stay simple while still reflecting a practical architecture.

PowerBuilder ↔ React Communication

The communication between PowerBuilder and the React app is handled through:

• EvaluateJavascriptSync()
• EvaluateJavascriptAsync()

The React application exposes functions through window.*, and PowerBuilder calls them whenever it needs to:

• load data
• refresh the grid
• resize columns
• apply UI changes

This keeps the frontend independent while allowing PowerBuilder to remain in control.

Why AG Grid?

Using AG Grid Community gives the PowerBuilder screen a more modern grid experience with features such as:

• sorting
• filtering
• column resizing
• context menu actions
• a cleaner visual presentation

The original PowerBuilder logic can remain unchanged while the result view is modernized.

Deployment

The React frontend is built as a single HTML file using vite-plugin-singlefile, which makes deployment very easy.

PowerBuilder simply opens it locally:

wb_1.Navigate("dist\index.html")

This means:

• no web server
• no CORS issues
• no extra deployment complexity

Example Purpose

This example is meant as a simple starting point for developers who want to use modern JavaScript UI components inside PowerBuilder 2025 without changing their existing application architecture.

Although this demo uses a fixed dataset (data2026.json), the same approach can be extended to:

database-driven DataWindows
dynamic query results
more advanced React-based components

Stay Connected!

To be aware of what I publish you can follow my blog in Spanish:
rsrsystem.blogspot.com

Follow for more PowerBuilder tips, tricks, and modern integrations!