Skip to main content

Interoperability in Here™ apps

Deploying a Here™ app as a view in Here™ Core UI Browser enables seamless interoperability between discrete apps connected to the Browser.

Apps in multiple Browser views can share information as contexts when users link them together. With only a few intuitive clicks and no additional configuration or custom code required, users can link an app to data with other apps. The link can even work without a network connection. We call this interoperable link context sharing.

Context sharing is supported through the Here Core Container Interop API. Contexts can be shared only among Browser views within the same context groups. A context group is created when a user explicitly links a set of Browser views together.

How it works​

Here Core UI Browser supports up to six context groups with color linking.

Users can color-code Browser views, grouping them together through the defined set of colors. For example, all the views set as "blue" can now share the same context information. A user can then save the color linking as part of their workspace, to use or share with other users.

Configuring interoperability in your app​

Available context types​

  • contact
  • contactList
  • country
  • instrument
  • instrumentList
  • organization
  • portfolio
  • position

Read more about context types in the FDC3 API reference.

Receiving contexts in your app​

In your app's code, define a listener using fin.me.interop.addContextHandler:

import { fin } from 'openfin/core'

function handleInstrumentContext(contextInfo) { 
  const { type, id } = contextInfo; 
  console.log('contextInfo for instrument', contextInfo) 
}
 
function handleCountryContext(contextInfo) { 
  const { type, id } = contextInfo; 
  console.log('contextInfo for country', contextInfo) 
} 

fin.me.interop.addContextHandler(handleInstrumentContext, 'instrument') 
fin.me.interop.addContextHandler(handleCountryContext, 'country')

Sending contexts from your app​

In your app's code, define an emitter using fin.me.interop.setContext:

setInstrumentContext = async (ticker) => {
    fin.me.interop.setContext({
        type: 'instrument', 
        id: { ticker }
    });
}

// User clicks an instrument of interest. 
// The application sets that instrument Context informing other applications within the Context Group
element.on('click', (evt) => {
    setInstrumentContext(evt.ticker)
})

Table of Contents