Interface DockProvider

Sample DockProvider definition.

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

Import required dependencies.

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

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',
          },
        },
        {
          tooltip: 'Button with sub-options',
          options: [
            {
              tooltip: 'Nested button 1',
              iconUrl: 'https://www.openfin.co/favicon-32x32.png',
              action: {
                id: 'nestedButton1',
                customData: 'nestedButton1 clicked',
              },
            },
          ],
        },
      ],
    },
  ],
};
Copy

When a Dock button is clicked, the action object is passed to the customActions function defined as defined in the Workspace Platform init function.

Initialize your Workspace Platform 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)
        }
     }
});
Copy

Register Dock provider object.

await Dock.register(provider);
Copy

Show Dock.

await Dock.show();
Copy