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 ofPanelPosition.Left
,PanelPosition.Right
,PanelPosition.Bottom
,PanelPosition.Top
height
(applies only toPanelPosition.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 specifiesextendToBottom
: boolean. Iftrue
, the panel extends to the bottom of the Page, regardless of whether a bottom panel is also specified. Set tofalse
to let a bottom panel fill the entire width of the Page.extendToTop
: boolean. Iftrue
, the panel extends to the top of the Page, regardless of whether a top panel is also specified. Set tofalse
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
});
Updated about 2 months ago