Control taskbar icon display

By default, the Windows taskbar displays icons for the Browser (platform), Store, and Dock components of Workspace. Windows, however, provides a setting to let users group taskbar icons and hide labels. In Workspace v19.1 or later, you can configure your platform and the Dock or Store components to group Workspace icons in the same way.

This features applies only to the Windows taskbar, and only if users select the Windows setting Combine taskbar icons and hide labels.

• Taskbar icons are grouped only if a single Workspace Platform is running.

• If multiple platforms are running, icons for components are displayed individually.

• After the platform starts, any changes to the configuration do not apply until it is started again.

How it works

In your application manifest, you specify a string value for the taskbarIconGroup property as part of the platform object. See Manifest settings for more information.

You then include the taskbarIconGroup property with the same string value in your DockProvider or StorefrontProvider object when you register Dock or Store.

Earlier versions of Workspace specified the optional icon as a property of the BrowserCreateWindowRequest option. You can continue to specify this property, but it does not support light and dark variants of the icon. To provide light and dark variants, you specify the icon object as a property of the BrowserWorkspacePlatformWindowOptions object.

How to do it

1. Add the taskbarIconGroup property to your application manifest:

   JSON

   "platform": {
     "name": "WORKSPACE_NAME",
     "providerUrl": "WORKSPACE_PLATFORM_URL",
     "uuid": "WORKSPACE_UUID",
     "taskbarIconGroup": "STRING_TO_IDENTIFY_TASKBAR_ICON_GROUP"
   }
   

2. Support light and dark variants of the icon:

   TypeScript

   const browserWindow: BrowserCreateWindowRequest = {
     ...,
     workspacePlatform: {
       ...,
       icon: 
       {
         light: "LIGHT_ICON_URL",
         dark: "DARK_ICON_URL"
       },
       ...
     },
     ...
   }
   

3. Register your Dock provider and include the taskbarIconGroup property:

   TypeScript

   import * as Dock from "@openfin/workspace";
   
   const dockProvider: DockProvider = 
   {
     // This provider shows only the default Workspace components
     title: "DOCK TITLE",
     id: "UNIQUE_DOCK_ID",
     // must be in raster image format. SVG format is not supported.
     // optionally specify light and dark variants to appear when group is unstacked
     icon: 
     {
       light: "LIGHT_ICON_URL",
       dark: "DARK_ICON_URL"
     },
     taskbarIconGroup: "STRING_TO_IDENTIFY_TASKBAR_ICON_GROUP"
   };
   
   Dock.register(provider: dockProvider);
   // you must explicitly call this function to display the Dock. Dock is hidden by default.
   Dock.show();
   

4. Register your Storefront provider and include the taskbarIconGroup property:

   JavaScript

   import { Storefront, StorefrontProvider } from "@openfin/workspace";
   
   // Declare a provider
   const myStorefrontProvider: StorefrontProvider = 
   {
     id: "PROVIDER_ID",
     title: "PROVIDER_PLATFORM_TITLE",
     // optionally add light and dark icon variants -- see Dock example
     icon: "PROVIDER_ICON",
     taskbarIconGroup: "STRING_TO_IDENTIFY_TASKBAR_ICON_GROUP"
     .
     .
     .
   };
   
   // Register the provider
   await Storefront.register(myStorefrontProvider);
   // Show the Storefront. Hidden by default.
   await Storefront.show();
   

Note: You can update the taskbarIconGroup property programmatically after the application starts, but only if jumplists are not enabled for the application.
Updating the taskbar icon group when it has a jumplist could invalidate the jumplist.