Skip to main content

Add fixed panels to Browser pages

In Here™ Core UI Components v11 or later, 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.

A fixed panel is programmatically a kind of View, which means that it can be configured with all the properties of a View object, except bounds and target.

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
});

In Here™ Core UI Components v12.6 or later, fixed panels can be included in the defaultPageOptions property of BrowserInitConfig. See Define initial customizations for context for the following snippet.

.
.
.
  defaultPageOptions: 
  {
    // If these properties are not defined for individual pages, these default values are used
    iconUrl: 'https://example.com/icon.svg',
    unsavedIconUrl: 'https://example.com/unsaved.svg',
    closeButton: {
      // these are the default values; change to hide or disable the close button on a page
      // you specify other button customizations as part of PredefinedButtonConfig or CustomButtonConfig
      disabled: false,
      hidden: false
    },
    // as in previous example in this article
    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'
        }
      }
    ]
  },

Table of Contents