Adds a listener to the end of the listeners array for the specified event.
Optionaloptions: SubscriptionOptionsAdds a snapshot to a running Platform. Requested snapshot must be a valid Snapshot object, or a url or filepath to such an object.
Can optionally close existing windows and overwrite current platform state with that of a snapshot.
The function accepts either a snapshot taken using getSnapshot, or a url or filepath to a snapshot JSON object.
Snapshot to apply, or a url or filepath.
Optionaloptions: ApplySnapshotOptionsOptional parameters to specify whether existing windows should be closed.
Will create any windows and views that are not running but are passed in the snapshot object. Any View specified in the snapshot is assigned a randomly generated name to avoid collisions.
// Get a wrapped layout platform instance
const platform = await fin.Platform.getCurrent();
const snapshot = {
windows: [
{
layout: {
content: [
{
type: 'stack',
content: [
{
type: 'component',
componentName: 'view',
componentState: {
name: 'component_X',
url: 'https://www.openfin.co'
}
},
{
type: 'component',
componentName: 'view',
componentState: {
name: 'component_Y',
url: 'https://cdn.openfin.co/embed-web/chart.html'
}
}
]
}
]
}
}
]
}
platform.applySnapshot(snapshot);
In place of a snapshot object, applySnapshot can take a url or filepath and to retrieve a JSON snapshot.
const platform = await fin.Platform.getCurrent();
platform.applySnapshot('https://api.jsonbin.io/b/5e6f903ef4331e681fc1231d/1');
Optionally, applySnapshot can close existing windows and restore a Platform to a previously saved state.
This is accomplished by providing { closeExistingWindows: true } as an option.
// Get a wrapped layout platform instance
const platform = await fin.Platform.getCurrent();
async function addViewToWindow(winId) {
return await platform.createView({
name: 'test_view_3',
url: 'https://openfin.co'
}, winId);
}
async function createWindowWithTwoViews() {
const platform = await fin.Platform.getCurrent();
return platform.createWindow({
layout: {
content: [
{
type: 'stack',
content: [
{
type: 'component',
componentName: 'view',
componentState: {
name: 'test_view_1',
url: 'https://example.com'
}
},
{
type: 'component',
componentName: 'view',
componentState: {
name: 'test_view_2',
url: 'https://yahoo.com'
}
}
]
}
]
}
});
}
const win = await createWindowWithTwoViews();
// ... you will now see a new window with two views in it
// we take a snapshot of the current state of the app, before changing it
const snapshotOfInitialAppState = await platform.getSnapshot();
// now let's change the state of the app:
await addViewToWindow(win.identity);
// ... the window now has three views in it
await platform.applySnapshot(snapshotOfInitialAppState, { closeExistingWindows: true });
// ... the window will revert to previous state, with just two views
Closes a specified view in a target window.
View identity
let windowIdentity;
if (fin.me.isWindow) {
windowIdentity = fin.me.identity;
} else if (fin.me.isView) {
windowIdentity = (await fin.me.getCurrentWindow()).identity;
} else {
throw new Error('Not running in a platform View or Window');
}
const viewOptions = {
name: 'test_view',
url: 'https://example.com'
};
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const platform = await fin.Platform.getCurrent();
await platform.createView(viewOptions, windowIdentity);
// a new view will now show in the current window
await sleep(5000);
const viewIdentity = { uuid: windowIdentity.uuid, name: 'test_view'};
platform.closeView(viewIdentity);
// the view will now close
ExperimentalCloses a window. If enableBeforeUnload is enabled in the Platform options, any beforeunload handler set on Views will fire This behavior can be disabled by setting skipBeforeUnload to false in the options parameter.
This method works by setting a close-requested handler on the Platform Window. If you have your own close-requested handler set on the Platform Window as well,
it is recommended to move that logic over to the [PlatformProvider.closeWindow]PlatformProvider#closeWindow override to ensure it runs when the Window closes.
// Close the current Window inside a Window context
const platform = await fin.Platform.getCurrent();
platform.closeWindow(fin.me.identity);
// Close the Window from inside a View context
const platform = await fin.Platform.getCurrent();
const parentWindow = await fin.me.getCurrentWindow();
platform.closeWindow(parentWindow.identity);
// Close the Window and do not fire the before unload handler on Views
const platform = await fin.Platform.getCurrent();
platform.closeWindow(fin.me.identity, { skipBeforeUnload: true });
Creates a new view and attaches it to a specified target window.
View creation options
Optionaltarget: CreateViewTargetThe window to which the new view is to be attached. If no target, create a view in a new window.
OptionaltargetView: IdentityIf provided, the new view will be added to the same tabstrip as targetView.
If the view already exists, will reparent the view to the new target. You do not need to set a name for a View. Views that are not passed a name get a randomly generated one.
let windowIdentity;
if (fin.me.isWindow) {
windowIdentity = fin.me.identity;
} else if (fin.me.isView) {
windowIdentity = (await fin.me.getCurrentWindow()).identity;
} else {
throw new Error('Not running in a platform View or Window');
}
const platform = fin.Platform.getCurrentSync();
platform.createView({
name: 'test_view',
url: 'https://developers.openfin.co/docs/platform-api'
}, windowIdentity).then(console.log);
Reparenting a view:
let windowIdentity;
if (fin.me.isWindow) {
windowIdentity = fin.me.identity;
} else if (fin.me.isView) {
windowIdentity = (await fin.me.getCurrentWindow()).identity;
} else {
throw new Error('Not running in a platform View or Window');
}
let platform = fin.Platform.getCurrentSync();
let viewOptions = {
name: 'example_view',
url: 'https://example.com'
};
// a new view will now show in the current window
await platform.createView(viewOptions, windowIdentity);
const view = fin.View.wrapSync({ uuid: windowIdentity.uuid, name: 'yahoo_view' });
// reparent `example_view` when a view in the new window is shown
view.on('shown', async () => {
let viewIdentity = { uuid: windowIdentity.uuid, name: 'example_view'};
let target = {uuid: windowIdentity.uuid, name: 'test_win'};
platform.createView(viewOptions, target);
});
// create a new window
await platform.createWindow({
name: "test_win",
layout: {
content: [
{
type: 'stack',
content: [
{
type: 'component',
componentName: 'view',
componentState: {
name: 'yahoo_view',
url: 'https://yahoo.com'
}
}
]
}
]
}
}).then(console.log);
Creates a new Window.
Window creation options
There are two Window types at your disposal while using OpenFin Platforms - Default Window and Custom Window.
The Default Window uses the standard OpenFin Window UI. It contains the standard close, maximize and minimize buttons, and will automatically render the Window's layout if one is specified.
For deeper customization, you can bring your own Window code into a Platform. This is called a Custom Window.
The example below will create a Default Window which uses OpenFin default Window UI.
The Window contains two Views in a stack Layout:
const platform = fin.Platform.getCurrentSync();
platform.createWindow({
layout: {
content: [
{
type: 'stack',
content: [
{
type: 'component',
componentName: 'view',
componentState: {
name: 'test_view_1',
url: 'https://cdn.openfin.co/docs/javascript/canary/Platform.html'
}
},
{
type: 'component',
componentName: 'view',
componentState: {
name: 'test_view_2',
url: 'https://cdn.openfin.co/docs/javascript/canary/Platform.html'
}
}
]
}
]
}
}).then(console.log);
The Default Window's design can be customized by specifying the stylesheetUrl property in the manifest:
{
platform: {
defaultWindowOptions: {
stylesheetUrl: 'some-url.css',
...
}
}
}
For a list of common Layout CSS classes you can override in your custom stylesheet, see Useful Layout CSS Classes
*
To specify a Platform Custom Window, provide a url property when creating a Window.
If you intend to render a Layout in your Custom Window, you must also specify an HTMLElement that the Layout will inject into and set its id property to "layout-container".
The example below will create a Platform Custom Window:
// in an OpenFin app:
const platform = fin.Platform.getCurrentSync();
const windowConfig =
{
url: "https://www.my-domain.com/my-custom-window.html", // here we point to where the Custom Frame is hosted.
layout: {
content: [
{
type: "stack",
content: [
{
type: "component",
componentName: "view",
componentState: {
name: "app #1",
url: "https://cdn.openfin.co/docs/javascript/canary/Platform.html"
}
},
{
type: "component",
componentName: "view",
componentState: {
name: "app #2",
url: "https://cdn.openfin.co/docs/javascript/canary/Platform.html"
}
}
]
}
]
}
};
platform.createWindow(windowConfig);
Here's an example of a minimalist Custom Platform Window implementation:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<div id="of-frame-main">
<div id="title-bar">
<div class="title-bar-draggable">
<div id="title"> This is a custom frame! </div>
</div>
<div id="buttons-wrapper">
<div class="button" id="minimize-button"></div>
<div class="button" id="expand-button"></div>
<div class="button" id="close-button"></div>
</div>
</div>
<div id="layout-container"></div> <!-- OpenFin layout would be injected here -->
<script src="./custom-frame.js"></script>
</div>
</body>
</html>
Your Custom Window can use in-domain resources for further customization (such as CSS, scripts, etc.).
For a list of common Layout CSS classes you can override in your stylesheet, see Useful Layout CSS Classes
The example above will require the body element to have height: 100%; set in order to render the layout correctly.
Fetches a JSON manifest using the browser process and returns a Javascript object. Can be overwritten using Platform.init.
The URL of the manifest to fetch.
Returns a snapshot of the platform in its current state. You can pass the returning object to [Platform.applySnapshot]Platform#applySnapshot to launch it.
The snapshot will include details such as an ISO format timestamp of when the snapshot was taken, OpenFin runtime version the platform is running on, monitor information and the list of currently running windows.
const platform = await fin.Platform.getCurrent();
const snapshot = await platform.getSnapshot();
ExperimentalGet the context context of a host window that was previously set using setWindowContext. The context will be saved in any platform snapshots. Returns a promise that resolves to the context.
Optionaltarget: IdentityA target window or view may optionally be provided. If no target is provided, target will be the current window (if called from a Window) or the current host window (if called from a View).
This method can be called from the window itself, or from any child view. Context data is shared by all entities within a window.
Retrieving context from current window:
const platform = fin.Platform.getCurrentSync();
const customContext = { answer: 42 };
await platform.setWindowContext(customContext);
const myContext = await platform.getWindowContext();
console.log(myContext); // { answer: 42 }
Retrieving the context of another window or view:
const platform = fin.Platform.getCurrentSync();
const windowOrViewIdentity = { uuid: fin.me.uuid, name: 'nameOfWindowOrView' };
const targetWindowContext = await platform.getWindowContext(windowOrViewIdentity);
console.log(targetWindowContext); // context of target window
ExperimentalRetrieves a manifest by url and launches a legacy application manifest or snapshot into the platform. Returns a promise that resolves to the wrapped Platform.
The URL of the manifest that will be launched into the platform. If this app manifest contains a snapshot, that will be launched into the platform. If not, the application described in startup_app options will be launched into the platform. The applicable startup_app options will become View Options.
If the app manifest contains a snapshot, that will be launched into the platform. If not, the application described in startup_app options will be launched into the platform as a window with a single view. The applicable startup_app options will become View Options.
try {
const platform = fin.Platform.getCurrentSync();
await platform.launchContentManifest('http://localhost:5555/app.json');
console.log(`content launched successfully into platform`);
} catch(e) {
console.error(e);
}
// For a local manifest file:
try {
const platform = fin.Platform.getCurrentSync();
platform.launchContentManifest('file:///C:/somefolder/app.json');
console.log(`content launched successfully into platform`);
} catch(e) {
console.error(e);
}
Adds a listener to the end of the listeners array for the specified event.
Optionaloptions: SubscriptionOptionsEvent payloads are documented in the OpenFin.Events namespace.
Adds a one time listener for the event. The listener is invoked only the first time the event is fired, after which it is removed.
Optionaloptions: SubscriptionOptionsEvent payloads are documented in the OpenFin.Events namespace.
Adds a listener to the beginning of the listeners array for the specified event.
Optionaloptions: SubscriptionOptionsEvent payloads are documented in the OpenFin.Events namespace.
Adds a one time listener for the event. The listener is invoked only the first time the event is fired, after which it is removed. The listener is added to the beginning of the listeners array.
Optionaloptions: SubscriptionOptionsEvent payloads are documented in the OpenFin.Events namespace.
Removes all listeners, or those of the specified event.
OptionaleventType: Remove a listener from the listener array for the specified event.
Optionaloptions: SubscriptionOptionsDEPRECATED - please use Platform.createView. Reparents a specified view in a new target window.
ExperimentalSet the context of a host window. The context will be available to the window itself, and to its child Views. It will be saved in any platform snapshots. It can be retrieved using getWindowContext.
A field where serializable context data can be stored to be saved in platform snapshots.
Optionaltarget: IdentityA target window or view may optionally be provided. If no target is provided, the update will be applied to the current window (if called from a Window) or the current host window (if called from a View).
The context data must be serializable. This can only be called from a window or view that has been launched into a platform. This method can be called from the window itself, or from any child view. Context data is shared by all entities within a window.
Setting own context:
const platform = fin.Platform.getCurrentSync();
const contextData = {
security: 'STOCK',
currentView: 'detailed'
}
await platform.setWindowContext(contextData);
// Context of current window is now set to `contextData`
Setting the context of another window or view:
const platform = fin.Platform.getCurrentSync();
const contextData = {
security: 'STOCK',
currentView: 'detailed'
}
const windowOrViewIdentity = { uuid: fin.me.uuid, name: 'nameOfWindowOrView' };
await platform.setWindowContext(contextData, windowOrViewIdentity);
// Context of the target window or view is now set to `contextData`
A view can listen to changes to its host window's context by listening to the host-context-changed event.
This event will fire when a host window's context is updated or when the view is reparented to a new window:
// From a view
const contextChangeHandler = ({ context }) => {
console.log('Host window\'s context has changed. New context data:', context);
// react to new context data here
}
await fin.me.on('host-context-changed', contextChangeHandler);
const platform = await fin.Platform.getCurrentSync();
const contextData = {
security: 'STOCK',
currentView: 'detailed'
}
platform.setWindowContext(contextData) // contextChangeHandler will log the new context
To listen to a window's context updates, use the context-changed event:
// From a window
const contextChangeHandler = ({ context }) => {
console.log('This window\'s context has changed. New context data:', context);
// react to new context data here
}
await fin.me.on('context-changed', contextChangeHandler);
const platform = await fin.Platform.getCurrentSync();
const contextData = {
security: 'STOCK',
currentView: 'detailed'
}
platform.setWindowContext(contextData) // contextChangeHandler will log the new context
Manages the life cycle of windows and views in the application.
Enables taking snapshots of itself and applying them to restore a previous configuration as well as listen to platform events.