ag-Grid OpenFin Integration

OpenFin provides runtime technology solutions for financial desktops. Below we document and illustrate how you can use ag-Grid within the OpenFin platform.

Full working examples can be found in GitHub.

Installation

git clone https://github.com/ag-grid/ag-grid-openfin-example cd ag-grid-openfin-example npm install

Now that the examples and dependencies have been installed, you can run the examples. Open a terminal and run the following to serve up the applications:

npm run server

Depending on the example you wish you run, you will need to open one or two more terminal windows - see each example for more details.

A Simple Grid

A simple ag-Grid running within the OpenFin container.

Open a terminal and run the following command:

npm run simple-grid Datagrid Example

A Richer Grid

A more sophisticated ag-Grid example running within the OpenFin container.

Open a terminal and run the following command:

npm run rich-grid Openfin Rich Grid Example

A Master/Detail Grid - Single Application

A MasterDetail example within a single OpenFin application

Open a terminal and run the following command:

npm run masterdetail-master-single Opefin MasterDetail Grid Example

A Master/Detail Grid - Multiple Applications

A MasterDetail example within seperate OpenFin applications making use of the OpenFin InterApplicationBus.

Here when a row is clicked on in the "master" application, more detailed information is displayed in the "detail" application.

Open a terminal and run the following command:

npm run masterdetail-master

Open another terminal and run the following command:

npm run masterdetail-detail Openfin MasterDetail Multi Application Example

A Summary/Graph Grid - Multiple Applications

Similar to the Master/Detail example above, this example runs within seperate OpenFin applications making use of the OpenFin InterApplicationBus.

Here when a row is clicked on in the "master" application, more detailed information is displayed in the "detail" application making use of d3 to render the resulting graphs.

You can switch between metrics (Open, Close, High, Low etc) or on different stocks and with each action the Graph application will be updated accordingly.

Open a terminal and run the following command:

npm run stocks-master

Open another terminal and run the following command:

npm run stocks-detail OpenFin MasterDetail Graph Example

A Trader Dashboard with Tear Out Windows

You can try this example live using the following Link. This will download a Zip file with a Windows executable within - if you run this executable the Trader Dashboard will install and run on your computer.

In this example we host the full Trader Dashboard within an OpenFin container, but also add the ability to tear out the Stock Detail panel from the top left.

The following images show the default state of the application followed by the state of the application with the Detail Panel torn out:

Default State

Default State of Trader Dashboard

Torn Out State

Detail Panel torn out of Trader Dashboard

A better illustration of the functionality is shown in the movie below - note how the top grid fills out the remaining space when the Detail Panel is torn out. Note too that the Detail Panel could become larger once torn out, perhaps showing a more detailed view once torn out:

Application in Action

Openfin Detail Panel torn out Application in Action