Interface WorkbenchViewCapability

Type Declaration

• [key: string]: unknown

  Arbitrary metadata associated with the capability.

• Optionalclosable?: boolean

  Controls if to display a close button in the view tab. Defaults to true.

• OptionalcssClass?: string | string[]

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

• Optionalheading?: string

  Specifies the subtitle of the view tab.

  Can be text or a translation key. A translation key starts with the percent symbol (%) and may include parameters in matrix notation for text interpolation.

  Text and interpolation parameters can reference capability parameters and resolvers using the colon syntax. See resolve for defining resolvers.

  Example: - Heading referencing a resolver

  {
    "params": [
      {"name": "id", "required": true}
    ],
    "properties": {
      "heading": ":productCategory", // `:productCategory` references a resolver
      "resolve": {
       "productCategory": "products/:id/category" // `:id` references a capability parameter
      }
    }
  }
  Copy

  Example: - Translatable heading referencing a resolver in its interpolation parameters

  {
    "params": [
      {"name": "id", "required": true}
    ],
    "properties": {
      "heading": "%product_category.title;category=:productCategory", // `:productCategory` references a resolver
      "resolve": {
        "productCategory": "products/:id/category" // `:id` references a capability parameter
      }
    }
  }
  Copy

• Optionallazy?: boolean

  Controls if to load the microfrontend only when activating the view tab.

  Requires configuration of title and heading in the manifest.

  Defaults to true.

• 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

• Optionalresolve?: { [name: string]: string }

  Defines resolvers for use in the view title and heading.

  A resolver defines a topic where a request is sent to resolve text or a translation key, typically based on capability parameters. Topic segments can reference capability parameters using the colon syntax.

  The application can respond to resolve requests by installing a message listener in the activator. Refer to ActivatorCapability for registering an activator.

  Example: - Message listener replying to resolve requests

  import {Beans} from '@scion/toolkit/bean-manager';
  import {MessageClient} from '@scion/microfrontend-platform';
  
  Beans.get(MessageClient).onMessage('products/:id/name', message => {
    const id = message.params.get('id');
    return `Product ${id}`;
  });
  Copy

• OptionalshowSplash?: boolean

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

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

  See

  WorkbenchView.signalReady

• Optionaltitle?: string

  Specifies the title of the view tab.

  Can be text or a translation key. A translation key starts with the percent symbol (%) and may include parameters in matrix notation for text interpolation.

  Text and interpolation parameters can reference capability parameters and resolvers using the colon syntax. See resolve for defining resolvers.

  Example: - Title referencing a resolver

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

  Example: - Translatable title referencing a resolver in its interpolation parameters

  {
    "params": [
      {"name": "id", "required": true}
    ],
    "properties": {
      "title": "%product.title;name=:productName", // `:productName` references a resolver
      "resolve": {
        "productName": "products/:id/name" // `:id` references a capability parameter
      }
    }
  }
  Copy