OpenFin’s Platform API: Introducing Multiple Layouts per Window

By Steven Mocarski, OpenFin CTO

Our mission at OpenFin is straightforward: to make digital work frictionless and delightfully productive, wherever you are. In support of that mission, we’re excited to announce a significant enhancement to our Platform API in our recently released v34 runtime: the ability to support multiple layouts in a single window.

Platform API: Core Advantages and Offerings

Platform API debuted in 2019 to help development teams at large financial institutions provide a single pane of glass for a myriad of internal and third party teams. These central teams, often called "platform teams" needed adaptability, performance, and flexibility and Platform API was launched to serve that need. The core offering of Platform API includes:

• Layouts: Developers get a flexible and customizable Grid Layout without the need for code modifications of the underlying content.
• Snapshots: Capture the current state of applications, from the last navigated URL to offscreen content.
• Overrides Engine: Modify various aspects, from Window frames to API behavior.
• Interop API: Ensures efficient communication between applications, snapshots, and platforms.

Platform API has expanded a great deal since the initial launch to serve many types of teams and forms the foundation of our Workspace product. In this post we'll explore the multi-layout enhancement to the layout API, and in future posts we'll go deeper to cover implications for snapshots in a multi-layout world, a deeper look on performance, some considerations for using this new feature to assemble a group of layouts into multiple pages, and how OpenFin Workspace Browser helps you get it all quickly and easily.

Multi-Layout: Advancing Layout Management

Existing Layout Functionality: If you're not familiar with our current layout capability, our docs on Layouts (Organize views with layouts) have been recently improved and worth reading, they provide great background. This capability isnt documented there yet, but I’ll give you a sneak preview below.

Our existing offering works great for teams looking to support a single layout within a given window, but when customers need more complex layouts -- for example to swap between groups (or "pages" as we call them in our Browser product) -- there were some shortcomings.

Previously, if you wanted to support groups of layouts, you'd grab the Identity of a given window, create a new layout, and swap them like this:

{code}

While functional, it had limitations because the UI components in the existing layout were destroyed and the components in the new layout had to be recreated every time you switched between the layouts. On a complex layout, that could be resource intensive, slow, and introduce irritating flickers and flashing as the contents of the layout fought for system resources.

The Multi-Layout Evolution

To address this, we are introducing the Multi-Layout feature:

• Define multiple layouts per Window.
• Transition between layouts efficiently through DOM manipulation.
• Avoid destructive DOM operations, enhancing performance.
• Enhanced Snapshot support for easier saving/restoration.

Now, rather than maintain separate layouts and swap them, you can construct a group of Layout objects in the Snapshot , adding or removing where appropriate via Layout.create(), etc. The show/hide logic is controlled using CSS visibility, so it’s dramatically simplified. We’ll be providing additional customization options using our familiar Override pattern, so let's look at a very basic example in vanilla JavaScript acting on a div with id=layout-container and a simple button to switch layouts with id=next-tab-button:

{code}

The result is an order of magnitude faster and seamlessly fluid. In experiments showcasing a window with varied layout groups, each containing 4-16 real-time charting objects, we enhanced tab-switching speed 10-20x: from over 250ms using the traditional approach to ~25ms with our new multi-layout functionality.

The OpenFin Browser: Seamless Upgrades

The example above is simple JavaScript to present the main idea, but this works well with all major frameworks like React, Angular, etc.. Like we do with all major features, we'll be providing more detailed samples on our Built on OpenFin github org here [Built on OpenFin · GitHub]. Platform API lets the team bring their own UI to the table, but by far the easiest way to consume these features and get the ongoing benefits is simply to use the OpenFin Browser. Browser lets users experience the latest from the Platform API with much less effort. Stay current without the legwork.

At OpenFin, we're dedicated to continuous innovation and delivering tools that elevate digital workspaces. From the nuances of the Platform API to the intuitive nature of the OpenFin Browser, we remain committed to your digital productivity.

Watch out for more updates on the above and drop us a line at support@openfin.co with “headphonesOn” in the subject line; I look forward to hearing from you.