BPMN Data Source in Angular Diagram Component

BPMN data sources represent information that is required for or produced by business process activities. Data sources are essential elements in business process modeling that indicate where data comes from, how it flows through the process, and where it is stored or accessed.

Creating a Data Source

To create a BPMN data source in the Angular Diagram component, define a node and set its shape.type property to Bpmn and its shape.shape property to DataSource. Data sources are typically used to represent databases, files, or other data repositories that business processes interact with.

Basic Data Source Implementation

The following code example demonstrates how to create a basic BPMN data source shape:

app.component.ts

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-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public shape: BpmnShapeModel = {
        type: 'Bpmn',
        shape: 'DataSource'
    }
    public getNodeDefaults(node: NodeModel): NodeModel {
        node.height = 100;
        node.width = 100;
        return node;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Common Use Cases

Data sources are commonly used in business process diagrams to represent:

• Database systems that store business information
• External files or documents required by processes
• Data inputs needed to start or continue a process
• Data outputs generated by completed activities
• Shared repositories accessed by multiple process participants

Integration with Process Flow

Data sources connect to process activities through data associations, showing how information flows between data repositories and business process steps. This helps stakeholders understand data dependencies and information requirements throughout the business process life cycle.