Skip to main content

Store overview

The Store component of Here™ Core UI Components provides a user interface where 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 Here™ Core UI Components for more information about all of the Here Core UI components.

The Storefront API enables developers of a Here Core UI platform to provide their own storefront implementation to be exposed in the Store component of Here Core UI. A storefront provider implements the Storefront API.

How it works​

A storefront provider implements the following elements of a storefront:

The Store 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 Here Core UI implementation requires.

Example​

Like other Here Core UI 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();

Table of Contents