The browser window factory for the Workspace Platform.
The storage API for the Workspace Platform.
Theme API for the Workspace Platform.
Optional identity: ApplicationIdentityProvides access to the OpenFin representation of the current code context (usually a document
such as a OpenFin.View or OpenFin.Window), as well as to the current Interop context.
Useful for debugging in the devtools console, where this will intelligently type itself based on the context in which the devtools panel was opened.
Adds a listener to the end of the listeners array for the specified event.
Optional options: SubscriptionOptionsLaunch a browser snapshot that contains windows with pages.
the browser snapshot to launch or a url or filepath to retrieve a JSON snapshot.
Optional options: ApplySnapshotOptionsoptions for launching the snapshot.
Applies the given workspace to the user's desktop. Makes that workspace the active workspace.
the workspace to apply to the desktop and set as the current active workspace.
Optional options: ApplyWorkspaceOptionstrue if the workspace was applied, false if the workspace was not applied.
Brief example of how to apply a workspace, currently stored in storage, to the desktop.
const workspacePlatform = getCurrentSync();
// This assumes that there is at least one workspace in storage.
const allWorkspaces = await workspacePlatform.Storage.getWorkspaces();
// Apply the first workspace in storage to the desktop.
await workspacePlatform.applyWorkspace(allWorkspaces[0], {
// Customize the behavior of the applyWorkspace call.
skipPrompt: false,
applySnapshotOptions: {
closeExistingWindows: false,
closeSnapshotWindows: false,
skipOutOfBoundsCheck: false,
},
});
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
Experimental
Closes 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.
Optional options: { 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 });
Use when you need to create a View into Browser window. In addition to what regular platfom createView offers, here you can specify workspacePlatform options for settings related to Workspace Platform.
For general details about this method, see docs for @openfin/core.
Optional target: CreateViewTargetOptional targetView: Identity_4import * as WP from "@openfin/workspace-platform";
const platform = WP.getCurrentSync();
platform.createView({
url: "https://url-to-your-app.com",
...,
workspacePlatform: {
browserNavigationButtons: {
reload: false,
back: true,
forward: true
}
}
});
View names are singleton: It is not recommended to provide view names, but if they are provided, they can only be used by one view at a time.
Expected Behavior: If a new view is created using the same view name as an already existing view, the new view will be created, with the view name, and the existing view will be destroyed.
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.PlatformModule.init Platform.init.
The URL of the manifest to fetch.
Can be overwritten using Platform#init Platform.init.
const platform = fin.Platform.getCurrentSync();
const manifest = await platform.fetchManifest('https://www.path-to-manifest.com/app.json');
console.log(manifest);
Returns ISO language code of current set language
One of the seven ISO language codes Browser supports
Example of how to get the current language on Browser
import * as WorkspacePlatform from '@openfin/workspace-platform';
WorkspacePlatform.getCurrentSync().getLanguage();
Get a snapshot that contains browser windows with pages.
Preferred way of getting View options with Workspace Platform.
import * as WP from "@openfin/workspace-platform";
const platform = WP.getCurrentSync();
const view = await platform.createView(options);
const viewOptions = await platform.getViewSnapshot(view.identity);
console.log(viewOptions.workspacePlatform);
Experimental
Get the context context of a host window that was previously set using Platform#setWindowContext setWindowContext. The context will be saved in any platform snapshots. Returns a promise that resolves to the context.
Optional target: Identity_4A 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
Launch an application.
the launch app request.
This method is deprecated. It is recommended to use createView or createWindow instead.
import * as WorkspacePlatform from '@openfin/workspace-platform';
const workspacePlatform = WorkspacePlatform.getCurrentSync();
const req = {
app: {
appId: 'myAppId',
title: 'appTitle',
manifest: 'http://localhost/app.json',
manifestType: AppManifestType.Manifest,
icons:[
{
icon: "https://cdn.openfin.co/demos/notifications/generator/images/icon-blue.png",
src: "https://cdn.openfin.co/demos/notifications/generator/images/icon-blue.png",
type: "ico",
},
]
}
}
workspacePlatform.launchApp(req);
Experimental
Retrieves 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 OpenFin.ViewCreationOptions 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.
Optional options: 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.
Optional options: SubscriptionOptionsEvent payloads are documented in the OpenFin.Events namespace.
Adds a listener to the beginning of the listeners array for the specified event.
Optional options: 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.
Optional options: SubscriptionOptionsEvent payloads are documented in the OpenFin.Events namespace.
Removes all listeners, or those of the specified event.
Optional eventType: "crashed" | "started" | "closed" | "initialized" | "window-alert-requested" | "window-created" | "window-end-load" | "window-not-responding" | "window-responding" | "window-start-load" | "connected" | "manifest-changed" | "not-responding" | "responding" | "run-requested" | "tray-icon-clicked" | "file-download-location-changed" | "view-blurred" | "view-certificate-selection-shown" | "view-crashed" | "view-did-change-theme-color" | "view-focused" | "view-navigation-rejected" | "view-url-changed" | "view-did-fail-load" | "view-did-finish-load" | "view-did-start-loading" | "view-page-favicon-updated" | "view-page-title-updated" | "view-resource-load-failed" | "view-resource-response-received" | "view-child-content-blocked" | "view-child-content-opened-in-browser" | "view-child-view-created" | "view-child-window-created" | "view-file-download-started" | "view-file-download-progress" | "view-file-download-completed" | "view-found-in-page" | "view-certificate-error" | "view-content-blocked" | "view-will-redirect" | "view-created" | "view-destroyed" | "view-hidden" | "view-hotkey" | "view-shown" | "view-target-changed" | "view-host-context-changed" | "view-added-to-layout" | "view-removed-from-layout" | "window-blurred" | "window-certificate-selection-shown" | "window-crashed" | "window-did-change-theme-color" | "window-focused" | "window-navigation-rejected" | "window-url-changed" | "window-did-fail-load" | "window-did-finish-load" | "window-did-start-loading" | "window-page-favicon-updated" | "window-page-title-updated" | "window-resource-load-failed" | "window-resource-response-received" | "window-child-content-blocked" | "window-child-content-opened-in-browser" | "window-child-view-created" | "window-child-window-created" | "window-file-download-started" | "window-file-download-progress" | "window-file-download-completed" | "window-found-in-page" | "window-certificate-error" | "window-content-blocked" | "window-will-redirect" | "window-view-attached" | "window-view-detached" | "window-auth-requested" | "window-begin-user-bounds-changing" | "window-bounds-changed" | "window-bounds-changing" | "window-context-changed" | "window-closed" | "window-closing" | "window-disabled-movement-bounds-changed" | "window-disabled-movement-bounds-changing" | "window-embedded" | "window-end-user-bounds-changing" | "window-external-process-exited" | "window-external-process-started" | "window-hidden" | "window-hotkey" | "window-initialized" | "window-layout-initialized" | "window-layout-ready" | "window-maximized" | "window-minimized" | "window-options-changed" | "window-performance-report" | "window-preload-scripts-state-changed" | "window-preload-scripts-state-changing" | "window-reloaded" | "window-restored" | "window-show-requested" | "window-shown" | "window-user-movement-disabled" | "window-user-movement-enabled" | "window-will-move" | "window-will-resize" | "window-show-all-downloads" | "window-download-shelf-visibility-changed" | "platform-api-ready" | "platform-snapshot-applied"Remove a listener from the listener array for the specified event.
Optional options: SubscriptionOptionsCaution: Calling this method changes the array indices in the listener array behind the listener.
Sets the workspace as the current active workspace. Does not apply the workspace to the user's desktop.
the workspace to set as current active workspace.
Sets the language to ISO language code passed in
the ISO language code
Example of how to set a different language on Browser
import * as WorkspacePlatform from '@openfin/workspace-platform';
WorkspacePlatform.getCurrentSync().setLanguage('zh-CN');
Experimental
Set 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 Platform#getWindowContext getWindowContext.
Optional context: anyA field where serializable context data can be stored to be saved in platform snapshots.
Optional target: Identity_4A 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
Controller for a Workspace Platform.