The type of the WebContents.
The identity of the WebContents.
Provides access to the OpenFin representation of the current code context (usually a document
such as a View or 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: SubscriptionOptionsPerforms the specified window transitions.
Describes the animations to perform. See the tutorial.
Options for the animation. See the tutorial.
async function animateWindow() {
const transitions = {
opacity: {
opacity: 0.7,
duration: 500
},
position: {
top: 100,
left: 100,
duration: 500,
relative: true
}
};
const options = {
interrupt: true,
tween: 'ease-in'
};
const win = await fin.Window.getCurrent();
return win.animate(transitions, options);
}
animateWindow()
.then(() => console.log('Animation done'))
.catch(err => console.error(err));
Provides credentials to authentication requests
userName to provide to the authentication challenge
password to provide to the authentication challenge
fin.Application.wrap({uuid: 'OpenfinPOC'}).then(app => {
app.on('window-auth-requested', evt => {
let win = fin.Window.wrap({ uuid: evt.uuid, name: evt.name});
win.authenticate('userName', 'P@assw0rd').then(()=> console.log('authenticated')).catch(err => console.log(err));
});
});
Removes focus from the window.
async function blurWindow() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.blur.html',
autoShow: true
});
const win = await app.getWindow();
return await win.blur();
}
blurWindow().then(() => console.log('Blured Window')).catch(err => console.log(err));
Brings the window to the front of the window stack.
async function BringWindowToFront() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.bringToFront.html',
autoShow: true
});
const win = await app.getWindow();
return await win.bringToFront();
}
BringWindowToFront().then(() => console.log('Window is in the front')).catch(err => console.log(err));
Gets a base64 encoded image of all or part of the WebContents.
Optional options: CapturePageOptionsOptions for the capturePage call.
View:
const view = fin.View.getCurrentSync();
// PNG image of a full visible View
console.log(await view.capturePage());
// Low-quality JPEG image of a defined visible area of the view
const options = {
area: {
height: 100,
width: 100,
x: 10,
y: 10,
},
format: 'jpg',
quality: 20
}
console.log(await view.capturePage(options));
Window:
const wnd = await fin.Window.getCurrent();
// PNG image of a full visible window
console.log(await wnd.capturePage());
// Low-quality JPEG image of a defined visible area of the window
const options = {
area: {
height: 100,
width: 100,
x: 10,
y: 10,
},
format: 'jpg',
quality: 20
}
console.log(await wnd.capturePage(options));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Centers the window on its current screen.
Does not have an effect on minimized or maximized windows.
async function centerWindow() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.center.html',
autoShow: true
});
const win = await app.getWindow();
return await win.center();
}
centerWindow().then(() => console.log('Window centered')).catch(err => console.log(err));
closes the window application
Close will be prevented from closing when force is false and ‘close-requested’ has been subscribed to for application’s main window.
async function closeWindow() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-3',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.close.html',
autoShow: true
});
const win = await app.getWindow();
return await win.close();
}
closeWindow().then(() => console.log('Window closed')).catch(err => console.log(err));
Experimental
Closes the window's popup menu, if one exists.
Only one popup menu will ever be showing at a time. Calling showPopupMenu will automatically close
any existing popup menu.
This could be used to close a popup menu if the user's mouse leaves an element for example.
await fin.me.closePopupMenu();
Use disableUserMovement instead.
Prevents a user from changing a window's size/position when using the window's frame.
async function disableUserMovement() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-3',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.disableFrame.html',
autoShow: true
});
const win = await app.getWindow();
return await win.disableUserMovement();
}
disableUserMovement().then(() => console.log('Window is disabled')).catch(err => console.log(err));
Dispatch a result to the caller of showPopupWindow.
Serializable data to send to the caller window.
If this window isn't currently being shown as a popup, this call will silently fail.
await fin.me.dispatchPopupResult({
foo: 'bar'
});
Use enableUserMovement instead.
Re-enables user changes to a window's size/position when using the window's frame.
async function enableUserMovement() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-3',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.enableFrame.html',
autoShow: true
});
const win = await app.getWindow();
return await win.enableUserMovement();
}
enableUserMovement().then(() => console.log('Window is enabled')).catch(err => console.log(err));
Executes Javascript on the WebContents, restricted to contents you own or contents owned by applications you have created.
JavaScript code to be executed on the view.
View:
async function executeJavaScript(code) {
const view = await fin.View.wrap({uuid: 'uuid', name: 'view name'});
return await view.executeJavaScript(code);
}
executeJavaScript(`console.log('Hello, Openfin')`).then(() => console.log('Javascript excuted')).catch(err => console.log(err));
Window:
async function executeJavaScript(code) {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.executeJavaScript.html',
autoShow: true
});
const win = await app.getWindow();
return await win.executeJavaScript(code);
}
executeJavaScript(`console.log('Hello, Openfin')`).then(() => console.log('Javascript excuted')).catch(err => console.log(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Find and highlight text on a page.
Term to find in page
Optional options: FindInPageOptionsSearch options
Note: By default, each subsequent call will highlight the next text that matches the search term.
Returns a promise with the results for the request. By subscribing to the found-in-page event, you can get the results of this call as well.
View:
const view = fin.View.getCurrentSync();
//By subscribing to the 'found in page' event we can get the results of each findInPage call made.
view.addListener('found-in-page', (event) => {
console.log(event);
});
// The promise also returns the results for the request
view.findInPage('a').then((result) => {
console.log(result)
});
Window:
const win = fin.Window.getCurrentSync();
//By subscribing to the 'found in page' event we can get the results of each findInPage call made.
win.addListener('found-in-page', (event) => {
console.log(event);
});
// The promise also returns the results for the request
win.findInPage('a').then((result) => {
console.log(result)
});
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Flashes the window’s frame and taskbar icon until stopFlashing is called or until a focus event is fired.
On macOS flash only works on inactive windows.
async function windowFlash() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.flash.html',
autoShow: true
});
const win = await app.getWindow();
return await win.flash();
}
windowFlash().then(() => console.log('Window flashing')).catch(err => console.log(err));
Gives focus to the WebContents.
async function focusWindow() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.focus.html',
autoShow: true
});
const win = await app.getWindow();
return await win.focus();
}
focusWindow().then(() => console.log('Window focused')).catch(err => console.log(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Retrieves an array of frame info objects representing the main frame and any iframes that are currently on the page.
async function getAllFrames() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.getAllFrames.html',
autoShow: true
});
const win = await app.getWindow();
return await win.getAllFrames();
}
getAllFrames().then(framesInfo => console.log(framesInfo)).catch(err => console.log(err));
Gets the current bounds (top, bottom, right, left, width, height) of the window.
async function getBounds() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-3',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.getBounds.html',
autoShow: true
});
const win = await app.getWindow();
return await win.getBounds();
}
getBounds().then(bounds => console.log(bounds)).catch(err => console.log(err));
Gets an information object for the window.
async function getInfo() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.getInfo.html',
autoShow: true
});
const win = await app.getWindow();
return await win.getInfo();
}
getInfo().then(info => console.log(info)).catch(err => console.log(err));
Returns the native OS level Id.
In Windows, it will return the Windows handle.
async function getWindowNativeId() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-3',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.getNativeId.html',
autoShow: true
});
const win = await app.getWindow();
return await win.getNativeId();
}
getWindowNativeId().then(nativeId => console.log(nativeId)).catch(err => console.log(err));
Gets the current settings of the window.
async function getWindowOptions() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.getOptions.html',
autoShow: true
});
const win = await app.getWindow();
return await win.getOptions();
}
getWindowOptions().then(opts => console.log(opts)).catch(err => console.log(err));
Gets the parent application.
async function getParentApplication() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.getParentApplication.html',
autoShow: true
});
const win = await app.getWindow();
return await win.getParentApplication();
}
getParentApplication().then(parentApplication => console.log(parentApplication)).catch(err => console.log(err));
Gets the parent window.
async function getParentWindow() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.getParentWindow.html',
autoShow: true
});
const win = await app.getWindow();
return await win.getParentWindow();
}
getParentWindow().then(parentWindow => console.log(parentWindow)).catch(err => console.log(err));
Returns an array with all system printers
use System.getPrinters instead
View:
const view = fin.View.getCurrentSync();
view.getPrinters()
.then((printers) => {
printers.forEach((printer) => {
if (printer.isDefault) {
console.log(printer);
}
});
})
.catch((err) => {
console.log(err);
});
Window:
const win = fin.Window.getCurrentSync();
win.getPrinters()
.then((printers) => {
printers.forEach((printer) => {
if (printer.isDefault) {
console.log(printer);
}
});
})
.catch((err) => {
console.log(err);
});
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Retrieves the process information associated with a WebContents.
Note: This includes any iframes associated with the WebContents
View:
const view = await fin.View.getCurrent();
const processInfo = await view.getProcessInfo();
Window:
const win = await fin.Window.getCurrent();
const processInfo = await win.getProcessInfo();
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Retrieves information on all Shared Workers.
View:
const view = await fin.View.create({
name: 'viewName',
target: fin.me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
await view.navigate('http://mdn.github.io/simple-shared-worker/index2.html');
const sharedWorkers = await view.getSharedWorkers();
Window:
const winOption = {
name:'child',
defaultWidth: 300,
defaultHeight: 300,
url: 'http://mdn.github.io/simple-shared-worker/index2.html',
frame: true,
autoShow: true
};
const win = await fin.Window.create(winOption);
const sharedWorkers = await win.getSharedWorkers();
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
DEPRECATED - please use Window.capturePage. Gets a base64 encoded PNG image of the window or just part a of it.
Optional area: RectangleThe area of the window to be captured. Omitting it will capture the whole visible window.
Window.capturePage
Gets the current state ("minimized", "maximized", or "normal") of the window.
async function getWindowState() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.getState.html',
autoShow: true
});
const win = await app.getWindow();
return await win.getState();
}
getWindowState().then(winState => console.log(winState)).catch(err => console.log(err));
Previously called getNativeWindow. Returns the Window Object that represents the web context of the target window. This is the same object that you would get from calling window.open() in a standard web context. The target window needs to be in the same application as the requesting window as well as comply with same-origin policy requirements.
Injecting content into an empty window:
(async ()=> {
try {
const winName = `child-window-${Date.now()}`;
const win = await fin.Window.create({
name: winName,
url: 'about:blank'
});
win.getWebWindow().document.write('<h1>Hello World</h1>');
} catch (err) {
console.error(err);
}
})();
Cloning DOM elements from the parent window (in this example we clone an h3 element from the parent window):
(async ()=> {
try {
const currentWindow = await fin.Window.getCurrent();
const parentWindow = await currentWindow.getParentWindow();
const clonedH3 = parentWindow.getWebWindow().document.querySelector('h3').cloneNode(true);
document.body.append(clonedH3);
} catch (err) {
console.error(err);
}
})();
Rendering on a child window via a library (in this example we are using the lit-html template library to render content on a blank child window. You are not going to be able to copy paste this example without configuring the project correctly but this would demonstrate some templating options available):
(async ()=> {
try {
const win = await fin.Window.create({
name: `child-window-${Date.now()}`,
url: 'about:blank'
});
const template = html`
<div>
<span>Click here: </span>
<button @click=${()=> console.log('Hello World!')}>log to the console</button>
</div>`;
render(template, win.getWebWindow().document.body);
} catch (err) {
console.error(err);
}
})();
Returns the zoom level of the WebContents.
View:
async function getZoomLevel() {
const view = await fin.View.getCurrent();
return await view.getZoomLevel();
}
getZoomLevel().then(zoomLevel => console.log(zoomLevel)).catch(err => console.log(err));
Window:
async function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.getZoomLevel.html',
autoShow: true
});
return await app.getWindow();
}
async function getZoomLevel() {
const win = await createWin();
return await win.getZoomLevel();
}
getZoomLevel().then(zoomLevel => console.log(zoomLevel)).catch(err => console.log(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Hides the window.
async function hideWindow() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.hide.html',
autoShow: true
});
const win = await app.getWindow();
return await win.hide();
}
hideWindow().then(() => console.log('Window is hidden')).catch(err => console.log(err));
Opens the developer tools for the service worker context.
View:
const view = await fin.View.create({
name: 'viewName',
target: fin.me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
await view.navigate('http://googlechrome.github.io/samples/service-worker/basic/index.html');
await view.inspectServiceWorker();
Window:
const winOption = {
name:'child',
defaultWidth: 300,
defaultHeight: 300,
url: 'http://googlechrome.github.io/samples/service-worker/basic/index.html',
frame: true,
autoShow: true
};
const win = await fin.Window.create(winOption);
await win.inspectServiceWorker();
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Opens the developer tools for the shared worker context.
View:
const view = await fin.View.create({
name: 'viewName',
target: fin.me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
await view.navigate('http://mdn.github.io/simple-shared-worker/index2.html');
await view.inspectSharedWorker();
Example:
const winOption = {
name:'child',
defaultWidth: 300,
defaultHeight: 300,
url: 'http://mdn.github.io/simple-shared-worker/index2.html',
frame: true,
autoShow: true
};
const win = await fin.Window.create(winOption);
await win.inspectSharedWorker();
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Inspects the shared worker based on its ID.
The id of the shared worker.
View:
const view = await fin.View.create({
name: 'viewName',
target: fin.me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
await view.navigate('http://mdn.github.io/simple-shared-worker/index2.html');
const sharedWorkers = await view.getSharedWorkers();
await view.inspectSharedWorkerById(sharedWorkers[0].id);
Window:
const winOption = {
name:'child',
defaultWidth: 300,
defaultHeight: 300,
url: 'http://mdn.github.io/simple-shared-worker/index2.html',
frame: true,
autoShow: true
};
const win = await fin.Window.create(winOption);
const sharedWorkers = await win.getSharedWorkers();
await win.inspectSharedWorkerById(sharedWorkers[0].id);
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Determines if the window is currently showing.
async function isWindowShowing() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.isShowing.html',
autoShow: true
});
const win = await app.getWindow();
return await win.isShowing();
}
isWindowShowing().then(bool => console.log(bool)).catch(err => console.log(err));
Maximizes the window
async function maxWindow() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.maximize.html',
autoShow: true
});
const win = await app.getWindow();
return await win.maximize();
}
maxWindow().then(() => console.log('Maximized window')).catch(err => console.log(err));
Moves the window by a specified amount.
The change in the left position of the window
The change in the top position of the window
Optional positioningOptions: PositioningOptionsasync function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.moveBy.html',
autoShow: true
});
return await app.getWindow();
}
async function moveBy(left, top) {
const win = await createWin();
return await win.moveBy(left, top);
}
moveBy(580, 300).then(() => console.log('Moved')).catch(err => console.log(err));
Moves the window to a specified location.
The left position of the window
The top position of the window
Optional positioningOptions: PositioningOptionsasync function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.moveTo.html',
autoShow: true
});
return await app.getWindow();
}
async function moveTo(left, top) {
const win = await createWin();
return await win.moveTo(left, top)
}
moveTo(580, 300).then(() => console.log('Moved')).catch(err => console.log(err))
Experimental
Navigates the WebContents to a specified URL.
Note: The url must contain the protocol prefix such as http:// or https://.
The URL to navigate the WebContents to.
View:
async function createView() {
const me = await fin.Window.getCurrent();
return fin.View.create({
name: 'viewName',
target: me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
}
createView()
.then(view => view.navigate('https://example.com'))
.then(() => console.log('navigation complete'))
.catch(err => console.log(err));
Window:
async function navigate() {
const win = await fin.Window.getCurrent();
return await win.navigate('https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.navigate.html');
}
navigate().then(() => console.log('Navigate to tutorial')).catch(err => console.log(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Navigates the WebContents back one page.
View:
async function navigateBack() {
const view = await fin.View.wrap({ name: 'testapp-view', uuid: 'testapp' });
await view.navigate('https://www.google.com');
return await view.navigateBack();
}
navigateBack().then(() => console.log('Navigated back')).catch(err => console.log(err));
Window:
async function navigateBack() {
const win = await fin.Window.wrap({ name: 'testapp', uuid: 'testapp' });
await win.navigate('https://www.google.com');
return await win.navigateBack();
}
navigateBack().then(() => console.log('Navigated back')).catch(err => console.log(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Navigates the WebContents forward one page.
View:
async function navigateForward() {
const view = await fin.View.getCurrent();
await view.navigate('https://www.google.com');
await view.navigateBack();
return await view.navigateForward();
}
navigateForward().then(() => console.log('Navigated forward')).catch(err => console.log(err));
Window:
async function navigateForward() {
const win = await fin.Window.getCurrent();
await win.navigate('https://www.google.com');
await win.navigateBack();
return await win.navigateForward();
}
navigateForward().then(() => console.log('Navigated forward')).catch(err => console.log(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Adds a listener to the end of the listeners array for the specified event.
Optional options: SubscriptionOptionsEvent payloads are documented in the 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 Events namespace.
Adds a listener to the beginning of the listeners array for the specified event.
Optional options: SubscriptionOptionsEvent payloads are documented in the 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 Events namespace.
Prints the contents of the window.
Configuration for the print task.
When silent is set to true, the API will pick the system's default printer if deviceName is empty
and the default settings for printing.
Use the CSS style page-break-before: always; to force print to a new page.
const win = fin.Window.getCurrentSync();
win.print({ silent: false, deviceName: 'system-printer-name' }).then(() => {
console.log('print call has been sent to the system');
});
If a window has embedded views, those views will not print by default. To print a window's contents including embedded views,
use the content option:
const win = fin.Window.getCurrentSync();
// Print embedded views
win.print({ content: 'views' });
// Print screenshot of current window
win.print({ content: 'screenshot' })
When content is set to views, the embedded views in the platform window will be concatenated and printed as
individual pages. If includeSelf is set to true, the platform window itself will be printed as the first
page - be aware that this page will not include the embedded views - it will only include the contents of
the platform window itself (e.g. tab stacks), with blank spaces where the view contents would be embedded.
Due to a known issue, view contents that are not visible at the time print is called will not appear when
printing contents: views. This includes views that are obscured behind other active UI elements.
To print the views embedded in their page context, set content to screenshot.
Reloads the WebContents
View:
async function reload() {
const view = await fin.View.getCurrent();
return await view.reload();
}
reload().then(() => {
console.log('Reloaded view')
}).catch(err => console.log(err));
Window:
async function reloadWindow() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.reload.html',
autoShow: true
});
const win = await app.getWindow();
return await win.reload();
}
reloadWindow().then(() => {
console.log('Reloaded window')
}).catch(err => console.log(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Removes all listeners, or those of the specified event.
Optional eventType: "blurred" | "certificate-selection-shown" | "crashed" | "did-change-theme-color" | "focused" | "navigation-rejected" | "url-changed" | "did-fail-load" | "did-finish-load" | "page-favicon-updated" | "page-title-updated" | "resource-load-failed" | "resource-response-received" | "child-content-blocked" | "child-content-opened-in-browser" | "child-view-created" | "child-window-created" | "file-download-started" | "file-download-progress" | "file-download-completed" | "found-in-page" | "certificate-error" | "hidden" | "hotkey" | "shown" | "view-attached" | "view-detached" | "auth-requested" | "begin-user-bounds-changing" | "bounds-changed" | "bounds-changing" | "context-changed" | "close-requested" | "closed" | "closing" | "disabled-movement-bounds-changed" | "disabled-movement-bounds-changing" | "embedded" | "end-user-bounds-changing" | "external-process-exited" | "external-process-started" | "initialized" | "layout-initialized" | "layout-ready" | "maximized" | "minimized" | "options-changed" | "performance-report" | "preload-script-state-changed" | "preload-script-state-changing" | "reloaded" | "restored" | "show-requested" | "user-movement-disabled" | "user-movement-enabled" | "will-move" | "will-redirect" | "will-resize" | "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-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-created" | "view-destroyed" | "view-hidden" | "view-hotkey" | "view-shown" | "view-target-changed" | "view-host-context-changed"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.
Resizes the window by a specified amount.
The change in the width of the window
The change in the height of the window
Specifies a corner to remain fixed during the resize. Can take the values: "top-left", "top-right", "bottom-left", or "bottom-right". If undefined, the default is "top-left"
Optional positioningOptions: PositioningOptionsasync function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.resizeBy.html',
autoShow: true
});
return await app.getWindow();
}
async function resizeBy(left, top, anchor) {
const win = await createWin();
return await win.resizeBy(left, top, anchor)
}
resizeBy(580, 300, 'top-right').then(() => console.log('Resized')).catch(err => console.log(err));
Resizes the window to the specified dimensions.
The change in the width of the window
The change in the height of the window
Specifies a corner to remain fixed during the resize. Can take the values: "top-left", "top-right", "bottom-left", or "bottom-right". If undefined, the default is "top-left"
Optional positioningOptions: PositioningOptionsasync function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.resizeTo.html',
autoShow: true
});
return await app.getWindow();
}
async function resizeTo(left, top, anchor) {
const win = await createWin();
return await win.resizeTo(left, top, anchor);
}
resizeTo(580, 300, 'top-left').then(() => console.log('Resized')).catch(err => console.log(err));
Restores the window to its normal state (i.e., unminimized, unmaximized).
async function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.restore.html',
autoShow: true
});
return await app.getWindow();
}
async function restore() {
const win = await createWin();
return await win.restore();
}
restore().then(() => console.log('Restored')).catch(err => console.log(err));
Will bring the window to the front of the entire stack and give it focus.
async function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.setAsForeground.html',
autoShow: true
});
return await app.getWindow();
}
async function setAsForeground() {
const win = await createWin();
return await win.setAsForeground()
}
setAsForeground().then(() => console.log('In the foreground')).catch(err => console.log(err));
Sets the window's size and position.
Optional positioningOptions: PositioningOptionsasync function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.setBounds.html',
autoShow: true
});
return await app.getWindow();
}
async function setBounds(bounds) {
const win = await createWin();
return await win.setBounds(bounds);
}
setBounds({
height: 100,
width: 200,
top: 400,
left: 400
}).then(() => console.log('Bounds set to window')).catch(err => console.log(err));
Sets the zoom level of the WebContents.
The zoom level
View:
async function setZoomLevel(number) {
const view = await fin.View.getCurrent();
return await view.setZoomLevel(number);
}
setZoomLevel(4).then(() => console.log('Setting a zoom level')).catch(err => console.log(err));
Window:
async function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.setZoomLevel.html',
autoShow: true
});
return await app.getWindow();
}
async function setZoomLevel(number) {
const win = await createWin();
return await win.setZoomLevel(number);
}
setZoomLevel(4).then(() => console.log('Setting a zoom level')).catch(err => console.log(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Shows the window if it is hidden.
Show will be prevented from showing when force is false and ‘show-requested’ has been subscribed to for application’s main window.
async function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.show.html',
autoShow: false
});
return await app.getWindow();
}
async function show() {
const win = await createWin();
return await win.show()
}
show().then(() => console.log('Showing')).catch(err => console.log(err));
Shows the window if it is hidden at the specified location. If the toggle parameter is set to true, the window will alternate between showing and hiding.
The left position of the window
The right position of the window
Show will be prevented from closing when force is false and ‘show-requested’ has been subscribed to for application’s main window
async function createWin() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.showAt.html',
autoShow: true
});
return await app.getWindow();
}
async function showAt(left, top) {
const win = await createWin();
return await win.showAt(left, top)
}
showAt(580, 300).then(() => console.log('Showing at')).catch(err => console.log(err));
Shows the Chromium Developer Tools
View:
async function showDeveloperTools() {
const view = await fin.View.getCurrent();
return view.showDeveloperTools();
}
showDevelopertools()
.then(() => console.log('Showing dev tools'))
.catch(err => console.error(err));
Window:
async function showDeveloperTools() {
const win = await fin.Window.getCurrent();
return win.showDeveloperTools();
}
showDevelopertools()
.then(() => console.log('Showing dev tools'))
.catch(err => console.error(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Experimental
Shows a menu on the window.
User-defined shape for data returned upon menu item click. Should be a union of all possible data shapes for the entire menu, and the click handler should process these with a "reducer" pattern.
Returns a promise that resolves when the user has either selected an item or closed the menu. (This may take longer than other apis).
Resolves to an object with {result: 'clicked', data } where data is the data field on the menu item clicked, or {result 'closed'} when the user doesn't select anything.
Calling this method will close previously opened menus.
This could be used to show a drop down menu over views in a platform window:
const template = [
{
label: 'Menu Item 1',
data: 'hello from item 1'
},
{ type: 'separator' },
{
label: 'Menu Item 2',
type: 'checkbox',
checked: true,
data: 'The user clicked the checkbox'
},
{
label: 'see more',
enabled: false,
submenu: [
{ label: 'submenu 1', data: 'hello from submenu' }
]
}
]
fin.me.showPopupMenu({ template }).then(r => {
if (r.result === 'closed') {
console.log('nothing happened');
} else {
console.log(r.data)
}
})
Overriding the built in context menu (ote that this can be done per element or document wide):
document.addEventListener('contextmenu', e => {
e.preventDefault();
const template = [
{
label: 'Menu Item 1',
data: 'hello from item 1'
},
{ type: 'separator' },
{
label: 'Menu Item 2',
type: 'checkbox',
checked: true,
data: 'The user clicked the checkbox'
},
{
label: 'see more',
enabled: false,
submenu: [
{ label: 'submenu 1', data: 'hello from submenu' }
]
}
]
fin.me.showPopupMenu({ template, x: e.x, y: e.y }).then(r => {
if (r.result === 'closed') {
console.log('nothing happened');
} else {
console.log(r.data)
}
})
})
Shows a popup window.
Note: If this WebContents is a view and its attached window has a popup open, this will close it.
Shows a popup window. Including a name in options will attempt to show an existing window as a popup, if
that window doesn't exist or no name is included a window will be created. If the caller view or the caller
view's parent window currently has a popup window open, calling showPopupWindow again will dismiss the currently
open popup window before showing the new popup window. Also, if the caller view is destroyed or detached, the popup
will be dismissed.
Note: in the case where the window being shown as a popup needs to be created, it is a child of the caller view's parent window.
Create and show a single-use popup window that returns a single result to the caller. initialOptions allows
us to pass window options to the popup window that will be created. resultDispatchBehavior: 'close' ensures
that once the popup window calls dispatchPopupResult it is closed. blurBehavior: 'close' will yield a dismissed
result should the popup window lose focus.
const result = await fin.me.showPopupWindow({
initialOptions: {
frame: false
},
url: '<my_popup_url>',
resultDispatchBehavior: 'close',
blurBehavior: 'close',
focus: true,
height: 300,
width: 300,
x: 0,
y: 0
});
Same as above but using an existing window as a popup by referencing its name:
Note: if a window with the name provided doesn't exist, it will be created.
const result = await fin.me.showPopupWindow({
initialOptions: {
frame: true
},
name: 'my-popup', // shows the 'my-popup' window if it exists, otherwise creates it
url: '<my_popup_url>', // navigates to this url if it doesn't match the location.href of the 'my-popup' window
resultDispatchBehavior: 'close',
blurBehavior: 'close',
focus: true,
hideOnClose: true, // persist window on 'dismissed' result, alternatively change onResultDispatch and blurBehavior to 'hide'
height: 300,
width: 300,
x: 0,
y: 0
});
Create and show a popup window that is able to return multiple results to the caller via an onPopupResult callback. Each
time the popup window calls dispatchPopupResult, the callback will be executed on the result. Once the popup window is
closed or hidden, the showPopupWindow promise will resolve with a dismissed result that will include the most recently
dispatched result as lastDispatchResult:
const popupResultCallback = (payload) => {
if (payload.result === 'clicked') {
if (payload.data.topic === 'color-changed') {
// do something like
// setColor(payload.data.value);
}
}
};
await fin.me.showPopupWindow({
initialOptions: {
frame: false
},
url: '<my_popup_url>',
resultDispatchBehavior: 'none',
blurBehavior: 'close',
focus: true,
height: 300,
width: 300,
x: 0,
y: 0,
onPopupResult: popupResultCallback
});
Same as above but using an existing window as a popup:
const popupResultCallback = (payload) => {
if (payload.result === 'clicked') {
if (payload.data.topic === 'color-changed') {
// do something like
// setColor(payload.data.value);
}
}
};
await fin.me.showPopupWindow({
initialOptions: {
frame: false
},
name: 'my-popup', // shows the 'my-popup' window if it exists, otherwise creates it
url: '<my_popup_url>', // navigates to this url if it doesn't match the location.href of the 'my-popup' window
resultDispatchBehavior: 'none',
blurBehavior: 'hide',
focus: true,
hideOnClose: true, // we can just use this or we can change blurBehavior to 'hide'
height: 300,
width: 300,
x: 0,
y: 0,
onPopupResult: popupResultCallback
});
Create or show a popup window that disables user movement (positioning and resizing) in the caller
view's parent window by using blurBehavior: 'modal':
const result = await fin.me.showPopupWindow({
initialOptions: {
frame: false
},
url: '<my_popup_url>',
resultDispatchBehavior: 'close',
blurBehavior: 'modal',
focus: true,
height: 300,
width: 300,
x: 0,
y: 0
});
Create a popup window as a modal:
Note: The only way to ensure true modal behavior is to create the window being shown as a popup with a
modalParentIdentity that uses the caller view's parent window identity.
const result = await fin.me.showPopupWindow({
initialOptions: {
frame: false,
modalParentIdentity: fin.me.identity
},
url: '<my_popup_url>',
resultDispatchBehavior: 'close',
blurBehavior: 'modal',
focus: true,
height: 300,
width: 300,
x: 0,
y: 0
});
Pass data to a popup window that is available when the popup is shown.
Note: this is just one example for a use of additionalOptions, it can be used to update any updatable
window options when creating or showing an existing window as a popup.
const result = await fin.me.showPopupWindow({
additionalOptions: {
customData: {
foo: 'bar'
}
},
url: '<my_popup_url>',
resultDispatchBehavior: 'close',
blurBehavior: 'close',
focus: true,
height: 300,
width: 300,
x: 0,
y: 0
});
// Access from the popup window context like so:
const { customData } = await fin.me.getOptions();
const { foo } = customData;
Execute a callback on the popup's OpenFin window when the popup is shown:
const popupWindowCallback = async (win) => {
await win.flash();
};
const result = await fin.me.showPopupWindow({
url: '<my_popup_url>',
resultDispatchBehavior: 'close',
blurBehavior: 'close',
focus: true,
height: 300,
width: 300,
x: 0,
y: 0,
onPopupReady: popupWindowCallback;
});
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Stop a findInPage call by specifying any of these actions:
View:
const view = fin.View.getCurrentSync();
view.addListener('found-in-page', (event) => {
setTimeout(() => {
view.stopFindInPage('clearSelection');
}, 5000);
});
view.findInPage('a').then(results => {
console.log(results);
});
Window:
const win = fin.Window.getCurrentSync();
win.addListener('found-in-page', (event) => {
setTimeout(() => {
win.stopFindInPage('clearSelection');
}, 5000);
});
win.findInPage('a').then(results => {
console.log(results);
});
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Stops the taskbar icon from flashing.
async function stopWindowFlashing() {
const app = await fin.Application.start({
name: 'myApp',
uuid: 'app-1',
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.stopFlashing.html',
autoShow: true
});
const win = await app.getWindow();
return await win.stopFlashing();
}
stopWindowFlashing().then(() => console.log('Application window flashing')).catch(err => console.log(err));
Stops any current navigation the WebContents is performing.
View:
async function stopNavigation() {
const view = await fin.View.wrap({ name: 'testapp-view', uuid: 'testapp' });
await view.navigate('https://www.google.com');
return await view.stopNavigation();
}
stopNavigation().then(() => console.log('you shall not navigate')).catch(err => console.log(err));
Window:
async function stopNavigation() {
const win = await fin.Window.wrap({ name: 'testapp', uuid: 'testapp' });
await win.navigate('https://www.google.com');
return await win.stopNavigation();
}
stopNavigation().then(() => console.log('you shall not navigate')).catch(err => console.log(err));
WebContents refers to shared functionality between Window and View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Updates the window using the passed options.
Changes a window's options that were defined upon creation. See tutorial
Values that are objects are deep-merged, overwriting only the values that are provided.
async function updateOptions() {
const win = await fin.Window.getCurrent();
return win.updateOptions({maxWidth: 100});
}
updateOptions().then(() => console.log('options is updated')).catch(err => console.error(err));
A basic window that wraps a native HTML window. Provides more fine-grained control over the window state such as the ability to minimize, maximize, restore, etc. By default a window does not show upon instantiation; instead the window's show() method must be invoked manually. The new window appears in the same process as the parent window. It has the ability to listen for window specific events.