BPMN Panel API / Panel Types / ToolbarItemBase

Type Alias: ToolbarItemBase

type ToolbarItemBase = {
  id: ToolbarItemId;
  icon?: string;
};

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

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" }
]

Properties

Property	Type	Description
id	ToolbarItemId	Unique identifier for this palette item. REQUIRED for toolbar items. This identifier serves multiple purposes: Primary Uses Toolbar item matching - Links BPMN nodes to their toolbar configuration Stored as _bpmnTaskId in node's data property by use-bpmn-widget-config.ts Used by request-create-nodes.ts to find the correct toolbar item config Enables proper event-driven creation flow (onObjectCreate) Event tracking - Used by @mes/bpmn for creation events Fires creation events with paletteId parameter Enables analytics and debugging capabilities Palette entry keys - Generates internal palette entry identifiers Technical Flow When a node is created: // 1. use-bpmn-widget-config.ts stores the ID item.data._bpmnTaskId = item.id; // 2. BPMN library creates node with data node.data._bpmnTaskId = "task-WorkOrderOperation" // 3. request-create-nodes.ts matches toolbar item const toolbarItem = items.find(item => item.id === nodeData._bpmnTaskId ); // 4. Executes toolbar item's onObjectCreate actions await executeCreateAction(toolbarItem.events[0].actions[0]); Events Fired Node creation (app:intent:create): { id: string, // BPMN.js shape ID type: string, // BPMN type (e.g., "bpmn:Task") data: { _bpmnTaskId: string, // This toolbar item's ID ...customData }, paletteId: string, // This toolbar item's ID fields: Array // Card fields } Edge creation (app:intent:create-connector): { bpmnType: string, // BPMN type (e.g., "bpmn:SequenceFlow") data: Record<string, any>, // Custom data from Edge.data paletteId: string // This toolbar item's ID } Naming Conventions Recommended patterns: "task-{EntityType}" - For entity-specific tasks (e.g., "task-WorkOrderOperation") "{feature}-{variant}" - For feature variants (e.g., "quick-task", "detailed-task") "connection-{type}" - For edge types (e.g., "connection-critical") Best practices: Use descriptive, kebab-case identifiers Make IDs globally unique within the toolbar Avoid using backend entity names directly if you have multiple variants Examples **Entity-specific task** "task-WorkOrderOperation" **Feature variants** "quick-task" "detailed-instruction" **Connection types** "connection-critical" "connection-standard"
icon?	string	Icon for the palette button. Icon formats: Built-in @mes/bpmn icons: icon icon--{name} where {name} is one of: move arrow arrange trash hand circle target task zoom-plus zoom-minus fullscreen reset PrimeIcons: pi pi-{name} Examples "icon icon--task" "pi pi-check-circle"