Showcasing the new OpenFin Platform API with Reactive Trader^®

Reactive Trader^® is our real-time, fully open-source showcase FX trading platform. We recently integrated it with OpenFin Desktop. We’re now excited to announce that Reactive Trader^® has implemented the new OpenFin Platform API! 

What’s New?

The OpenFin Platform API is now available in OpenFin runtime 14+, and represents a significant upgrade to the Layouts 1.0 Service. In this article, we’ll describe what features are available in this new release, and then give you an overview of how we upgraded our showcase application, Reactive Trader^®, to take advantage of them.

Snapshots in the Platform API

With the new Platform API, the layouts service is completely integrated into the runtime, and available under the platform namespace. It now supports tabbed views, grid views, and even separate window configurations for greater UI flexibility. Since the layout service was an integral part of the OpenFin ecosystem, having it integrated directly into the API will accelerate development and ensure greater compatibility and stability in your OpenFin applications.

To replace workspaces, the Platform API introduces a new concept called snapshots. Each time you save a snapshot, you’re saving your desktop state with child window information, layout and view positioning, and custom application state. For layouts, the Platform API offers similar functionality, but it now composes the desktop experience into views.

As you can see below, the Platform API now allows you to easily preconfigure a set of snapshots which you can then apply to desktops across your organization at the click of a button.

You can think of a view as a micro-frontend inside a container window; it allows you to have several views enclosed within a single window, and each view can store its relevant app state in the saved snapshot. If you’re used to the previous Layouts 1.0 service, you could also think of the platform as a replacement for startup_app. 

Our platform configuration for Reactive Trader^®, for example, looks like this:

"platform": {
    "uuid": "reactive-trader-cloud-platform-demo",
    "applicationIcon": "https://web-openfin.adaptivecluster.com/static/media/icon.ico",
    "url": "https://web-openfin.adaptivecluster.com",
    "defaultWindowOptions": {
        "contextMenu": true,
        "frame": false,
        "url": "https://web-openfin.adaptivecluster.com/openfin-window-frame"
    }
}

Custom Stylesheets and Window Frames

Another exciting change is the ability to add custom stylesheets, and even to customize your entire window frame. While the layouts 1.0 service gave you the ability to customize the tab strip, having the ability to customize the window frame was always a top-rated feature request. Now, each view that you move out of the main platform window can be customized with your own styles and functionality.

Before the Platform API, developing a custom window frame was achievable, but difficult. Now, you can include your own window frame customization with great ease, allowing you to build in the specific functionality you need. For Reactive Trader^®, we used a React component to build our own window frame – but you could use plain HTML, JavaScript, or the frontend framework of your choice. You can also include your own styles, icons, and added logic to give your OpenFin applications the desktop experience your users have come to expect.

Platform Configuration

If you’re already familiar with the OpenFin manifest file, you’ll find many of the same options available in the Platform configuration. You can still configure window options, but now you can configure view options as well. The window options have been moved into the snapshot configuration found under the Platform settings. As an example, you can find our window options for Reactive Trader^® views below.

  "snapshot": {
    "windows": [
      {
        "autoShow": true,
        "defaultCentered": false,
        "defaultHeight": 893,
        "defaultLeft": 4,

        "defaultTop": 10,
        "defaultWidth": 801,
        "minHeight": 600,
        "defaultCentered": true,
        "resizable": true,
        "maximizable": true,
        "minimizable": true,
        "saveWindowState": false,
        "frame": false,
        ...
        "layout": {
          "content": [

              {

                  "height": 801,

                  "isClosable": true,
                  "reorderEnabled": true,
                  "type": "stack",
                  ...

One last bonus – while you can of course hand-roll the configuration needed for the Platform API, OpenFin provides a handy configuration tool to generate a template Platform configuration. This is particularly useful if you want to migrate to or experiment with the new Platform API.

What’s coming next?

We’re looking forward to even more exciting changes to the new Platform API from the OpenFin team, and we’ll be integrating them into Reactive Trader^® as and when they’re released. The roadmap currently includes platform events, hotkey support, platform-defined dialogs and menus, as well as improved FDC3 support.

Keep in touch

Thanks for taking the time to learn about Reactive Trader^®, and the new OpenFin Platform API. To try out Reactive Trader^® yourself, navigate to our GitHub and search for your installer here.

At Adaptive we’re always keen to keep Reactive Trader^® Cloud updated with the latest desktop platform technologies, and we’d love to hear your comments and ideas. Feel free to get in touch at info@weareadaptive.com.