@openfin/workspace

OpenFin Workspace Client API

The Workspace Client APIs enable custom integrations with OpenFin Workspace.

Prerequisites

• Node.js v16.0.0 or higher
• npm

Install

With npm:

$ npm i @openfin/workspace@latest

With yarn:

$ yarn global add @openfin/workspace

Usage and Code Samples

Prior to using Workspace, a Workspace Platform must be initialized.

Home API

• Overview
• API Reference

import Home, CLIProvider from '@openfin/workspace';

import { fetchMySearchResults } from "./my-fetch-implementation";

const searchQueryMap: Map<string, (query: string) => void> = new Map();

// CLIProvider or HomeProvider
const myCLIProvider: CLIProvider = {
     id: "my-cli-provider",
     title: "My CLI Provider",
     icon: "https://google.com/favicon.ico",
     onUserInput: (req) => fetchMySearchResults(req.query)
};

// register home and get back a function to inject search string into home search
const { setSearchQuery } = await Home.register(myCLIProvider);

// Store set query function in a map if you're using multiple providers
searchQueryMap.set(myCLIProvider.id, setSearchQuery);

// Call the set query function for a specific provider the search should be injected into
const searchButton = document.createElement('button');
searchButton.innerHTML = 'Search';
document.body.appendChild(searchButton);

searchButton.addEventListener('click', () => {
       searchQueryMap.get('my-cli-provider')('my search string');
});

Storefront API

• Overview
• API Reference

import { Storefront, StorefrontProvider } from "@openfin/workspace";

// Declare a storefront provider
const provider: StorefrontProvider = {
    id: "my-storefront-id"
    title: "My StorefrontProvider"
    icon: "https://cdn.openfin.co/demos/notifications/generator/images/icon-blue.png"
    getApps: () => {...},
    getNavigation: () => {...},
    getLandingPage: () => {...},
    getFooter: () => {...},
    launchApp: () => {...}
    };

Register Storefront provider object.

await Storefront.register(myStorefrontProvider);

Show Storefront.

await Storefront.show();

Dock API

• Overview
• API Reference

const provider: DockProvider = {
    id: 'provider-id',
    title: 'Sample Dock',
    icon: 'https://www.openfin.co/favicon-32x32.png',
    buttons: [
        {
            tooltip: 'Sample Button 1',
            iconUrl: 'https://www.openfin.co/favicon-32x32.png',
            action: {
                id: 'sampleButton1'
            }
        },
        {
            type: DockButtonNames.DropdownButton,
            tooltip: 'Sample Dropdown Button',
            iconUrl: 'https://www.openfin.co/favicon-32x32.png',
            options: [
                {
                    tooltip: 'Dropdown Button 1',
                    iconUrl: 'https://www.openfin.co/favicon-32x32.png',
                    action: {
                        id: 'dropdownButton1',
                        customData: 'dropdownButton1 clicked'
                    }
                },
                {
                    tooltip: 'Dropdown Button 2',
                    iconUrl: 'https://www.openfin.co/favicon-32x32.png',
                    action: {
                        id: 'dropdownButton2',
                        customData: 'dropdownButton2 clicked'
                    }
                }
            ]
        }
    ]
};

Register dock provider object.

await Dock.register(provider);

Show Dock.

await Dock.show();

For more information

• Developer guide.
• API reference.
• See the workspace-starter project for example code.
• See the versions page for a list of all available versions.