Dock overview

In Workspace 9 and later versions, OpenFin Dock provides a taskbar GUI the user can use to launch workspace tasks. These tasks include Home-based search, Store, and Notification Center, plus any custom actions or functionality you add to your workspace platform.

How it works

Much like Storefront or Home, a workspace Dock requires your workspace provider to register a Dock provider. Unlike Storefront or Home, you must register a unique Dock provider for each workspace platform that you create. Each platform appears in a single Dock for your users to choose from.

446446

Dock screenshot with Google UI

The Dock UI renders the theme that you define for your workspace platform, just as Home, Storefront, and Notification Center do. For more information, see Workspace themes with color-picking.

By default Dock contains buttons for Home, Storefront, and Notifications. It also includes either the icon if only a single workspace is registered, or a dropdown list with the current selected workspace and any other workspaces that are part of the workspace platform. These buttons are shown by default, but you can hide them. You can also add custom buttons for custom actions or functionality.

See the Workspace API reference for details.

🚧

DockProvider image format limitation

The icon you provide for your DockProvider cannot be in SVG format. You must specify a raster image format.

Example

  1. Install the Workspace npm package:

    npm i -E @openfin/workspace
    
  2. Import the Workspace API:

    import * as Dock from "@openfin/workspace";
    
  3. Define and register your Dock provider. Note that you must explicitly call the show() function to display the Dock:

    const dockProvider: DockProvider = {
     // This provider shows only the default Workspace components
     title: "My Dock title",
     id: "{MY_UNIQUE_DOCK_ID}",
     icon: "localhost:3000/icon.png"
    };
    Dock.register(provider: dockProvider);
    Dock.show();
    

Did this page help you?