The type of the WebContents.
Provides 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: SubscriptionOptionsExperimental Attaches the current view to the given window identity. Identity must be the identity of a window in the same application. This detaches the view from its current window, and sets the view to be destroyed when its new window closes.
let view;
async function createView() {
const me = await fin.Window.getCurrent();
return fin.View.create({
name: 'viewNameAttach',
target: me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
}
async function attachView() {
view = await createView();
console.log('View created.');
await view.navigate('https://google.com');
console.log('View navigated to given url.');
const winOption = {
name:'winOptionName',
defaultWidth: 300,
defaultHeight: 300,
url: 'https://cdn.openfin.co/docs/javascript/stable/tutorial-Window.create.html',
frame: true,
autoShow: true
};
const newWindow = await fin.Window.create(winOption);
view.attach(newWindow.identity);
}
attachView()
.then(() => console.log('View attached to new window.'))
.catch(err => console.log(err));
Brings the specified view to the front of its current window. This ensures the view will be visible on top of any other views which have overlapping bounds with it.
Please note, this is not a permanent action - when a new view is created or attached to the window, it will display on top of all other views in the window that share bounds with it.
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 OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
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 OpenFin.Window and OpenFin.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 OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Experimental Focuses the view
const view = fin.View.wrapSync({ uuid: 'viewUuid', name: 'viewName' });
await view.focus();
// do things with the focused view
Experimental Gets the bounds (top, left, width, height) of the view relative to its window.
View position is relative to the bounds of the window. ({top: 0, left: 0} represents the top left corner of the window)
const view = await fin.View.create({
name: 'viewNameSetBounds',
target: fin.me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
await view.navigate('https://google.com');
await view.setBounds({
top: 100,
left: 100,
width: 300,
height: 300
});
console.log(await view.getBounds());
Retrieves the current OpenFin.TabStack of the view if it belongs to one.
this view belongs to.
if this view does not belong to a TabStack or if the window has been destroyed.
if (!fin.me.isView) {
throw new Error('Not running in a platform View.');
}
const stack = await fin.me.getCurrentStack();
// Alternatively, you can wrap any view and get the stack from there
// const viewFromSomewhere = fin.View.wrapSync(someView.identity);
// const stack = await viewFromSomewhere.getCurrentStack();
const views = await stack.getViews();
console.log(`Stack contains ${views.length} view(s)`);
Experimental Retrieves the window the view is currently attached to.
const view = fin.View.wrapSync({ uuid: 'viewUuid', name: 'viewName' });
view.getCurrentWindow()
.then(win => console.log('current window', win))
.catch(err => console.log(err));)
Experimental Gets the View's info.
let view;
async function createView() {
const me = await fin.Window.getCurrent();
return fin.View.create({
name: 'viewNameGetInfo',
target: me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
}
async function getViewInfo() {
view = await createView();
console.log('View created.');
await view.navigate('https://google.com');
console.log('View navigated to given url.');
return view.getInfo();
}
getViewInfo()
.then((info) => console.log('View info fetched.', info))
.catch(err => console.log(err));
Experimental Gets the View's options.
let view;
async function createView() {
const me = await fin.Window.getCurrent();
return fin.View.create({
name: 'viewNameGetOptions',
target: me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
}
async function getViewOptions() {
view = await createView();
console.log('View created.');
await view.navigate('https://google.com');
console.log('View navigated to given url.');
const me = await fin.Window.getCurrent();
view = fin.View.wrapSync({ uuid: me.identity.uuid, name: 'viewNameGetOptions' });
return view.getOptions();
}
getViewOptions()
.then((info) => console.log('View options fetched.', info))
.catch(err => console.log(err));
Experimental Retrieves the layout for the window the view is attached to.
//get the current View
const view = await fin.View.getCurrent();
//get a reference to the Layout for the Window the view is part of
const layout = await view.getParentLayout();
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 OpenFin.Window and OpenFin.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 OpenFin.Window and OpenFin.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 OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
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 OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Experimental Hides the current view if it is currently visible.
let view;
async function createView() {
const me = await fin.Window.getCurrent();
return fin.View.create({
name: 'viewNameHide',
target: me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
}
async function hideView() {
view = await createView();
console.log('View created.');
await view.navigate('https://google.com');
console.log('View navigated to given url.');
await view.hide();
}
hideView()
.then(() => console.log('View 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 OpenFin.Window and OpenFin.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 OpenFin.Window and OpenFin.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 OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
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 OpenFin.Window and OpenFin.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 OpenFin.Window and OpenFin.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 OpenFin.Window and OpenFin.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 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.
Prints the WebContents.
Printer Options
Note: 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 view = fin.View.getCurrentSync();
view.print({ silent: false, deviceName: 'system-printer-name' }).then(() => {
console.log('print call has been sent to the system');
});
WebContents refers to shared functionality between OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
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 OpenFin.Window and OpenFin.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" | "did-start-loading" | "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" | "content-blocked" | "will-redirect" | "created" | "destroyed" | "hidden" | "hotkey" | "shown" | "target-changed" | "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.
Experimental Sets the bounds (top, left, width, height) of the view relative to its window.
View position is relative to the bounds of the window. ({top: 0, left: 0} represents the top left corner of the window)
let view;
async function createView() {
const me = await fin.Window.getCurrent();
return fin.View.create({
name: 'viewNameSetBounds',
target: me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
}
async function setViewBounds() {
view = await createView();
console.log('View created.');
await view.navigate('https://google.com');
console.log('View navigated to given url.');
await view.setBounds({
top: 100,
left: 100,
width: 300,
height: 300
});
}
setViewBounds()
.then(() => console.log('View set to new bounds.'))
.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 OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Experimental Shows the current view if it is currently hidden.
let view;
async function createView() {
const me = await fin.Window.getCurrent();
return fin.View.create({
name: 'viewNameShow',
target: me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
}
async function hideAndShowView() {
view = await createView();
console.log('View created.');
await view.navigate('https://google.com');
console.log('View navigated to given url option.');
await view.hide();
console.log("View hidden.");
view.show();
console.log("View shown.");
}
hideAndShowView()
.then(() => console.log('View hidden and shown.'))
.catch(err => console.log(err));
Experimental Sets the bounds (top, left, width, height) of the view relative to its window and shows it if it is hidden. This method ensures the view is both positioned and showing. It will reposition a visible view and both show and reposition a hidden view.
View position is relative to the bounds of the window. ({top: 0, left: 0} represents the top left corner of the window)
let view;
async function createView() {
const me = await fin.Window.getCurrent();
return fin.View.create({
name: 'viewNameSetBounds',
target: me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
}
async function showViewAt() {
view = await createView();
console.log('View created.');
await view.navigate('https://google.com');
console.log('View navigated to given url.');
await view.showAt({
top: 100,
left: 100,
width: 300,
height: 300
}, {
bringToFront : true
});
}
showViewAt()
.then(() => console.log('View set to new bounds and shown.'))
.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 OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
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 OpenFin.Window and OpenFin.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 OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
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 OpenFin.Window and OpenFin.View.
We do not expose an explicit superclass for this functionality, but it does have its own
event namespace.
Experimental Triggers the before-unload handler for the View, if one is set.
Returns true if the handler is trying to prevent the View from unloading, and false if it isn't.
Only enabled when setting enableBeforeUnload: true in your View options. If this option is not enabled it will
always return false.
This method is used internally by the Platform Provider to determine the status of each before unload handler in Views when closing the Window.
// from inside a View context
const unloadPrevented = await fin.me.triggerBeforeUnload();
Experimental Updates the view's options.
let view;
async function createView() {
const me = await fin.Window.getCurrent();
return fin.View.create({
url: 'https://google.com',
name: 'viewNameUpdateOptions',
target: me.identity,
bounds: {top: 10, left: 10, width: 200, height: 200}
});
}
async function updateViewOptions() {
view = await createView();
console.log('View created.');
await view.navigate('https://google.com');
console.log('View navigated to given url option.');
const newOptions = { autoResize: {
width: true,
horizontal: true
}};
return view.updateOptions(newOptions);
}
updateViewOptions()
.then(payload => console.log('View options updated: ', payload))
.catch(err => console.log(err));
A View can be used to embed additional web content into a Window. It is like a child window, except it is positioned relative to its owning window. It has the ability to listen for View-specific events.
By default, a View will try to share the same renderer process as other Views owned by its parent Application. To change that behavior, see the processAffinity view option.
A View's lifecycle is tied to its owning window and can be re-attached to a different window at any point during its lifecycle.