OpenFin Workspace Platform API
    Preparing search index...

    Interface StorefrontProvider

    Describes a Storefront provided by a platform. A platform must provide an object that satisfies this interface in order to register with the Storefront.

    Sample StorefrontProvider definition.

    Import required dependencies.

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

    Create provider object to configure Storefront.

    const provider: StorefrontProvider = {
      id: 'provider-id',
      title: 'Sample Storefront',
      icon: 'https://www.openfin.co/favicon-32x32.png',
      getApps: () => { }, // Get apps to populate the platform's storefront
      getNavigation: () => {...}, // Get navigation selections for the left navigation bar
      getLandingPage: () => {...}, // Get main landing page for platform's storefront
      getFooter: () => {...}, // Get footer for the platform's storefront
      launchApp: () => {...}, // Launch an app provided by the platform's storefront
    };

    Register storefront provider object.

    await Storefront.register(provider);
    interface StorefrontProvider {
        buttonVisibility?: "hidden" | "visible";
        cardClickBehavior?: "show-app-details" | "perform-primary-button-action";
        clientAPIVersion?: string;
        icon: string | TaskbarIcon;
        id: string;
        taskbarIconGroup?: string;
        title: string;
        getApps(): Promise<App[]>;
        getFooter(): Promise<StorefrontFooter>;
        getLandingPage(): Promise<StorefrontLandingPage>;
        getNavigation(): Promise<
            [
                StorefrontNavigationSection?,
                StorefrontNavigationSection?,
                StorefrontNavigationSection?,
            ],
        >;
        launchApp(app: App): Promise<void>;
    }

    Hierarchy

    • ProviderInfo
      • StorefrontProvider
    Index
    buttonVisibility? cardClickBehavior? clientAPIVersion? icon id taskbarIconGroup? title
    getApps getFooter getLandingPage getNavigation launchApp
    buttonVisibility?: "hidden" | "visible"

    Store button visibility status

    'visible'
    cardClickBehavior?: "show-app-details" | "perform-primary-button-action"

    Behavior of app card when it is clicked

    'show-app-details'
    clientAPIVersion?: string

    version of client SDK, set by the API

    icon: string | TaskbarIcon

    Icon for the provider.

    id: string

    Unique identifier for the provider.

    A non-zero length string.

    taskbarIconGroup?: string

    The group name to group the taskbar icon with.

    title: string

    A UI friendly title for the provider platform.

    • Get a list of apps to populate the platform's Storefront with.

      Returns Promise<App[]>

      const app : App = {
           appId: 'uid'
           title: 'My App'
           manifest: `https://openfin-iex.experolabs.com/openfin/manifests/cash-flow.json`,
           icons: [
               {
                   src: '/icon.png'
               }
           ],
           contactEmail: contact@email.com,
           supportEmail: support@email.com,
           publisher: 'My Publisher',
           tags: [],
           images: [],
           intents: []
      }

      const getApps = async (): Promise<App[]> => {
           return [app];
      }

    • Get the footer for the platform's Storefront.

      The footer is a section displayed at the bottom of the Storefront. It can contain a logo, text, and links.

      Returns Promise<StorefrontFooter>

      const footer: StorefrontFooter = {
           logo: { src: './images/image', size: '32' },
           text: 'footer text',
           links: [
               { title:'title', url: 'https://openfin.co' },
               { title: 'title', url: 'https://openfin.co'}
           ]
      }

      const getFooter = async (): Promise<StorefrontFooter> => {
           return footer;
      }

    • Get the main landing page for the platform's Storefront.

      Returns Promise<StorefrontLandingPage>

      Example: Landing page with hero, top row, middle row, and bottom row.

      const landingPage : StorefrontLandingPage = {
        hero: {
           title: 'My Landing Page',
           description: 'description',
           cta: navigationItems[0],
           image: {
               src: './images/image.png'
           }
        },
        topRow: {
            title: 'Top Row Title',
            items: [ /* array of StorefrontNavigationItem */ ]
        },
        middleRow: {
            title: 'Middle Row Title',
            items: [ /* array of Apps */ ]
        },
        bottomRow: {
            title: 'Bottom Row Title',
            items: [ /* array of StorefrontNavigationItem */ ]
        }
      }

      const getLandingPage = async (): Promise<StorefrontLandingPage> => {
           return landingPage;
      }

    • Get the Storefront navigation sections for the left nav bar.

      Returns Promise<
          [
              StorefrontNavigationSection?,
              StorefrontNavigationSection?,
              StorefrontNavigationSection?,
          ],
      >

      const navigationSections: [StorefrontNavigationSection, StorefrontNavigationSection] = [
        {
            id: 'first id',
            title: 'title',
            items: [ /* array of navigation items */ ]
        },
        {
            id: 'second id'
            title: 'title',
            items: [ /* array of navigation items */ ]
        }
      ]

      const getNavigation = async (): Promise<[StorefrontNavigationSection, StorefrontNavigationSection]>  => {
           return navigationSections;
      }

    • Launch an app provided by the platform's Storefront.

      Parameters

      • app: App

        the app to launch.

      Returns Promise<void>

      a promise that resolves when the app has been launched.

      import { getStorefrontProvider } from "./my-provider";

      //Grab your provider
      const myStoreFrontProvider: StorefrontProvider = getStorefrontProvider();

      const app : App = {
           appId: 'uid'
           title: 'My App'
           manifest: `https://openfin-iex.experolabs.com/openfin/manifests/cash-flow.json`,
           icons: [
               {
                   src: './image.png'
               }
           ],
           contactEmail: contact@email.com,
           supportEmail: support@email.com,
           publisher: 'My Publisher',
           tags: [],
           images: [],
           intents: []
      }

      const launch = async () => {
           await myStorefrontProvider.launchApp(app);
      }

    Settings

    On This Page
    Properties
    Methods