BPMN Panel API / Panel Types

Panel Types

Description

TypeScript definitions for BPMN panel integration with @mes/bpmn package. Configure workflow graphs, toolbar items, and data fetching.

Root Configuration

Type Alias

Description

PanelTypeBpmn

BPMN Panel configuration Uses @mes/bpmn package. This configuration is not in the @mes/bpmn format. The panel renderer will format it and fill with the data for @mes/bpmn. Example { "id": "workorder-bpmn", "type": "bpmn", "request": { "parent": "WFEntityInstance", "method": "getWorkFlowGraphState", "objects": [], "params": {}, "getSelectedObjectForEventId": "workorder--on-object-select--link-table" }, "graph": { "toolbar": { "items": [ { "id": "startEvent", "bpmnType": "startEvent", "events": [ { "id": "workorder-bpmn--toolbar--startEvent--onObjectCreate", "name": "onObjectCreate", "actions": [ { "id": "workorder-bpmn--toolbar--startEvent--create", "name": "create", "editor": { "mode": "direct-request", "entityType": { "object": { "metaTypeName": "WorkOrder" } }, "fields": [ { "attribute": "itemId", "label": "Номер" }, { "attribute": "name", "label": "Наименование" } ] } } ] } ] }, { "id": "endEvent", "bpmnType": "endEvent", "events": [ { "id": "workorder-bpmn--toolbar--endEvent--onObjectCreate", "name": "onObjectCreate", "actions": [ { "id": "workorder-bpmn--toolbar--endEvent--create", "name": "create", "editor": { "mode": "direct-request", "entityType": { "object": { "metaTypeName": "WorkOrder" } }, "fields": [ { "attribute": "itemId", "label": "Номер" }, { "attribute": "name", "label": "Наименование" } ] } } ] } ] }, { "id": "task-WFTaskInstance", "bpmnType": "task", "typeName": "WFTaskInstance", "icon": "icon icon--task", "size": { "w": 292, "h": 132 }, "placeholderCard": { "title": "New Instruction" } }, { "id": "quick-task", "bpmnType": "task", "typeName": "WFTaskInstance", "icon": "pi pi-check-circle", "size": { "w": 200, "h": 100 }, "placeholderCard": { "title": "Quick Task" } }, { "id": "connection-standard", "bpmnType": "bpmn:SequenceFlow", "icon": "icon icon--arrow", "request": { "linkName": "WFConnectorInstance" } }, { "id": "connection-critical", "bpmnType": "bpmn:SequenceFlow", "icon": "icon icon--arrow", "request": { "linkName": "WFConnectorInstance" }, "data": { "connectorType": "critical" } } ], "showHand": true, "showConnect": false, "showOptimize": true, "showDelete": true }, "nodes": [ { "typeName": "WFTaskInstance", "bpmnType": "task", "card": { "title": "{{name}} + {{itemId}}", "subtitle": "", "fields": [ { "key": "itemId", "label": "Обозначение" }, [ { "key": "created_at", "label": "Дата создания" }, { "key": "modified_at", "label": "Дата изменения" } ] ] } }, { "typeName": "WorkOrderOperation", "bpmnType": "task", "card": { "title": "{{name}} + {{itemId}}", "subtitle": "", "fields": [ { "key": "itemId", "label": "Обозначение" }, [ { "key": "created_at", "label": "Дата создания" }, { "key": "modified_at", "label": "Дата изменения" } ] ] }, "update": { "editor": { "mode": "modal", "entityType": { "object": { "metaTypeName": "WFTaskInstance" } }, "fields": [ { "attribute": "name", "label": "Название" }, { "attribute": "itemId", "label": "Обозначение" } ] } }, "delete": { "request": { "parent": "WFTaskInstance", "method": "delete" } } } ], "edges": [] } }

Request Configuration

Type Alias	Description
BpmnPanelRequest	Request to fetch the BPMN graph data. Example { "parent": "WFEntityInstance", "method": "getWorkFlowGraphState", "objects": [], "params": {} }

BPMN Graph Configuration

Name	Description
Edge	Declared configuration shape for graph.edges[]. The current existing-edge renderer does not consume graph.edges[]. Existing connectors are built directly from backend links, and their sequence/conditional type is inferred from backend connectorType and linkName. These fields therefore have no supported runtime effect. Use ToolbarEdgeItem for connector creation configuration.
Graph	Graph visualization configuration
BpmnNodeKind	BPMN node kind Defines the standard BPMN element types supported by @mes/bpmn. See BPMN_NODE_KINDS
NodeCardField	Field definition for a node card. Represents a single data field to display on the card. Each field has a key (referencing the data attribute) and a label (human-readable caption). Example { "key": "status", "label": "Status" }
NodeCard	Configuration for displaying a node card. Defines how task nodes appear on the canvas. The card includes title, subtitle, optional icon, and field rows displaying data attributes. Field Layout System The fields array supports both single-column and multi-column layouts: Single-column row: Use NodeCardField directly { "key": "status", "label": "Status" } Multi-column row: Use NodeCardField[] array [ { "key": "created_at", "label": "Created" }, { "key": "modified_at", "label": "Modified" } ] Conversion to @mes/bpmn Format This simplified configuration converts to @mes/bpmn fieldAttrs and labels: Input (simplified): { "fields": [ { "key": "code", "label": "Код" }, [ { "key": "quantity", "label": "Количество" }, { "key": "unit", "label": "Ед. изм." } ] ] } Output (@mes/bpmn format): { fieldAttrs: ["code", ["quantity", "unit"]], labels: { code: "Код", quantity: "Количество", unit: "Ед. изм." } } Examples Single-column fields { "title": "{{name}}", "subtitle": "{{status}}", "icon": "icon icon--task", "fields": [ { "key": "assignee", "label": "Assigned To" }, { "key": "priority", "label": "Priority" }, { "key": "dueDate", "label": "Due Date" } ] } Multi-column fields { "title": "{{operation}}", "subtitle": "{{status}}", "fields": [ { "key": "code", "label": "Code" }, [ { "key": "startDate", "label": "Start" }, { "key": "endDate", "label": "End" } ], [ { "key": "quantity", "label": "Qty" }, { "key": "completed", "label": "Done" }, { "key": "remaining", "label": "Left" } ] ] } Template interpolation { "title": "Operation {{code}}", "subtitle": "Status: {{status}} | Progress: {{progress}}%", "fields": [ { "key": "workCenter", "label": "Work Center" } ] }
Node	Configuration for BPMN node display and editing operations. This type defines how backend entities are displayed and edited: Visual card configuration (how it appears on canvas) Edit/delete operations for existing nodes Optional BPMN type override Key Concepts Separation from Toolbar: Node config = "How to display/edit existing elements" Toolbar item = "How to create new elements" Type System: typeName = Backend entity type (e.g., "WFTaskInstance") bpmnType = Optional BPMN rendering override. When omitted, runtime infers start/end/gateway kinds from typeName, then falls back to task. CRUD Operations Create: Configured via toolbar events (onObjectCreate) on ToolbarNodeItem (creation happens from palette) Update: Triggered when user double-clicks or selects "edit" on existing node Opens modal with update.fields, pre-filled with current data If update.editor is provided, opens full object editor instead Submits form, executing update.request Node refreshes with updated data Delete: Triggered when user selects "delete" on existing node Optionally shows confirmation Executes delete.request Node is removed from canvas Examples Basic node configuration { "typeName": "WFTaskInstance", "card": { "title": "{{name}}", "subtitle": "{{status}}", "fields": [ { "key": "assignee", "label": "Assignee" } ] }, "update": { "fields": [ { "key": "name", "label": "Task Name" } ], "request": { "parent": "WFTaskInstance", "method": "update" } }, "delete": { "request": { "parent": "WFTaskInstance", "method": "delete" } } } Node with BPMN type override { "typeName": "WFStartTaskInstance", "bpmnType": "startEvent", "card": { "title": "Start: {{name}}" } } Node with editor for updates { "typeName": "WFTaskInstance", "card": { "title": "{{name}}", "subtitle": "{{status}}", "fields": [ { "key": "assignee", "label": "Assignee" } ] }, "update": { "fields": [], "request": { "parent": "WFTaskInstance", "method": "update" }, "editor": { "mode": "modal", "entityType": { "object": { "metaTypeName": "WFTaskInstance" } }, "fields": [ { "attribute": "name", "label": "Task Name" }, { "attribute": "assignee", "label": "Assignee" }, { "attribute": "status", "label": "Status" } ] } }, "delete": { "request": { "parent": "WFTaskInstance", "method": "delete" } } }
BPMN_EDGE_KINDS	BPMN edge kind values Defines the standard BPMN element types supported by @mes/bpmn. Currently only bpmn:SequenceFlow is declared.
BPMN_NODE_KINDS	BPMN node kind values Defines the standard BPMN element types supported by @mes/bpmn.

BPMN Graph > Toolbar Configuration

Type Alias	Description
ToolbarItemId	Toolbar item identifier Unique identifier for the palette item. This is independent of: Backend entity type (typeName) BPMN node type (bpmnType) Can be descriptive like "quick-task", "detailed-instruction", "connection-critical"
ToolbarItemBase	Base toolbar item configuration Represents a palette item that users can drag onto the canvas. Toolbar items are independent of node configurations - they define how to create new elements, while nodes define how to display existing elements. Key Concepts Separation of Concerns: Toolbar item = "How to create" (palette concerns) Node config = "How to display/edit" (data concerns) Type Distinction: bpmnType = BPMN element type for rendering ("task", "startEvent", etc.) typeName = Backend entity type ("WFTaskInstance", "WFStartTaskInstance") Use Cases Multiple creation flows for same backend type: [ { "id": "quick-task", "typeName": "WFTaskInstance", "events": [{ "name": "onObjectCreate", "actions": [{"name": "create"}] }] }, { "id": "detailed-task", "typeName": "WFTaskInstance", "events": [{ "name": "onObjectCreate", "actions": [{"name": "runMethod"}] }] } ] Different icons for same backend type: [ { "id": "cutting", "typeName": "WFTaskInstance", "icon": "icon--scissors" }, { "id": "assembly", "typeName": "WFTaskInstance", "icon": "icon--wrench" } ]
ToolbarNodeItemCreate	Action configuration for BPMN node creation Supports various action methods for creating BPMN nodes: create (ItemActionCreate): Standard object/link creation via modal/panel runMethod (ItemActionRunMethod): Backend method execution with optional editor
ToolbarItem	Toolbar item - node or edge Can be specified as string (simple) or object (detailed). See ToolbarNodeItem ToolbarEdgeItem Examples String shortcuts "items": ["startEvent", "endEvent"] Mixed configuration "items": [ "startEvent", { "id": "quick-task", "bpmnType": "task", "typeName": "WFTaskInstance", "events": [{ "name": "onObjectCreate", "actions": [{ "name": "create" }] }] }, { "id": "connection", "bpmnType": "bpmn:SequenceFlow", "request": { "linkName": "WFConnectorInstance" } } ]
Toolbar	Graph visualization configuration

BPMN Graph > Toolbar Configuration

Type Alias

Description

ToolbarEdgeItem

Toolbar item for creating BPMN edges Defines how to create connections between nodes from the palette. graph.edges[] remains a declared legacy shape; the current existing-edge renderer does not consume it. Key Concepts Separation of Concerns: Toolbar edge item = "How to create" (palette concerns) Existing-edge display = inferred directly from backend connector data Backend Integration: request.linkName is REQUIRED for edge creation Sent to backend when user connects two nodes Must match backend link entity type Examples Standard connection { "id": "connection-standard", "bpmnType": "bpmn:SequenceFlow", "icon": "icon icon--arrow", "request": { "linkName": "WFConnectorInstance" } } Critical connection with custom data { "id": "connection-critical", "bpmnType": "bpmn:SequenceFlow", "icon": "icon icon--alert", "request": { "linkName": "WFCriticalPath" }, "data": { "connectorType": "critical", "priority": "high" } }

Type Aliases

Type Alias	Description
TaskAvatarTheme	Declared avatar styling shape for task nodes The current panel renderer does not consume this configuration.
TaskFieldsTheme	Declared field styling shape for task cards The current panel renderer does not consume this configuration.
SimpleNodeTheme	Declared basic node theme shape with background and border The current panel renderer does not consume this configuration.
TaskNodeTheme	Declared task node theme shape Extends SimpleNodeTheme with task-specific fields. The current panel renderer does not consume this configuration.
EdgeStyle	Declared edge/connector styling shape The current panel renderer does not consume this configuration.
NodeTheme	Declared node theme shape for all node types The current panel renderer does not consume this configuration.
SelectionTheme	Declared selection theme shape The current panel renderer does not consume this configuration.
LabelsTheme	Declared label theme shape The current panel renderer does not consume this configuration.
EdgeTheme	Declared edge-theme shape keyed by edge kind. The current panel renderer ignores graph.theme, including this mapping, and supplies its own default theme.
ThemeConfig	Declared theme configuration shape for the BPMN widget. The type remains part of the accepted panel schema, but the current panel renderer ignores graph.theme and supplies its own default theme. There is therefore no supported runtime configuration example for these fields.
ToolbarNodeItem	‐