bpmnjs如何在xml存储表单数据json（扩展属性ExtensionElements）

bpmnjs是通过xml来存储数据的，所有右侧属性栏的读写交互全部都是通过xml里面的数据，xml存储单个普通属性数据的表现形式非常简单，比如在用户任务节点上存储name值、flowable前缀的键值：

<bpmn:UserTask name="用户任务节点" flowable:assignee="user_id审批人"></bpmn:UserTask>

这里name属性一般都是<bpmn:UserTask />节点自带的描述属性，flowable:assignee这些自定义属性也是可以通过this.modeling.updateProperties(element, {key:value})直接添加，但是如果我们要存储复杂的数组json数据，就需要用扩展属性来做了，用户任务节点的xml表现如下(flowable前缀)：

<bpmn:UserTask name="用户任务节点" flowable:assignee="user_id审批人">
    <bpmn:ExtensionElements>
        <flowable:Properties>
            <flowable:Formright name="表单权限数据">[{label:'张三',value:'userId590'},{label:'李四',value:'userId790'}]</flowable:Formright>
        </flowable:Properties>
    </bpmn:ExtensionElements>
</bpmn:UserTask>

扩展属性ExtensionElements下面的自定义标签都需要在描述器里进行定义，参考如下：

{
  "name": "Flowable",
  "uri": "http://flowable.org/bpmn",
  "prefix": "flowable",
  "xml": {
      "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
  {
      "name": "UserTask",
      "isAbstract": true,
      "extends": [
          "bpmn:UserTask",
          "bpmn:MultiInstanceLoopCharacteristics"
      ],
      "properties": [ {
          "name": "timerEventDefinition",
          "type": "Expression"
          },{
          "name": "multiInstanceLoopCharacteristics",
          "type": "MultiInstanceLoopCharacteristics"
      }]
  },
  {
      "name": "StartEvent",
      "isAbstract": true,
      "extends": [
          "bpmn:StartEvent"
      ],
      "properties": [
          {
              "name": "timerEventDefinition",
              "type": "Expression"
          }
      ]
  },
  {
      "name":"Properties",
      "isAbstract": true,
      "extends":[],
      "superClass":["Element"],
      "meta":{
          "allowedIn":["*"]
      },
      "properties":[
      {
          "name":"values",
          "isMany":true,
          "isbody":true,
          "type":"Formright"
      }
      ]
  },
  {
      "name":"Formright",
      "isAbstract": true,
      "extends":[
          "flowable:Exec_before",
          "flowable:Exec_after"
      ],
      "superClass":["Element"],
      "meta":{
          "allowedIn":["*"]
      },
      "properties":[
      {
          "name":"values",
          "isAttr":true,
          "type":"String"
      },
      {
          "name": "body",
          "isBody": true,
          "type": "String"
      }
      ]
  }
  ]
}

属性基本含义解读：
prefix：自定义属性的指定前缀(flowable/activiti/camunda)；
uri: 命名空间（只需定义，不要求能打开）；
types：自定义标签类型数组

• name：自定义标签的名称，一般首字母大写，具有唯一性（e.g：Formdata），在xml中显示为 flowable:Formdata；
• isAbstract：true | 是否支持复杂类型；
• extends：[] | 当前标签可以在这些标签里使用；
• superClass：[] | 继承基础类的属性；
• properties：[] | 存放标签属性的数组；
• • name：xxx | 属性名；
• • type：String|Boolean|expression|Formright… | 属性值类型，可以为任意基础类型以及其他已定义的标签类型
• • isAttr：true | 是否允许设置为标签行内属性(e.g <flowable:Formdata xxx="abc"></flowable:Formdata>)
• • isBody：false | 是否允许设置为标签子节点(e.g<flowable:Formdata>xxx</flowable:Formdata>)
• • isMany：true | 是否支持存放数组，设置时可以传数组updateProperties()赋值；(xml上表现为：e.g <flowable:Formdata xxx="1,2,3"></flowable:Formdata>)，element.businessObject.$attr.xxx取值时为[1,2,3]

应用过程中知道这些就学会了定义简单的自定义扩展标签，并且把数据“合法地”放在想放的位置；
写好描述文件之后如何进行表单数据的创建写入xml可以看这里：

bpmnjs如何创建ExtensionElements扩展属性与多实例MultiInstanceLoopCharacteristics

就写这么多，去试试先吧。

引导：

关于bpmnjs+vue的更多篇章，小编已经全部整理在这里：
bpmnjs+vue中文文档API常见方法使用总结