BPMN Panel API / Panel Types / ToolbarNodeItem

Type Alias: ToolbarNodeItem

type ToolbarNodeItem = ToolbarItemBase & {
  bpmnType: BpmnNodeKind;
  typeName?: string;
  events?: PanelEvent[];
  size?: {
     w?: number;
     h?: number;
  };
  data?: Record<string, any>;
  placeholderCard?: {
     title: string;
  };
};

Defined in: features/panels/variants/bpmn/types/panel/graph/toolbar/toolbar-item.ts:342

Type Declaration

Name	Type	Description
bpmnType	BpmnNodeKind	BPMN node type for rendering. Determines which visual element @mes/bpmn creates: "task" - Task rectangle "startEvent" - Start circle "endEvent" - End circle "exclusiveGateway" - XOR diamond "parallelGateway" - AND diamond See Detailed processing logic**
typeName?	string	Backend entity type identifier for matching node card configuration. When provided, this value is used to find a matching entry in graph.nodes[] and resolve task card field layout (fieldAttrs/labels) for the palette item. Examples "WFTaskInstance" "WorkOrderOperation"
events?	PanelEvent[]	Events configuration for the node creation. Defines actions to execute when specific events occur during node creation. The primary event for toolbar items is onObjectCreate. Supported Events onObjectCreate Triggered when the node is dropped onto the canvas. Actions: create (ItemActionCreate): Standard Object or Link resource creation via modal/panel runMethod (ItemActionRunMethod): Custom backend method execution Action Methods 1. ItemActionCreate - Standard Object or Link resource creation Uses the standard /Object or /Link API with editor modal. Workflow: User drags node from palette → canvas Modal opens with editor fields User fills form and submits An Object or Link resource is created via the /Object or /Link API The panel refreshes the affected panel or tree after the request succeeds 2. ItemActionRunMethod - Custom backend method Uses the /MetaMethods/Run API with optional editor and response actions. Workflow: User drags node from palette → canvas Modal opens with editor fields (if editor provided) User fills form and submits Custom method is executed via /MetaMethods/Run API The panel processes the configured response actions, such as reloading affected entities Examples Single action (standard create) { "id": "task-operation", "bpmnType": "task", "events": [ { "name": "onObjectCreate", "actions": [ { "id": "create-operation", "name": "create", "label": { "en": "Create Operation" }, "icon": "plus", "editor": { "mode": "modal", "entityType": { "object": { "metaTypeName": "WorkOrderOperation" } }, "fields": [ { "attribute": "itemId", "label": "ID" }, { "attribute": "name", "label": "Name" } ] } } ] } ] } Single action (custom method) { "id": "work_order_bpmn--toolbar--addWOOP", "bpmnType": "task", "events": [ { "name": "onObjectCreate", "actions": [ { "id": "addWOOP", "name": "runMethod", "label": { "ru": "Создать операцию вручную", "en": "Create operation manually" }, "icon": "plus", "request": { "parent": "WorkOrder", "methodName": "addWOOPManually", "objects": [ { "getFromItem": true } ] }, "editor": { "mode": "modal", "header": { "title": { "ru": "Создать операцию вручную", "en": "Create operation manually" } }, "tabs": [ { "id": "tab-01", "title": "Параметры", "fields": [ { "attribute": "taskFlowTemplate", "label": "* Шаблон потока задач", "type": "Object" }, { "attribute": "itemId", "label": "Обозначение" } ] } ] }, "response": { "actions": [ { "id": "reload-tree-node", "method": "reloadEntities", "treeNodes": [ { "getFromItem": true, "reloadChildren": true } ] } ] } } ] } ] } Multiple actions { "id": "task-operation", "bpmnType": "task", "events": [ { "name": "onObjectCreate", "actions": [ { "id": "create-standard", "name": "create", "label": { "en": "Create Standard Operation" }, "editor": { ... } }, { "id": "create-custom", "name": "runMethod", "label": { "en": "Create Custom Operation" }, "request": { ... }, "editor": { ... } } ] } ] } See ItemActionCreate ItemActionRunMethod
size?	{ w?: number; h?: number; }	Optional size for the created node. Defines the width and height of the node when created from the palette. If not specified, @mes/bpmn uses default sizes: Task nodes: 292×132 pixels Start/End events: 36×36 pixels Gateways: determined by BPMN.js Use cases: Create compact task nodes for simple operations Create larger task nodes for complex workflows Override default sizes for custom node types Examples Standard size { "w": 292, "h": 132 } Compact task { "w": 200, "h": 100 } Large instruction card { "w": 400, "h": 200 }
size.w?	number	‐
size.h?	number	‐
data?	Record<string, any>	Custom data to attach to the created node. This data object is: Automatically enriched with _bpmnTaskId (set to toolbar item's id) Passed to @mes/bpmn as node's data property Included in creation events (app:intent:create) Available for toolbar item matching in request-create-nodes.ts System-managed properties: _bpmnTaskId: Automatically set to toolbar item's id by use-bpmn-widget-config.ts (used for matching nodes back to their toolbar configuration) Special properties: titleAttr: Field key to use as dynamic title (extracts from card fields) Use cases: Pass workflow metadata (priority, category, etc.) Set default attribute values Configure dynamic title behavior Example Dynamic title from field { "titleAttr": "itemId" } This makes the card title update based on the itemId field value.
placeholderCard?	{ title: string; }	Placeholder card configuration. Defines only placeholder title shown during drag-and-drop creation. Field layout and field labels are resolved from matching node card config. If not specified, falls back to the node card title from graph.nodes[]. Example { "title": "New Task" }
placeholderCard.title	string	‐