how-to-provide-view-menu-item.md

SCION Workbench	Projects Overview	Changelog	Contributing	Sponsoring

SCION Workbench > How To Guides > View

Right-clicking on a view tab opens a context menu, displaying menu items contributed by the application and built-in menu items provided by the workbench. Built-in menu items can be configured via the configuration passed to provideWorkbench().

How to contribute a menu item

Menu items can be contributed declaratively from an HTML template or registered programmatically via the WorkbenchService.

Declaring a menu item in the HTML template of a workbench view adds it to that view only. To add it to every view, declare it outside a view context, such as in app.component.html, or register it programmatically.

Contribute a menu item via HTML template

Add a <ng-template> to an HTML template and decorate it with the wbViewMenuItem directive. The template content is used as the menu item content. The menu item shares the lifecycle of the containing component.

<ng-template wbViewMenuItem [accelerator]="['ctrl', 'b']" (action)="..." let-view>
  Click me
</ng-template>

Contribute a menu item via WorkbenchService

As an alternative to modeling menu items in HTML templates, menu items can be contributed programmatically as a factory function registered via the WorkbenchService.registerViewMenuItem method. The function is invoked when opening the menu. Use the passed view handle to decide whether to display the menu item. The content of the menu item is specified in the form of a CDK portal, i.e., a component portal or a template portal. The component can inject WorkbenchView.

import {WorkbenchMenuItem, WorkbenchService, WorkbenchView} from '@scion/workbench';
import {inject} from '@angular/core';
import {ComponentPortal} from '@angular/cdk/portal';

inject(WorkbenchService).registerViewMenuItem((view: WorkbenchView): WorkbenchMenuItem | null => {
  return {
    portal: new ComponentPortal(YourComponent),
    accelerator: ['ctrl', 'alt', 1],
    group: 'some-group',
    onAction: () => {
      // do something
    },
  };
});