Control taskbar icon display

By default, the Microsoft Windows taskbar displays icons for the Browser (platform), Store, and Dock components Here™ Core UI. However, Windows, provides a setting to let users group taskbar icons and hide labels. In Here Core UI Components v19.1 or later, you can configure your platform and the Dock or Store components to group Here™ Core UI Component 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 Here Core UI 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 the manifest for the Here Core UI platform, 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 Here Core UI Components 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 the platform's manifest:

   "platform": {
     "name": "PLATFORM_NAME",
     "providerUrl": "PLATFORM_URL",
     "uuid": "PLATFORM_UUID",
     "taskbarIconGroup": "STRING_TO_IDENTIFY_TASKBAR_ICON_GROUP"
   }

2. Support light and dark variants of the icon:

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

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

   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.
     // 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 Store provider and include the taskbarIconGroup property:

   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 jump lists are not enabled for the application. Updating the taskbar icon group when it has a jump list could invalidate the jump list.