AboutSupportDeveloper GuideVersion 18.0.10

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.

Example

Registering a StorefrontProvider

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

Hierarchy

Properties

buttonVisibility?: "hidden" | "visible"

Store button visibility status

Default

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

Behavior of app card when it is clicked

Default

'show-app-details'
clientAPIVersion?: string

version of client SDK, set by the API

icon: string

Icon for the provider.

id: string

Unique identifier for the provider.

Remarks

A non-zero length string.

title: string

A UI friendly title for the provider platform.

Methods

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

    Returns Promise<App[]>

    Example

    An example of a getApps implementation that returns a single 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>

    Example

    An example implementation of getFooter:

    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;
    }
  • 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.

    Example

    An example implementation of launchApp:

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