Interface DockProvider

The icon for DockProvider must be in a raster image format. An SVG is not processed.

Import required dependencies.

import { Dock, DockProvider, DockButtonNames } from '@openfin/workspace';
import { CustomDropdownItemActionPayload, init } from "@openfin/workspace-platform";

Create provider object to pass to the static register function of the Dock type.

const provider: DockProvider = {
  id: 'provider-id',
  title: 'Sample Dock',
  icon: 'https://www.openfin.co/favicon-32x32.png',
  buttons: [
    {
      tooltip: 'Sample Button 1',
      iconUrl: 'https://www.openfin.co/favicon-32x32.png',
      action: {
        id: 'sampleButton1'
      }
    },
    {
      type: DockButtonNames.DropdownButton,
      tooltip: 'Sample Dropdown Button',
      iconUrl: 'https://www.openfin.co/favicon-32x32.png',
      options: [
        {
          tooltip: 'Dropdown Button 1',
          iconUrl: 'https://www.openfin.co/favicon-32x32.png',
          action: {
             id: 'dropdownButton1',
             customData: "dropdownButton1 clicked"
          }
        },
        {
          tooltip: 'Dropdown Button 2',
          iconUrl: 'https://www.openfin.co/favicon-32x32.png',
          action: {
              id: 'dropdownButton2',
              customData: "dropdownButton2 clicked"
          }
        }
      ]
    }
  ]
};

Initialize workspace with customActions to be invoked by dock dropdown.

await init({
    browser: {},
    customActions: {
        "dropdownButton1": async (payload: CustomDropdownItemActionPayload) => {
            alert(payload.customData)
        },
        "dropdownButton2": async (payload: CustomDropdownItemActionPayload) => {
            alert(payload.customData)
        }
     }
});

Register dock provider object.

await Dock.register(provider);

Show Dock.

await Dock.show();