Skip to main content

Dock overview

The Dock component provides a floating toolbar, which offers standard actions by default, and, if configured, enables users to rearrange the actions and add favorites to it.

In Here™ Core UI Components 9 and later versions, the Dock component lets users launch other Here Core UI components, or switch workspaces.

In Here™ Core UI Components 13 and later versions, the Dock configuration can be dynamically updated. For details, see Configure dynamic Dock.

How it works​

Much like Store or Home, you include Dock in your Here Core UI implementation by registering a Dock provider. Unlike Store or Home, you must register a unique Dock provider for each Here Core UI 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 Here Core UI platform, just as Home, Store, and Notification Center do. For more information, see Here Core UI themes with color-picking.

By default Dock contains buttons for Home, Store, 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 Here Core UI 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.

In Here Core UI Components v17.0 or later, dropdown lists can include arrays of lists, to support multiple menu levels. For more information and examples, see the Workspace API reference for DockProvider.

How to do it​

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

const dockProvider: DockProvider = 
{
  // This provider shows only the default Here Core UI components
  title: "DOCK TITLE",
  id: "UNIQUE_DOCK_ID",
  // must be in raster image format. SVG format is not supported.
  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();

Table of Contents