AboutSupportDeveloper GuideVersion 36.122.80.26

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

    Returns Identity

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

    Example

    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));
  • Gets a base64 encoded image of all or part of the WebContents.

    Parameters

    Returns Promise<string>

    Example

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

    Remarks

    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

    Destroys the current view

    Returns Promise<void>

    Example

    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>

    Example

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

    Remarks

    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.

    Parameters

    • searchTerm: string

      Term to find in page

    • Optional options: 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>

    Example

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

    Remarks

    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

    Focuses the view

    Parameters

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

    Returns Promise<void>

    Example

    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>

    Remarks

    View position is relative to the bounds of the window. ({top: 0, left: 0} represents the top left corner of the window)

    Example

    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 TabStack of the view if it belongs to one.

    Returns Promise<TabStack>

    this view belongs to.

    Throws

    if this view does not belong to a TabStack or if the window has been destroyed.

    Example

    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>

    Example

    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>

    Example

    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>

    Example

    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.

    Returns Promise<Layout>

    Example

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

    Deprecated

    use System.getPrinters instead

    Example

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

    Remarks

    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

    Returns Promise<EntityProcessDetails>

    Example

    View:

        const view = await fin.View.getCurrent();
    const processInfo = await view.getProcessInfo();

    Window:

        const win = await fin.Window.getCurrent();
    const processInfo = await win.getProcessInfo();

    Remarks

    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.

    Returns Promise<SharedWorkerInfo[]>

    Example

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

    Remarks

    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.

  • Returns the zoom level of the WebContents.

    Returns Promise<number>

    Example

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

    Remarks

    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

    Hides the current view if it is currently visible.

    Returns Promise<void>

    Example

    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>

    Example

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

    Remarks

    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.

    Returns Promise<void>

    Example

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

    Remarks

    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.

    Parameters

    • workerId: string

      The id of the shared worker.

    Returns Promise<void>

    Example

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

    Remarks

    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.

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

    Example

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

    Remarks

    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.

    Returns Promise<void>

    Example

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

    Remarks

    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.

    Returns Promise<void>

    Example

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

    Remarks

    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.

    Type Parameters

    • EventType extends "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" | "will-redirect" | "created" | "destroyed" | "hidden" | "hotkey" | "shown" | "target-changed" | "host-context-changed" | "added-to-layout" | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Remarks

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

    Type Parameters

    • EventType extends "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" | "will-redirect" | "created" | "destroyed" | "hidden" | "hotkey" | "shown" | "target-changed" | "host-context-changed" | "added-to-layout" | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Remarks

    Event payloads are documented in the 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" | "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" | "will-redirect" | "created" | "destroyed" | "hidden" | "hotkey" | "shown" | "target-changed" | "host-context-changed" | "added-to-layout" | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Remarks

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

    Type Parameters

    • EventType extends "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" | "will-redirect" | "created" | "destroyed" | "hidden" | "hotkey" | "shown" | "target-changed" | "host-context-changed" | "added-to-layout" | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Remarks

    Event payloads are documented in the 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>

    Example

    const view = fin.View.getCurrentSync();

    view.print({ silent: false, deviceName: 'system-printer-name' }).then(() => {
    console.log('print call has been sent to the system');
    });

    Remarks

    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.

  • Reloads the WebContents

    Parameters

    • ignoreCache: boolean = false

    Returns Promise<void>

    Example

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

    Remarks

    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.

    Parameters

    • 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" | "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" | "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" | "will-redirect" | "created" | "destroyed" | "hidden" | "hotkey" | "shown" | "target-changed" | "host-context-changed" | "added-to-layout" | "removed-from-layout"

    Parameters

    Returns Promise<View>

    Remarks

    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>

    Remarks

    View position is relative to the bounds of the window. ({top: 0, left: 0} represents the top left corner of the window)

    Example

    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>

    Example

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

    Remarks

    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 the current view if it is currently hidden.

    Returns Promise<void>

    Example

    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>

    Remarks

    View position is relative to the bounds of the window. ({top: 0, left: 0} represents the top left corner of the window)

    Example

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

    showViewAt()
    .then(() => console.log('View set to new bounds and shown.'))
    .catch(err => console.log(err));
  • Shows the Chromium Developer Tools

    Returns Promise<void>

    Example

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

    Remarks

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

    Example

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

    Remarks

    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:

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

    Parameters

    • action: string

    Returns Promise<void>

    Example

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

    Remarks

    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 any current navigation the WebContents is performing.

    Returns Promise<void>

    Example

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

    Remarks

    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

    Triggers the before-unload handler for the View, if one is set.

    Returns Promise<boolean>

    Remarks

    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.

    Example

    // from inside a View context
    const unloadPrevented = await fin.me.triggerBeforeUnload();
  • Experimental

    Updates the view's options.

    Parameters

    Returns Promise<void>

    Example

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