Integrating an OpenFin Application

Finsemble allows you to assemble different applications into a unified desktop experience. This is done by converting applications into Finsemble components. If you’ve built an application using OpenFin, we have good news: your application is already a Finsemble component! Using Finsemble, you have the ability to further optimize the behavior of your OpenFin application. Don’t worry, you don’t need to fork your code to gain these optimizations—they’re all available from the OpenFin API.

Finsemble Configuration

To add an OpenFin application to Finsemble’s config, simply add "type":"openfinApplication" and point the url to your OpenFin manifest.

"My Component": {
"Window": {
    "listName": "My Component",
    "type": "openfinApplication",
    "url": "https://yourmanifestlocation",
    /* include any OpenFin window parameters, for instance */
    "icon": "https://youriconlocation"
/* The rest of the Finsemble configuration */

That’s all you need to do for your OpenFin application to participate in a Finsemble application. The following features are available to your app without writing any additional code.

Launching - Your app can be launched from the Finsemble toolbar.

Snapping and docking - Your app will snap and dock to other components.

Workspaces - Your app’s position on the screen will automatically be saved and restored in user workspaces.

The FSBL object

A Finsemble component is really nothing more than a webpage that runs under the care of an overarching framework. Finsemble components automatically have access to the OpenFin and Finsemble APIs. Your application will have a FSBL object on the global namespace when running in Finsemble in a similar way to how the fin object is made available in the global namespace. And, in the same way that you can check for the existence of the fin object to adjust behavior for the web or desktop, you can also check for the existence of the FSBL object to adjust behavior between standalone and framework mode.

This is a rather basic approach, but it can deal with any strict behavioral switches:

If (window.FSBL)) {
    // Desktop standalone under Finsemble
} else if(window.fin) {
    // Desktop standalone under OpenFin
} else {
   // Browser

UI considerations

There are two core UI considerations when making your OpenFin application available to run as a Finsemble component: small form factor and window controls.

Small form factor

Finsemble applications are generally an amalgamation of several applications running simultaneously. As such, users tend to make their Finsemble components much smaller than standalone applications. Your application should be functional and aesthetically pleasing when running in a small form factor.

It’s important to avoid having your application behave like a mobile app when the form factor is reduced. This is a common error when web designers first encounter the complexities involved with running their app on the desktop, and particularly in a small form factor on the desktop. It is vital to prioritize the small desktop format when creating a desktop app.

When running in Finsemble, the class finsemble will automatically be injected into the <html> element. You can use this to drive conditional CSS:

html.finsemble mydiv{
   /* */

Window controls

Window management functions, like maximize, minimize, and a header bar, are handled by Finsemble. Your application should cede this control to the framework by checking for the existence of the FSBL object, or by hiding the toolbar based on the existence of the HTML.finsemble class.

If you have not written a custom header bar then there is no effort required here. Finsemble automatically disables the default Windows header bar that your application currently uses.

Features you can add to your app using the FSBL API

You can use the Finsemble and OpenFin APIs to enable features for your app. How much of each API you use will depend on the use case for your application as well as the needs of the overarching application.

The following features are available from Finsemble:

Saved state - Save the state of your application’s data so that workspaces can rehydrate it with the same data.

Linking - Give users the ability to synchronize the context of your app with other components, e.g., synchronize by stock symbol, using our Linker Client.

Data Transfer - Allow data to be shared to or from other components using our Drag and Drop Client.

Splintering - Give developers the ability to run your app in a shared browser context which lowers memory footprint.

Storage - Give developers the ability to store state for your application on to their own network, giving customers control of their data.

Authentication - Accept credentials from a bank’s application.

UI - Use the full Finsemble UI (menus, dialogs, etc.) to provide a more comprehensive desktop experience.

check   An OpenFin component is very easy to integrate into Finsemble, and optimizations are available directly through the OpenFin API.

Further reading

More discussion of how to integrate HTML5 apps into Finsemble components can be found in the Mind Control tutorial.

For a deeper understanding of how Finsemble uses configs, check out the Config Client tutorial.