ℹ️ OpenFin Workspace: OpenFin Workspace is a commercial product and this repo is for evaluation purposes (See LICENSE.MD). Use of the OpenFin Container and OpenFin Workspace components is only granted pursuant to a license from OpenFin (see manifest). Please contact us if you would like to request a developer evaluation key or to discuss a production license.
The dock component is one of the standard components of OpenFin workspace, for an in depth look at the component see Dock Overview.
The code for the dock can be found in dock.ts, register is called as part of the app bootstrap process and deregister during the app closedown. The show and minimize methods as you would expect change the visibility of the dock on the desktop.
To enable the dock component the following settings in the manifest must be set.
"bootstrap": {
"dock": true
}You can also add dock to bootstrap:autoShow to make the dock appear when the app launches.
For more details on the bootstrapping process see How To Customize The Bootstrapping Process
All of the dock specific configuration options are stored in dockProvider
As with the other workspace components you can set the id, title and icon used when the platform launches the dock e.g.
"dockProvider": {
"id": "workspace-platform-starter",
"title": "Workspace Platform Starter",
"icon": "http://localhost:8080/favicon.ico"
}The dock component has some built in buttons for Home, Workspaces, Notification Center and Storefront, they can be shown/hidden with the following options.
"dockProvider": {
"workspaceComponents": {
"hideHomeButton": false,
"hideWorkspacesButton": false,
"hideNotificationsButton": false,
"hideStorefrontButton": false
}
}By default the items on the dock can be rearranged, to disable this options use the following configuration:
"dockProvider": {
"disableUserRearrangement": true
}The elements shown on the dock are configured in the entries property.
The entries property for items on the dock can be a combination of apps and buttons.
The app entires can be used to show dock entries based on apps configured from your app provider (see How To Define Apps). This provides a convenient shortcut with minimum configuration to launch apps that you have already provided from your app source.
The dock can display either single buttons, or a drop down menu. You can override the icon and tooltip for the buttons, but by default they will use the metadata from the app definition. Each entry can pull apps from multiple tagged items.
To add single buttons for all apps tagged with dock you would add the following configuration.
"dockProvider": {
"entries": [
{
"display": "individual",
"tags": ["dock"]
}
]
}To add a drop down containing all the apps tagged with fdc3 you would add the following configuration. If you don't specify an iconUrl or tooltip for a group it will default to using the values from the first entry in the group, in this example we override the tooltip.
"dockProvider": {
"entries": [
{
"display": "group",
"tooltip": "FDC3",
"tags": ["fdc3"]
}
]
}In this second group example we override both the tooltip and iconUrl and it also uses the apps tagged with either manager or feedback.
"dockProvider": {
"entries": [
{
"display": "group",
"tooltip": "Manager",
"iconUrl": "http://localhost:8080/common/images/icon-gradient.png",
"tags": ["manager", "feedback"]
}
]
}If you wanted a single menu with two submenus for the above tags entries you could add the following:
"dockProvider": {
"entries": [
{
"tooltip": "FDC3 and Manager",
"iconUrl": "http://localhost:8080/common/images/icon-gradient.png",
"options": [
{
"display": "group",
"tooltip": "FDC3",
"tags": ["fdc3"]
},
{
"display": "group",
"tooltip": "Manager",
"tags": ["manager", "feedback"]
}
]
}
]
}The buttons provide more flexibility than the apps and can be used to show dock entries which can launch apps or custom actions.
If you specify an appId it is looked up from your apps provider and is launched on the button click.
"dockProvider": {
"entries": [
{
"tooltip": "My App",
"iconUrl": "http://localhost:8080/favicon.ico",
"appId": "my-app"
}
]
}To launch a custom action you instead specify its id, and the customData specific to that action. For more information on custom actions see How To Add Custom Actions for Menus And Buttons.
"dockProvider": {
"entries": [
{
"tooltip": "Google",
"iconUrl": "https://www.google.com/favicon.ico",
"action": {
"id": "launch-view",
"customData": {
"url": "https://www.google.com"
}
}
}
]
}If you want to configure a drop down menu instead of a single button you can use the following pattern. Where each of the options is configured with either appId or action in the same way as the single button elements above. The tooltip and iconUrl must be specified for a drop down. The {theme} will be replaced with the current theme id (defaults to theme label if not specified) and will also replace {scheme} with light/dark dependent on the current settings.
"dockProvider": {
"entries": [
{
"tooltip": "Social",
"iconUrl": "http://localhost:8080/common/icons/{theme}/{scheme}/share.svg",
"options": [
{
"tooltip": "Twitter",
"action": {
"id": "launch-view",
"customData": {
"url": "https://twitter.com/openfintech"
}
}
},
{
"tooltip": "YouTube",
"action": {
"id": "launch-view",
"customData": {
"url": "https://www.youtube.com/user/OpenFinTech"
}
}
}
]
}
]
}