如何在Kogito用户任务中添加自定义参与者与用户组

要实现用户任务的Actors和Groups列表自动填充，核心是通过扩展kie-tools的BPMN属性面板配置，替换默认的手动输入控件为带自定义数据源的下拉组件，以下是具体实现步骤：

1. 定位用户任务属性配置文件 #

kie-tools的BPMN编辑器属性面板配置通常位于@kie-tools/bpmn-editor包的src/editor/properties目录下，找到对应UserTask的属性定义文件（比如userTaskProperties.ts），里面包含了Actors、Groups字段的默认配置。

2. 替换默认输入控件为自定义数据源组件 #

默认情况下，Actors和Groups使用的是手动输入的多值文本控件，你需要将其替换为支持下拉选择的组件，并绑定自定义数据源。示例代码如下：

// 导入所需组件和类型
import { PropertyDefinition } from '@kie-tools/editor/dist/api';

// 自定义UserTask属性配置
export const customUserTaskProperties: PropertyDefinition[] = [
  // 其他属性保持不变，仅修改Actors和Groups
  {
    id: 'actors',
    label: 'Actors',
    component: 'DropdownList', // 替换为下拉列表组件
    type: 'string',
    isArray: true, // 支持多选
    options: async () => {
      // 这里实现你的数据源逻辑：可以从后端接口、本地缓存或预设列表获取
      // 示例：从后端获取用户列表
      const response = await fetch('/internal/api/actors');
      const actors = await response.json();
      return actors.map((actor: { id: string; name: string }) => ({
        label: actor.name,
        value: actor.id
      }));
    }
  },
  {
    id: 'groups',
    label: 'Groups',
    component: 'DropdownList',
    type: 'string',
    isArray: true,
    options: async () => {
      // 同理实现Groups的数据源逻辑
      const response = await fetch('/internal/api/groups');
      const groups = await response.json();
      return groups.map((group: { id: string; name: string }) => ({
        label: group.name,
        value: group.id
      }));
    }
  }
];

3. 注册自定义属性配置到编辑器 #

在初始化Kie BPMN编辑器时，通过propertiesProviders扩展点注入自定义的UserTask属性配置，覆盖默认配置：

import { createKieBpmnEditor } from '@kie-tools/bpmn-editor';
import { customUserTaskProperties } from './customUserTaskProperties';

const editor = createKieBpmnEditor({
  container: document.getElementById('editor-container'),
  propertiesProviders: [
    // 注册自定义属性提供者
    {
      get: (element) => {
        if (element.businessObject.$type === 'bpmn:UserTask') {
          return customUserTaskProperties;
        }
        return [];
      }
    }
  ]
});

4. 进阶：动态数据源与上下文适配 #

如果需要根据流程上下文（比如当前登录用户、流程变量）动态过滤列表，可以在options函数中加入上下文判断：

options: async () => {
  // 获取当前编辑器上下文信息
  const currentUser = await getCurrentUser();
  const response = await fetch(`/internal/api/actors?tenant=${currentUser.tenant}`);
  const actors = await response.json();
  return actors.map(actor => ({ label: actor.name, value: actor.id }));
}

注意事项 #

• 确保你的kie-tools版本与上述代码结构匹配，不同版本的目录和API可能略有差异；
• 如果自定义组件需要样式调整，可以通过覆盖kie-tools的CSS类实现；
• 若数据源需要缓存，可在options函数中加入缓存逻辑避免重复请求。

内容的提问来源于stack exchange，提问作者codeforHarman