BPMN Data Object in Angular Diagram Component

26 Aug 20255 minutes to read

Overview

A BPMN data object represents information that flows through a business process. Data objects can represent data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. In business process modeling, data objects help visualize how information moves through different process activities.

Creating Data Objects

To create a BPMN data object in the Angular Diagram component, define a node with its shape.type property set to Bpmn and its shape.shape property set to DataObject. The type property determines whether the data object represents input data, output data, or a collection of data items.

Basic Data Object Configuration

The following example demonstrates how to create a basic BPMN data object:

import { DiagramModule, BpmnDiagramsService,DiagramComponent, NodeModel, BpmnShapeModel} from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
imports: [
         DiagramModule
    ],

providers: [BpmnDiagramsService],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
            <e-node id='node1' [offsetX]=150 [offsetY]=150 [shape]='shape'></e-node>
            <e-node id='node2' [offsetX]=350 [offsetY]=150 [shape]='shape1'></e-node>
            <e-node id='node3' [offsetX]=550 [offsetY]=150 [shape]='shape2'></e-node>
        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public shape: BpmnShapeModel = {
        type: 'Bpmn',
        shape: 'DataObject',
        //Sets collection as true and type as Input
        dataObject: {
            collection: true,
            type: 'Input'
        }
    }
    public shape1: BpmnShapeModel = {
        type: 'Bpmn',
        shape: 'DataObject',
        //Sets collection as false and type as Output
        dataObject: {
            collection: false,
            type: 'Output'
        }
    }
    public shape2: BpmnShapeModel = {
        type: 'Bpmn',
        shape: 'DataObject',
        //Sets collection as false and type as None
        dataObject: {
            collection: false,
            type: 'None'
        }
    }
    public getNodeDefaults(node: NodeModel): NodeModel {
        node.height = 100;
        node.width = 100;
        return node;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Data Object Types

BPMN data objects support three distinct types, each serving different purposes in process modeling:

Collection Data Object

Represents multiple instances of data items. Use this type when the process handles collections of information such as lists, arrays, or multiple documents.

Data Input

Represents data that enters the process from external sources. This type indicates information required by the process to execute successfully.

Data Output

Represents data generated or modified by the process. This type shows information produced as a result of process execution.

The following table shows the visual representation of each data object type:

Data Object Type Description Visual Representation
Collection Data Object Multiple data instances handled together Collection Data BPMN Shape
Data Input External data entering the process Data Input BPMN Shape
Data Output Data generated by the process Data Output BPMN Shape