Interface WorkbenchPopupCapability

Type Declaration

• [key: string]: unknown

  Arbitrary metadata associated with the capability.

• OptionalcssClass?: string | string[]

  Specifies CSS class(es) to add to the popup, e.g., to locate the popup in tests.

• path: string

  Specifies the path to the microfrontend.

  The path is relative to the base URL given in the application manifest, or to the origin of the manifest file if no base URL is specified.

  Path segments can reference capability parameters using the colon syntax.

  {
    "params": [
      {"name": "id", "required": true}
    ],
    "properties": {
      "path": "products/:id", // `:id` references a capability parameter
    }
  }
  Copy

  Empty Path Required if Host Capability

  Popup capabilities of the host application require an empty path. In the route, use canMatchWorkbenchPopupCapability guard to match the popup capability.

  Example: - Route matching a popup capability with qualifier {popup: 'info'}

  import {Routes} from '@angular/router';
  import {canMatchWorkbenchMessageBoxCapability} from '@scion/workbench';
  
  const routes: Routes = [
    {path: '', canMatch: [canMatchWorkbenchPopupCapability({popup: 'info'})], component: InfoComponent},
  ];
  Copy

• OptionalshowSplash?: boolean

  Instructs the workbench to show a splash, such as a skeleton or loading indicator, until the popup microfrontend signals readiness.

  By default, the workbench shows a loading indicator. A custom splash can be configured in the workbench host application.

  This property is not supported if a host microfrontend.

  See

  WorkbenchPopup.signalReady

• Optionalsize?: WorkbenchPopupSize

  Specifies the size of this popup.

  If not set, the microfrontend can report the preferred size using @scion/microfrontend-platform!PreferredSizeService.

  Example: - Reporting the size of a microfrontend

  Beans.get(PreferredSizeService).fromDimension(<Microfrontend HTMLElement>);
  Copy

  If the content can grow and shrink, e.g., if using expandable panels, position the microfrontend absolute to allow infinite space for rendering at its preferred size.

  Since loading a microfrontend may take time, prefer setting the popup size in the popup capability to avoid flickering when opening the popup.