BPMN Panel API / Panel Types / NodeCard

Type Alias: NodeCard

type NodeCard = {
  title: string;
  subtitle: string;
  fields: (
     | NodeCardField
    | NodeCardField[])[];
  icon?: string;
};

Defined in: features/panels/variants/bpmn/types/panel/graph/node/index.ts:158

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

Properties

Property	Type	Description
title	string	Title text displayed on the card. Supports template interpolation using syntax. Field names reference attributes from the node's data object. Examples "{{name}}" "Task: {{taskType}}" "{{operation}} - {{workCenter}}"
subtitle	string	Subtitle text displayed on the card. Supports template interpolation using syntax. Typically used for status, dates, or secondary information. Examples "{{status}}" "Due: {{dueDate}}" "{{assignee}} | {{priority}}"
fields	( | NodeCardField | NodeCardField[])[]	Array of field definitions to display on the card. Supports both single-column and multi-column layouts: Single field: NodeCardField - creates a full-width row Multiple fields: NodeCardField[] - creates columns side by side The order in the array determines the display order on the card. See NodeCardField for field structure Example [ { "key": "status", "label": "Status" }, [ { "key": "created", "label": "Created" }, { "key": "modified", "label": "Modified" } ] ]
icon?	string	Optional icon identifier for the card. Icon value influences both the toolbar palette and the node avatar. Toolbar / palette usage (via toolbarIcon in @orion-front/bpmn): Built-in BPMN icon CSS classes: icon icon--{name} PrimeIcons CSS classes: pi pi-{name} Any other CSS class string supported by the host application Node avatar on canvas (via card.avatar in @orion-front/bpmn): Application-specific keys (e.g. "clock-settings") may be mapped to SVG icons by the panel implementation and rendered via iconUrl. Values starting with "pi " are treated as PrimeIcons identifiers, but currently used only as a text source for the letter avatar. Any other string (including "icon icon--*") is treated as plain text; the avatar shows the first character of this string. Examples "icon icon--task" // toolbar button with built-in BPMN icon "icon icon--user" // toolbar button with user icon "pi pi-check-circle" // toolbar button with PrimeIcon; letter avatar on card "clock-settings" // app-specific key mapped to an SVG icon