ModelService

The ModelService is a central service responsible for managing a project's model data. It provides a comprehensive API for loading, updating, creating, and deleting model elements.

Loading the Model

The ModelService allows you to load and refresh your project's model data.

Loading a Project Model

To load an entire project model, use the loadModel method:

// Asynchronously loads the model for the 'demoApp' project.
await modelService.loadModel({
  project: 'demoApp'
});

// Once loaded, the project model can be accessed via the `project` property.
let project = modelService.project!;

Refreshing the Model

To refresh the project model:

await modelService.refreshModel();

This will trigger the server to restart the model loading process, after which the model service is updated. It will pick up any changes made to the model files outside of the editor.

Modifying the Model

The ModelService provides methods for making changes to individual model elements.

Updating an Existing Element

Use the updateModel method to modify properties of an existing model element.

await modelService.updateModel({
  model: dataElement, // The model element instance to update.
  // Optionally, specify an array of property names to update.
  // This can reduce the payload size and improve performance for partial updates.
  properties: [
    "name",
    "packageName",
    "type"
  ]
});

Creating a New Element

The createModel method is used to instantiate and add new elements to your model.

await modelService.createModel({
  model: dataElement, // The new element object to be created.
  parent: component,  // The parent element to which the new element will be attached.
  field: "dataElements" // The name of the collection property on the parent where the new element should be added (e.g., `component.dataElements`).
});

Creating a New Model Extension

For creating instances of model extensions on an extendable parent element, use createModelExtension:

await modelService.createModelExtension({
  model: workflow,   // The new model extension instance to create.
  parent: component, // The extendable parent element to which the extension will be attached.
  extension: "Workflow" // The name of the model extension as defined in your metamodel.
});

Deleting an Element

To remove an element from the model, use the deleteModel method:

await modelService.deleteModel({
  model: dataElement // The model element instance to delete.
});

Reacting to Model Updates

After any modification operation (create, update, delete), the ModelService automatically synchronizes changes across the client-side model representation. This includes updating references and ensuring data consistency.

To efficiently react to these client-side updates, especially in reactive Angular applications, it is highly recommended to use these dedicated signal functions. These signals ensure your UI components automatically re-render when relevant parts of the model change.

modelPropertySignal

Creates a signal that tracks changes to a specific property of a model element. This signal will automatically update whenever the specified property changes on the server.

let componentModel: ComponentModel; // Assume this is an instance of your component model.

// 'dataElements' will be a signal that automatically updates
// when the 'dataElements' property of 'componentModel' changes
// (e.g., when a DataElement is added, removed, or its order changes).
let dataElements = modelPropertySignal(() => componentModel, "dataElements");

modelExtensionSignal

Creates a signal for a model extension. This signal will update when instances of the specified extension are added to or removed from the parent model element on the server.

let componentModel: ComponentModel; // Assume this is an instance of your component model.

// 'workflows' will be a signal that automatically updates
// when Workflow extensions are added to or removed from 'componentModel'.
let workflows = modelExtensionSignal<WorkflowModel>(() => componentModel, "Workflow");