Store overview

The Store component of OpenFin Workspace provides a user interface where your users can browse the content that you provide. It lets users discover and explore the resources they need to get their work done. The Home component, on the other hand, focuses on search-based exploration. See the 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. A storefront provider implements the Storefront API.

🚧

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 navigation sections for the sidebar navigation

• A list of apps to populate the storefront

• A LaunchApp() method to launch an app

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 configure various properties of these cards; for more information, see Configure cards.

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 StorefrontLandingPageItem type lets you specify either navigation items or apps in any row of the Storefront landing page.

A storefront provider can be an FDC3 app directory, or it can include any other 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() function. See also the StorefrontProvider API reference for examples of objects that are passed to the getter methods and to launchApp.

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

// Declare a provider
const myStorefrontProvider: StorefrontProvider = 
{
  id: "PROVIDER_ID"
  title: "PROVIDER_PLATFORM_TITLE"
  icon: "PROVIDER_ICON",
  
  // See API reference
  getApps: () => {...},
  getNavigation: () => {...},
  getLandingPage: () => {...},
  getFooter: () => {...},
  launchApp: () => {...}
};

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