ModelAction

A ModelAction defines a specific action that a user can perform on a model element. These actions are dynamically displayed in a context menu when a user right-clicks on a compatible element.

By implementing the ModelAction interface, you can extend the editor's functionality and provide a rich, context-aware user experience.

The ModelAction Interface

Your custom action class must implement the ModelAction interface:

export interface ModelAction {
  /** The model element that the action is being performed on. */
  target: ModelProjection;
  /** The label for the button in the context menu. */
  readonly label: string;
  /**
   * Optional. Actions with the same group name will be visually grouped together.
   * A line is rendered between different groups to improve readability.
   */
  readonly group?: string;
  /** Optional. An icon to be displayed before the label in the context menu. */
  readonly icon?: VariableIcon;
  /** The method that contains the business logic to be executed when the user clicks the action. */
  onClick(): void;
}

Providing Model Actions

Model actions are made available to the applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution. by using the ACTIONS injection token. This is typically done within a plugin's PluginBuilder to ensure the actions are registered at startup.

Example: Providing an Action via a Plugin Builder

@Injectable()
export class MyActionService implements PluginBuilder {

  async build(): Promise<PluginBuildResult> {
    return  { 
      providers: [
        {
          provide: ACTIONS,
          multi: true, // Always use multi: true for actions
          useValue: [
            {
              // The target element type. Actions are only shown for elements matching this type.
              _type: "elements::DataElement",
              // The class that implements the ModelAction interface.
              component: MyDataElementAction
            }
          ]
        }
      ]
    };
  }
}