Dock overview

In Workspace 9 and later versions, the Dock taskbar UI component lets users launch other Workspace components, or switch workspaces.

In Workspace 13 and later versions, the Dock configuration can be dynamically updated. For details, see Configure dynamic Dock.

How it works

Much like Storefront or Home, you include Dock in your Workspace implementation by registering 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.

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

How to do it

import * as Dock from "@openfin/workspace";

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);
// you must explicitly call this function to display the Dock. Dock is hidden by default.
Dock.show();