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

Javascript 未在UI上更新bpmn属性面板的服务任务下对委托项的更改,javascript,workflow,camunda,bpmn.io,Javascript,Workflow,Camunda,Bpmn.io,我正在尝试修改“常规”选项卡“类型服务任务”下的“详细信息”部分 我想要什么? 我试图实现,当用户选择实现类型为JavaClass时,我会显示一个代表字段的下拉列表,而不是一个文本框,在除JavaClass之外的任何其他选择上,它都应该是文本框 稍后,我想将动态数据加载到下拉列表中 我尝试了什么? 我尝试了以下两种方法 1:编辑文件以获取另一个存储entryFactory.selectBox的变量,并且在type==类上返回模块中新创建的选择框。否则返回默认文本框 module.exports

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

我想要什么?

我试图实现,当用户选择实现类型为JavaClass时,我会显示一个代表字段的下拉列表,而不是一个文本框,在除JavaClass之外的任何其他选择上,它都应该是文本框

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

我尝试了什么?

我尝试了以下两种方法

1:编辑文件以获取另一个存储entryFactory.selectBox的变量,并且在type==类上返回模块中新创建的选择框。否则返回默认文本框

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和default文本框,但在禁用条件下对其进行了区分,如 答:选择框(!isDelegate(getImplementationType(element))| |(isDelegate(getImplementationType(element))&&type!=“class”))

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

在这两种情况下,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 ];
};
我在输出中得到的是

有人能帮我吗


谢谢

通过在delegate.js旁边为选择框添加一个不同的文件delegateSelect.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';
    }
  }));
在各自的委派和委派中,选择将残疾人视为

 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);
      }
    }
我引用了该文件以获得此解决方案

有关详细视图,请访问 谢谢