Add fixed panels to Browser Page

Starting in Workspace 11, you can add panels to a Browser Page that are displayed for all Views in the Page. Panels can be placed at the top, bottom, left, or right of the Views. A panel can provide custom navigation for Views, filtering options, or any other context that a set of Views requires. Users cannot rearrange or remove fixed panels.

How it works

A new optional panels property of the Page object lets you specify an array of PanelConfig objects with the following attributes:

position: enum. One of PanelPosition.Left, PanelPosition.Right, PanelPosition.Bottom, PanelPosition.Top
height (applies only to PanelPosition.Bottom, PanelPosition.Top): string. The height of a horizontal panel, specified in the units your CSS specifies

The following attributes apply only to vertical panels:

width: string. The width of a vertical panel, specified in the units your CSS specifies
extendToBottom: boolean. If true, the panel extends to the bottom of the Page, regardless of whether a bottom panel is also specified. Set to false to let a bottom panel fill the entire width of the Page.
extendToTop: boolean. If true, the panel extends to the top of the Page, regardless of whether a top panel is also specified. Set to false to let a top panel fill the entire width of the Page.

You can specify only one panel for each position.

Example

Include the panels property in the Page definition of your workspacePlatform configuration. The following example omits other optional definitions; see also Define initial customizations.

import * as WorkspacePlatform from '@openfin/workspace-platform';
import { PanelPosition } from '@openfin/workspace-platform';

const browserInitConfig: WorkspacePlatform.BrowserInitConfig = {
  defaultWindowOptions: {
    workspacePlatform: {
      // The only required property. An array of pages to display in the Browser window.
      // Here we show only one Page with a set of two panels
      pages: [
        {
          pageId: "ddfb783b-52cb-47eb-b25e-5205b28be97f",
          title: "Test Page",
          layout: {
            content: [
              {
                type: "stack",
                content: [
                  {
                    type: "component",
                    componentName: "view",
                    componentState: {
                      url: "https://example.com"
                    }
                  }
                ]
              }
            ]
          },
          panels: [
            {
              position: PanelPosition.Left,
              // because height and width take a string value, can be set to whatever measurement your CSS requires
              width: "120px",
              // this example positions the left panel over the top panel
              extendToTop: true,
              viewOptions: 
              {
                "url": "https://example.com"
              }
            },
            {
              position: PanelPosition.Top,
              // because height and width take a string value, can be set to whatever measurement your CSS requires
              height: "10%",
              viewOptions: 
              {
                url: "https://example.com"
              }
            }
          ]
        },
      ]       
    }
  },
};

await WorkspacePlatform.init({
  browser: browserInitConfig
});