AboutSupportDeveloper GuideVersion 40.130.101.1

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.

Hierarchy

Properties

entityType: "view" | "window"

The type of the WebContents.

identity: Identity

Accessors

  • get me(): Identity
  • Returns Identity

    me should only be accessed from the fin global (FinApi.me); access through entity classes is not guaranteed to behave sensibly in all calling contexts.

Methods

  • Adds a listener to the end of the listeners array for the specified event.

    Type Parameters

    • EventType extends
          | "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"
          | "added-to-layout"
          | "removed-from-layout"

    Parameters

    Returns Promise<View>

  • Experimental

    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.

    Parameters

    Returns Promise<void>

    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.

    Returns Promise<void>

  • Gets a base64 encoded image of all or part of the WebContents.

    Parameters

    Returns Promise<string>

    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.

  • Experimental

    Destroys the current view

    Returns Promise<void>

    const view = fin.View.wrapSync({ uuid: 'viewUuid', name: 'viewName' });
    view.destroy();
  • Returns (string | symbol)[]

  • Executes Javascript on the WebContents, restricted to contents you own or contents owned by applications you have created.

    Parameters

    • code: string

      JavaScript code to be executed on the view.

    Returns Promise<unknown>

    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.

    Parameters

    • searchTerm: string

      Term to find in page

    • Optionaloptions: FindInPageOptions

      Search 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.

    Returns Promise<void>

    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

    Parameters

    • __namedParameters: {
          emitSynthFocused: boolean;
      } = ...
      • emitSynthFocused: boolean

    Returns Promise<void>

    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.

    Returns Promise<Bounds>

    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.

    Returns Promise<TabStack>

    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.

    Returns Promise<Window>

    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.

    Returns Promise<ViewInfo>

    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.

    Returns Promise<ViewOptions>

    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 OpenFin.Layout instance for the Window the View is attached to.

    Returns Promise<Layout>

        //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

    Returns Promise<PrinterInfo>

    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

    Returns Promise<EntityProcessDetails>

    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.

    Returns Promise<SharedWorkerInfo[]>

    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('https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/');

    const sharedWorkers = await view.getSharedWorkers();

    Window:

        const winOption = {
    name:'child',
    defaultWidth: 300,
    defaultHeight: 300,
    url: 'https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/',
    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.

    Returns Promise<number>

    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.

    Returns Promise<void>

    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.

    Returns Promise<void>

    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.

    Returns Promise<void>

    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('https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/');

    await view.inspectSharedWorker();

    Example:

        const winOption = {
    name:'child',
    defaultWidth: 300,
    defaultHeight: 300,
    url: 'https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/',
    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.

    Parameters

    • workerId: string

      The id of the shared worker.

    Returns Promise<void>

    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('https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/');

    const sharedWorkers = await view.getSharedWorkers();
    await view.inspectSharedWorkerById(sharedWorkers[0].id);

    Window:

        const winOption = {
    name:'child',
    defaultWidth: 300,
    defaultHeight: 300,
    url: 'https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/',
    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.

  • Parameters

    • type: string | symbol

    Returns number

  • Parameters

    • type: string | symbol

    Returns Function[]

  • Experimental

    Navigates the WebContents to a specified URL.

    Note: The url must contain the protocol prefix such as http:// or https://.

    Parameters

    • url: string

      The URL to navigate the WebContents to.

    Returns Promise<void>

    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.

    Returns Promise<void>

    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.

    Returns Promise<void>

    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.

    Type Parameters

    • EventType extends
          | "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"
          | "added-to-layout"
          | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Event 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.

    Type Parameters

    • EventType extends
          | "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"
          | "added-to-layout"
          | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Event payloads are documented in the OpenFin.Events namespace.

  • Adds a listener to the beginning of the listeners array for the specified event.

    Type Parameters

    • EventType extends
          | "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"
          | "added-to-layout"
          | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Event 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.

    Type Parameters

    • EventType extends
          | "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"
          | "added-to-layout"
          | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Event payloads are documented in the OpenFin.Events namespace.

  • Prints the WebContents.

    Parameters

    • options: PrintOptions = {}

      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.

    Returns Promise<void>

    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

    Parameters

    • ignoreCache: boolean = false

    Returns Promise<void>

    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.

    Parameters

    • OptionaleventType:
          | "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"
          | "added-to-layout"
          | "removed-from-layout"

    Returns Promise<View>

  • Remove a listener from the listener array for the specified event.

    Type Parameters

    • EventType extends
          | "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"
          | "added-to-layout"
          | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Caution: 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.

    Parameters

    Returns Promise<void>

    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.

    Parameters

    • level: number

      The zoom level

    Returns Promise<void>

    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.

    Returns Promise<void>

    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.

    Parameters

    Returns Promise<void>

    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

    Returns Promise<void>

    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.

    Parameters

    Returns Promise<PopupResult<any>>

    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:

    • clearSelection - Clear the selection.
    • keepSelection - Translate the selection into a normal selection.
    • activateSelection - Focus and click the selection node.

    Parameters

    • action: "clearSelection" | "keepSelection" | "activateSelection"

    Returns Promise<void>

    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.

    Returns Promise<void>

    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 Promise<boolean>

    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.

    Parameters

    Returns Promise<void>

    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));