Skip to main content

Project Facets

Project Facets: Enhancing Project Navigation​

Project Facets provide the navigation options presented within the project navigation sidebar.

The editor automatically creates a navigation option for each program in the project by matching projectFacets that target that program element. If no specific facet is defined for a program, the editor will utilize a default navigation implementation.

ProjectFacet:

  • name: identifies the facet.
  • elementClass (optional): the ElementClass this facet targets. If omitted, the facet is always present in the project navigation, regardless of the model's contents — useful for global tools or views that aren't tied to a specific element.
  • views: the ProjectViewCategory names this facet exposes when selected.
  • options: key/value configuration, e.g. an icon via mrp.material.symbols.icon.

Example​

<editorModelExtension xmlns="https://schemas.normalizedsystems.org/xsd/editorElements/4/0/0">
  <name>application-project</name>
  <projectFacets>
    <projectFacet>
      <name>Application</name>
      <!-- This facet provide navigation for Application -->
      <elementClass>elements::Application</elementClass>
      <views>
        <!-- define view categories for this facet -->
        <projectViewCategory>tree-detail</projectViewCategory>
        <projectViewCategory>3-pane</projectViewCategory>
        <projectViewCategory>diagram</projectViewCategory>
      </views>
      <options>
        <!-- Define an icon with the option -->
        <mrp.material.symbols.icon>monitor</mrp.material.symbols.icon>
      </options>
    </projectFacet>
  </projectFacets>
</editorModelExtension>

Customizing generated ProjectFacets​

A generated ProjectFacet class can be customized in TypeScript via two methods:

isApplicable(): Promise<boolean>​

Determines whether the facet should appear in the navigation for the current project. Defaults to true; override to make the facet conditional on the project's contents.

static async isApplicable(project: ProjectData): Promise<boolean> {
  // anchor:custom-is-applicable:start
  // Add custom logic here to determine if this facet is applicable.
  // anchor:custom-is-applicable:end
  return true
}

model(): Promise<ModelProjection>​

Defines the ModelProjection the facet represents once selected. The returned projectionProjectionA tailored subset of fields on a DataElement designed to encapsulate data for a specific technical or functional view. must be an element that the facet's target ProjectViewComponent(s) are designed to handle.

async model(): Promise<ModelProjection> {
  // anchor:custom-model:start
  return new ProjectModel({
    name: this.project.name,
    baseUrl: this.project.baseUrl
  })
  // anchor:custom-model:end
}