Store overview

The Store (or Storefront) component of OpenFin Workspace provides a user interface where your users can browse the content that you provide. It lets users explore and discover the resources they need to get their work done. The Home component, on the other hand, focuses on search-based exploration. See also Overview of OpenFin Workspace for more information about all Workspace components.

The Storefront API enables developers of a workspace platform to provide their own storefront implementation to be exposed in the Store component of Workspace. Software that implements the Storefront API is a storefront provider.

🚧

New architecture in version 9

In Workspace 9 and later, Store and Storefront functions are affected by changes in the API architecture. When you upgrade to Workspace 9, if you implement a Storefront, make sure to upgrade the Workspace and Workspace-Platform packages.

How it works

A storefront provider implements the following elements of a storefront:

• A landing page
• A footer that appears on all pages of the storefront
• A list of sections for the sidebar navigation
• A list of apps to populate the storefront
• A LaunchApp() method to launch an app

In Workspace 11 and later, the Storefront landing page contains a grid of cards that can represent either apps for users to launch directly, or navigation items that let them explore further. You can customize app cards further; for details, see Customize Storefront.

The layout of the landing page is fixed:

• The top row contains a maximum of four cards.

• The bottom row contains a maximum of three cards.

• The middle row contains as many items as you specify. The display of items in this row wraps; that is, it is not truncated

A storefront provider can be an FDC3 app directory, or it can include any other list of apps or navigation entry points your Workspace implementation requires.

Example

Like other Workspace components that require you to register a provider, Store requires the register() method:

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

//Declare a provider
const myStorefrontProvider: 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: () => {...}
};

await Storefront.register(myStorefrontProvider);
// show the Storefront. Hidden by default.
await Storefront.show();