Interface: TopbarAPI

Defines page-level APIs available to solutions.

Hierarchy

• TopbarAPIProperties

  ↳ TopbarAPI

Properties

customEnvLabel

• customEnvLabel: string

Inherited from TopbarAPIProperties.customEnvLabel

Gets or sets a custom environment label in the shell.

Example:

Copy
topbar.customEnvLabel = 'Beta';
Copied to your clipboard
topbar.customEnvLabel = 'Beta';

solution

• solution: Solution

Inherited from TopbarApiProperties.solution.

Configuration for solution name and hero.

Example:

Copy
topbar.solution = {
  icon: 'AdobeExperienceCloud',
  title: 'Adobe Experience Cloud22',
  shortTitle: 'AEC'
};
Copied to your clipboard
topbar.solution = {
  icon: 'AdobeExperienceCloud',
  title: 'Adobe Experience Cloud22',
  shortTitle: 'AEC'
};

workspaces

• workspaces: WorkspaceMenu[]

Inherited from TopbarApiProperties.

Configuration for the Shell workspaces. Workspace names should be unique, and localized using the unified-shell locale prior to setting runtime.workspaces.

Copy
topbar.workspaces = [
  {name: 'Home', url: '/'},
  {name: 'ABC', url: '/abc'},
  {name: 'DEF', url: '/def'}
];
Copied to your clipboard
topbar.workspaces = [
  {name: 'Home', url: '/'},
  {name: 'ABC', url: '/abc'},
  {name: 'DEF', url: '/def'}
];

Unified shell also supports workspace flyout menus, where clicking on a workspace displays a dropdown menu. The top-level workspace is present in the dropdown menu as the first menu item. Menus may be nested multiple times, and used in combination with normal workspaces. By default, parent menu items will be automatically added to the sub-menu because of the way the user interaction works. To prevent this, remove the url property on the parent item; it will then not be injected into the sub-menu.

Copy
topbar.workspaces = [
  {name: 'Home', url: '/'},
  {name: 'ABC', url: '/abc'},
  {
    name: 'DEF',
    url: '/def',
    menu: [
      {
        name: 'GHI',
        url: '/def/ghi',
        menu: [
          {name: 'JKL', url: '/def/ghi/jkl'}
        ]
      }
    ]
  }
];
Copied to your clipboard
topbar.workspaces = [
  {name: 'Home', url: '/'},
  {name: 'ABC', url: '/abc'},
  {
    name: 'DEF',
    url: '/def',
    menu: [
      {
        name: 'GHI',
        url: '/def/ghi',
        menu: [
          {name: 'JKL', url: '/def/ghi/jkl'}
        ]
      }
    ]
  }
];

Methods

onHeroClick

▸ onHeroClick(callback: Callback): void

Registers a callback to execute when the hero (solution) icon in the upper lefthand corner of the Shell is clicked.

Parameters:

Returns: void

setCustomSearch

▸ setCustomSearch(config: CustomSearchConfig | null): void

Determines whether or not to enable the custom search property, and enacts a callback when the custom search icon is clicked.

Parameters:

Returns: void

setFeedbackButton

▸ setFeedbackButton(config: CustomFeedbackConfig | HelpCenterFeedbackConfig | ExternalFeedbackConfig | null): void

Determines whether or not to enable a feedback button.

Parameters:

Returns: void

Next steps

Explore details of the Index, Page, TopBar, and User external modules.

Explore the attributes and behavior of Adobe Experience Cloud Interfaces:

Modules

Runtime

Return to the Guides Index.

Last updated 12/10/2024

Was this helpful?

Yes

No