对 bpmn 属性面板的服务任务下的委托条目的更改未在 UI 上更新

Question

我正在尝试修改服务任务类型下“常规”选项卡的“详细信息”部分。

我想要什么？

我正在尝试实现当用户 selects 实现类型为 JavaClass 时我显示委托字段的下拉列表而不是文本框，在除 JavaClass 之外的任何其他 selection 上它应该是文本框。

稍后我想将动态数据加载到下拉列表中。

我尝试了什么？

我尝试了以下两种方式

1 : 编辑文件 camunda\parts\implementation\Delegate.js 以增加一个存储 entryFactory.selectBox 和类型 == class return 新创建的 select 框的变量在 module.exports else return 默认文本框。

module.exports = function(element, bpmnFactory, options) {

  var getImplementationType = options.getImplementationType,
      getBusinessObject     = options.getBusinessObject;

  var delegateEntrySelect = entryFactory.selectBox({
    id: 'delegate',
     label: 'Value',
    selectOptions: [
      {value:"one",name:"one"},{value:"two",name:"two"}
    ],
    modelProperty: 'delegate',
    emptyParameter: false,

    get: function(element, node) {
      var bo = getBusinessObject(element);
      var type = getImplementationType(element);
      var attr = getAttribute(type);
      var label = getDelegationLabel(type);
      return {
        delegate: bo.get(attr),
        delegationLabel: label
      };
    },

    set: function(element, values, node) {
      var bo = getBusinessObject(element);
      var prop = {};
      prop[attr] = values.delegate || '';
      return cmdHelper.updateBusinessObject(element, bo, prop);
    },

    validate: function(element, values, node) {
      return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
    }
  });   

  var delegateEntry = entryFactory.textField({
    id: 'delegate',
    label: 'Value',
    dataValueLabel: 'delegationLabel',
    modelProperty: 'delegate',

    get: function(element, node) {
      var bo = getBusinessObject(element);
      var type = getImplementationType(element);
      var attr = getAttribute(type);
      var label = getDelegationLabel(type);
      return {
        delegate: bo.get(attr),
        delegationLabel: label
      };
    },

    set: function(element, values, node) {
      var bo = getBusinessObject(element);
      var type = getImplementationType(element);
      var attr = getAttribute(type);
      var prop = {};
      prop[attr] = values.delegate || '';
      return cmdHelper.updateBusinessObject(element, bo, prop);
    },

    validate: function(element, values, node) {
      return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
    }
  });

  var eleTOReturn = (getImplementationType(element) && getImplementationType(element) == "class") ? delegateEntrySelect : delegateEntry
  console.log("returning ele",eleTOReturn)
  return [ eleTOReturn ];
};

我得到的输出是：

2 : 通过了 selectBox 和默认文本框，但在禁用状态下区分它们，例如 a : selectBox (!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type !== "class"))

b : textBox (!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type === "class"))

在这两种情况下，JS 代码都执行得很好，在 camunda\parts\serviceTaskDelegateProps.js 行#60 内的 group.entries 变量下可以看到相同的情况，但它们不会反映在 UI 上。

Delegate.js代码如下

module.exports = function(element, bpmnFactory, options) {

var getImplementationType = options.getImplementationType,
  getBusinessObject     = options.getBusinessObject;

var delegateEntrySelect = entryFactory.selectBox({
id: 'delegate',
 label: 'Value',
selectOptions: [
  {value:"one",name:"one"},{value:"two",name:"two"}
],
modelProperty: 'delegate',
emptyParameter: false,

get: function(element, node) {
  var bo = getBusinessObject(element);
  var type = getImplementationType(element);
  var attr = getAttribute(type);
  var label = getDelegationLabel(type);
  return {
    delegate: bo.get(attr),
    delegationLabel: label
  };
},

set: function(element, values, node) {
  var bo = getBusinessObject(element);
  var prop = {};
  prop[attr] = values.delegate || '';
  return cmdHelper.updateBusinessObject(element, bo, prop);
},

validate: function(element, values, node) {
  return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
},

disabled: function(element, node) {
  var type = getImplementationType(element);
  console.log("SELECT DISABLE",(!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type !== "class")))
  return (!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type !== "class"));
}
});   

var delegateEntry = entryFactory.textField({
id: 'delegate',
label: 'Value',
dataValueLabel: 'delegationLabel',
modelProperty: 'delegate',

get: function(element, node) {
  var bo = getBusinessObject(element);
  var type = getImplementationType(element);
  var attr = getAttribute(type);
  var label = getDelegationLabel(type);
  return {
    delegate: bo.get(attr),
    delegationLabel: label
  };
},

set: function(element, values, node) {
  var bo = getBusinessObject(element);
  var type = getImplementationType(element);
  var attr = getAttribute(type);
  var prop = {};
  prop[attr] = values.delegate || '';
  return cmdHelper.updateBusinessObject(element, bo, prop);
},

validate: function(element, values, node) {
  return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
},

disabled: function(element, node) {
  var type = getImplementationType(element);
  console.log("TEXT DISABLE",(!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type === "class")))
  return (!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type === "class")); 
}  
});

 return [ delegateEntrySelect, delegateEntry ];
};

我得到的输出是

有人可以帮我吗。

谢谢

Answer 1

通过为 Select 框添加一个不同的文件解决它作为 delegateSelect.js 与 delegate.js 相邻，然后在 serviceTaskDelegateProps.js 中将其注册为

group.entries = group.entries.concat(delegateSelect(element, bpmnFactory, {
    getBusinessObject: getBusinessObject,
    getImplementationType: getImplementationType,
    hideDelegateSelect: function(element, node) {
      console.log(getImplementationType(element) !== 'class',"SELECT")
      return getImplementationType(element) !== 'class';
    }
   }));

  group.entries = group.entries.concat(delegate(element, bpmnFactory, {
    getBusinessObject: getBusinessObject,
    getImplementationType: getImplementationType,
    hideDelegateText: function(element, node) {
      console.log(getImplementationType(element) === 'class',"TEXT")
      return getImplementationType(element) === 'class';
    }
  }));

并在各自的代表和代表中Select 将残疾人作为

处理

 disabled: function(element, node) {
      if (typeof hideDelegateText === 'function') {
        return hideDelegateText.apply(delegateEntry, arguments);
      }
    }

disabled: function(element, node) {
      if (typeof hideDelegateSelect === 'function') {
        return hideDelegateSelect.apply(delegateEntrySelect, arguments);
      }
    }

我参考了 ResultVariable.js 文件来找到这个解决方案

要查看详细信息，请访问 Camunda-blog 谢谢

对 bpmn 属性面板的服务任务下的委托条目的更改未在 UI 上更新

Changes to Delegate entries under servive Task for bpmn properties panel not getting updated on UI

javascript

workflow

camunda

bpmn.io