flowable 设置自定义属性教程

概述

由于工作需要给flowable工作流设计器添加自定义属性，以满足功能实现。所以这篇文章介绍下用flowable 开源的的flowable-ui 前端添加自定义属性，后端解析属性值的例子。

技术栈

序号	技术点名称	版本
1	Flowable	6.8.0

使用的是flowable6.8.0 版的代码

GitHub - flowable/flowable-engine at flowable-release-6.8.0https://github.com/flowable/flowable-engine/tree/flowable-release-6.8.0然后依照下面链接启动flowable-ui项目

手把手教大家编译 flowable 源码-腾讯云开发者社区-腾讯云松哥最近正在录制 TienChin 项目视频～采用 Spring Boot+Vue3 技术栈，里边会涉及到各种好玩的技术，小伙伴们来和松哥一起做一个完成率超 90% 的项目，戳戳戳这里-->TienChin 项目配套视频来啦。----要说这个编译源码其实没什么技术含量，但是由于国内的网络问题，Spring 等各种常...https://cloud.tencent.com/developer/article/2108059

添加flowable-ui前端属性

添加boolean 属性

找到flowable-engine-flowable-6.8.0\modules\flowable-ui\flowable-ui-modeler-logic\src\main\resources\stencilset_bpmn.json 路径文件这个json 就是设计器的所有内容，

\flowable-engine-flowable-6.8.0\modules\flowable-ui\flowable-ui-modeler-frontend\src\main\resources\static\modeler\i18n\zh-CN.json 文件是汉化文件

下面是stencilset_bpmn.json 的文件格式：

{"title": "BPMN 2.0标准工具","namespace": "http://b3mn.org/stencilset/bpmn2.0#","description": "BPMN process editor","propertyPackages": [{"name": "overrideidpackage","properties": [{"id": "overrideid","type": "String","title": "Id","value": "","description": "元素的唯一标识.","popular": true}]}, {"name": "namepackage","properties": [{"id": "name","type": "String","title": "名称","value": "","description": "BPMN元素的描述名称.","popular": true,"refToView": "text_name"}]}],"stencils": [{"type": "node","id": "UserTask","title": "用户活动","description": "分配给特定人的任务 ","view": "此处代码已省略，请查看本书配套资源内容","groups": ["活动列表"],"propertyPackages": ["overrideidpackage", "namepackage", "documentationpackage", "asynchronousdefinitionpackage", "exclusivedefinitionpackage", "executionlistenerspackage", "multiinstance_typepackage", "multiinstance_cardinalitypackage", "multiinstance_collectionpackage", "multiinstance_variablepackage", "multiinstance_conditionpackage", "isforcompensationpackage", "usertaskassignmentpackage", "formkeydefinitionpackage", "formreferencepackage", "duedatedefinitionpackage", "prioritydefinitionpackage", "formpropertiespackage", "tasklistenerspackage"],"hiddenPropertyPackages": [],"roles": ["Activity", "sequence_start", "sequence_end", "ActivitiesMorph", "all"]}]
}

从以上配置文件内容中可以看出，最顶层有五个元素：title,namespace,description,

propertyPackages和stencils，分别代表标题，命名空间，描述，属性集合，节点属性，其中

propertyPackages表示的是设计器下栏的各个属性。通过propertyPackages 可以设置属性的名称，样式，字段类型。

type 对应的是当前属性的类型，和flowable-engine-flowable-6.8.0\modules\flowable-ui\flowable-ui-modeler-frontend\src\main\resources\static\modeler\editor-app\configuration\properties.js

里面的内容一一对应

stencils.propertyPackages 的值可以表示哪些活动使用哪些属性。

第一步：添加允许催办属性

第二步：将允许催办属性添加到用户属性下

第三步：重启服务

就可以看到用户任务下有允许催办属性了。

添加下拉框样式属性

上面我们完成了通过设置type 为boolean，添加允许催办属性，那么string,text属性大家也都可以在properties.js 文件中看到，按需添加即可。

如果是添加下拉框属性，我们可以仿照多实例的下拉框属性实现。

第一步：在stencilset_bpmn.json 文件的propertyPackages 下添加下拉属性的内容

,{"name" : "usertaskovertimehandlertypepackage","properties" : [{"id" :"overtimehandlertype","type" : "fd-overtimehandlertype","title" : "逾期处理方式","value" : "0","description" : "逾期处理方式","popular" : true}]}

注意id 和type ，我们去properties.js 文件下添加该类

第二步：在properties.js 文件下添加类型

注意1：properties.js 文件下的自定义名称为: oryx-上面的id-上面的type

注意2：不要用驼峰格式命名。

第三步：定义html

这些步骤我都是抄多实例怎么实现的。

下面是html 的下拉框格式，ng-controller 是用的angular.js 语言下面红框里的内容我们自己定义

第四步：定义js 文件

在 flowable-engine-flowable-6.8.0\modules\flowable-ui\flowable-ui-modeler-frontend\src\main\resources\static\modeler\index.html 文件下设置自定义的js路径

下面图片是js的内容，注意除默认值外其他两个字段需要和第二步html 里的值保持一致。

第五步：重启服务

重启服务就可以看到flowable-ui 界面上出现下拉框的属性了。如果是其他样式的属性，可以借鉴flowable-ui 中相同的样式是如何实现的。

后端添加自定义属性解析处理类

第一步：定义UserTaskJsonConverter实现类

package org.flowable.ui.application.converter;import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.node.ObjectNode;
import org.flowable.bpmn.constants.BpmnXMLConstants;
import org.flowable.bpmn.model.*;
import org.flowable.editor.language.json.converter.BaseBpmnJsonConverter;
import org.flowable.editor.language.json.converter.BpmnJsonConverterContext;
import org.flowable.editor.language.json.converter.UserTaskJsonConverter;import java.util.List;
import java.util.Map;/*** @author admin*/
public class CustomUserTaskJsonConverter extends UserTaskJsonConverter {/***  用户任务类型*/public static final String ACTIVE_TYPE = "activetype";/***  允许撤回*/public static final String ALLOW_RECALL = "allowrecall";/***  允许终止*/public static final String ALLOW_STOP = "allowstop";/***  允许跳过*/public static final String ALLOW_SKIP = "allowskip";/***  允许修改下一个节点参与者*/public static final String ALLOW_UPDATE_NEXT_ONE = "allowupdatenextone";/***  允许修改后续节点参与者*/public static final String ALLOW_UPDATE_NEXT_ALL = "allowupdatenextall";/***  允许上传附件*/public static final String ALLOW_UPLOAD = "allowupload";/***  工作期限（单位:天）*/public static final String LIMIT_TIME = "limittime";/***  逾期处理方式*/public static final String OVER_TIME_HANDLER_TYPE = "overtimehandlertype";/***  预警提醒（逾期前天数）*/public static final String OVER_TIME_WARN_TIME = "overtimewarntime";/***  预警提醒（逾期前天数）*/public static final String CIRCULATION_WARN_TIME = "circulationwarntime";@Overrideprotected void convertElementToJson(ObjectNode propertiesNode, BaseElement baseElement, BpmnJsonConverterContext converterContext) {super.convertElementToJson(propertiesNode, baseElement, converterContext);UserTask userTask = (UserTask) baseElement;//解析Map<String, List<ExtensionElement>> extensionElements = userTask.getExtensionElements();if(extensionElements != null && extensionElements.containsKey(ACTIVE_TYPE)){ExtensionElement e = extensionElements.get(ACTIVE_TYPE).get(0);setPropertyValue(ACTIVE_TYPE, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(ALLOW_RECALL)){ExtensionElement e = extensionElements.get(ALLOW_RECALL).get(0);setPropertyValue(ALLOW_RECALL, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(ALLOW_STOP)){ExtensionElement e = extensionElements.get(ALLOW_STOP).get(0);setPropertyValue(ALLOW_STOP, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(ALLOW_SKIP)){ExtensionElement e = extensionElements.get(ALLOW_SKIP).get(0);setPropertyValue(ALLOW_SKIP, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(ALLOW_UPDATE_NEXT_ONE)){ExtensionElement e = extensionElements.get(ALLOW_UPDATE_NEXT_ONE).get(0);setPropertyValue(ALLOW_UPDATE_NEXT_ONE, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(ALLOW_UPDATE_NEXT_ALL)){ExtensionElement e = extensionElements.get(ALLOW_UPDATE_NEXT_ALL).get(0);setPropertyValue(ALLOW_UPDATE_NEXT_ALL, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(ALLOW_UPLOAD)){ExtensionElement e = extensionElements.get(ALLOW_UPLOAD).get(0);setPropertyValue(ALLOW_UPLOAD, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(LIMIT_TIME)){ExtensionElement e = extensionElements.get(LIMIT_TIME).get(0);setPropertyValue(LIMIT_TIME, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(OVER_TIME_HANDLER_TYPE)){ExtensionElement e = extensionElements.get(OVER_TIME_HANDLER_TYPE).get(0);setPropertyValue(OVER_TIME_HANDLER_TYPE, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(OVER_TIME_WARN_TIME)){ExtensionElement e = extensionElements.get(OVER_TIME_WARN_TIME).get(0);setPropertyValue(OVER_TIME_WARN_TIME, e.getElementText(), propertiesNode);}if(extensionElements != null && extensionElements.containsKey(CIRCULATION_WARN_TIME)){ExtensionElement e = extensionElements.get(CIRCULATION_WARN_TIME).get(0);setPropertyValue(CIRCULATION_WARN_TIME, e.getElementText(), propertiesNode);}}@Overrideprotected FlowElement convertJsonToElement(JsonNode elementNode, JsonNode modelNode, Map<String, JsonNode> shapeMap, BpmnJsonConverterContext converterContext) {FlowElement flowElement = super.convertJsonToElement(elementNode, modelNode, shapeMap, converterContext);UserTask userTask = (UserTask) flowElement;//解析自定义扩展属性this.addExtansionPropertiesElement(userTask,elementNode,ACTIVE_TYPE);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_RECALL);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_STOP);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_SKIP);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_UPDATE_NEXT_ONE);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_UPDATE_NEXT_ALL);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_UPLOAD);this.addExtansionPropertiesElement(userTask,elementNode,LIMIT_TIME);this.addExtansionPropertiesElement(userTask,elementNode,OVER_TIME_HANDLER_TYPE);this.addExtansionPropertiesElement(userTask,elementNode,OVER_TIME_WARN_TIME);this.addExtansionPropertiesElement(userTask,elementNode,CIRCULATION_WARN_TIME);return userTask;}private void addExtansionPropertiesElement(UserTask userTask,  JsonNode elementNode, String name) {ExtensionElement extensionElement = new ExtensionElement();extensionElement.setName(name);//BpmnXMLConstants.FLOWABLE_EXTENSIONS_PREFIXextensionElement.setNamespacePrefix("model");extensionElement.setNamespace(BpmnXMLConstants.FLOWABLE_EXTENSIONS_NAMESPACE);String customProperties = getPropertyValueAsString(name, elementNode);extensionElement.setElementText(customProperties);userTask.addExtensionElement(extensionElement);}public static void fillTypes(Map<String, Class<? extends BaseBpmnJsonConverter>>convertersToBpmnMap, Map<Class<? extends BaseElement>, Class<? extendsBaseBpmnJsonConverter>> convertersToJsonMap) {fillJsonTypes(convertersToBpmnMap);fillBpmnTypes(convertersToJsonMap);}public static void fillJsonTypes(Map<String, Class<? extends BaseBpmnJsonConverter>>convertersToBpmnMap) {convertersToBpmnMap.put(STENCIL_TASK_USER, CustomUserTaskJsonConverter.class);}public static void fillBpmnTypes(Map<Class<? extends BaseElement>, Class<? extendsBaseBpmnJsonConverter>> convertersToJsonMap) {convertersToJsonMap.put(UserTask.class, CustomUserTaskJsonConverter.class);}}

第二步：定义BpmnJsonConverter实现类

package org.flowable.ui.application.converter;import org.flowable.editor.language.json.converter.BpmnJsonConverter;/*** @author admin*/public class CustomBpmnJsonConverter extends BpmnJsonConverter {static {//这里可以加入所有自定义的属性内容convertersToBpmnMap.put(STENCIL_TASK_USER, CustomUserTaskJsonConverter.class);}}

第三步：解析json 转成Bpmn

package org.flowable.ui.application;import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.extern.slf4j.Slf4j;
import org.flowable.bpmn.converter.BpmnXMLConverter;
import org.flowable.bpmn.model.BpmnModel;
import org.flowable.bpmn.model.ExtensionElement;
import org.flowable.bpmn.model.FlowElement;
import org.flowable.bpmn.model.Process;
import org.flowable.bpmn.model.UserTask;
import org.flowable.editor.language.json.converter.BpmnJsonConverter;
import org.flowable.editor.language.json.converter.util.CollectionUtils;
import org.flowable.ui.application.converter.CustomBpmnJsonConverter;
import org.junit.jupiter.api.Test;import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;@Slf4j
public class RunCustomJsonConverterDemo {@Testpublic void runCustomJsonConverterDemo() throws Exception {//读取Flowable Modeler保存的JsonInputStream processModelJsonInputStream =getClass().getClassLoader().getResourceAsStream("model-json/model.json");ObjectMapper mapper = new ObjectMapper();JsonNode processJsonNode = mapper.readTree(processModelJsonInputStream);//获取流程模型的Json//使用自定义转换类由Json转换为BpmnModel对象BpmnJsonConverter bpmnJsonConverter = new CustomBpmnJsonConverter();BpmnModel bpmnModel = bpmnJsonConverter.convertToBpmnModel(processJsonNode);Process mainProcess = bpmnModel.getMainProcess();UserTask userTask = (UserTask) mainProcess.getFlowElement("sid-DA2AB9F9-3CB2-40C5-945B-95B6DADFA1E1");//查询用户任务对象并打印属性Map<String, List<ExtensionElement>> extensionElements = userTask.getExtensionElements();List<ExtensionElement> allowurgingExtension = extensionElements.get("allowrecall");if (CollectionUtils.isNotEmpty(allowurgingExtension)) {log.info("扩展属性activetype值为：{}", allowurgingExtension.get(0).getElementText());}byte[] bpmnBytes = new BpmnXMLConverter().convertToXML(bpmnModel);// 转xmllog.info("bpmnBytes:"+new String(bpmnBytes));}
}

其中model.json 是flowable-ui点击保存传过来的