一、创建属性描述propertyPackage
在项目flowable-ui-modeler-app中找到stencilset/stencilset_bpmn.json文件
propertyPackages属性中增加扩展属性定义
{
"name" : "myPropertypackage",
"properties" : [ {
"id" : "myproperty",
"type" : "mypropertytype",
"title" : "扩展属性(DreRule)",
"value" : "",
"description" : "扩展属性描述信息",
"popular" : true
} ]
}
id:自定义的属性id
type:指向自定义的类型
二、实现自定义类型
1-追加自定义类型的注册信息
找到文件resources/static/editor-app/configuration/properties.js
在文件中追加自定义类型的注册信息
"flowable-mypropertytype": {
"readModeTemplateUrl": "editor-app/configuration/properties/mypropertytype-properties-display-template.html",
"writeModeTemplateUrl": "editor-app/configuration/properties/mypropertytype-properties-write-template.html"
},
注意:此处的属性名称“flowable-mypropertytype”,是约定好的书写格式,是定义的propertyPackage的id加前缀flowable,不能随意修改,不然将无法找到相关的信息
readModeTemplateUrl:定义显示属性内容的模板
writeModeTemplateUrl:定义编辑属性内容的模板
flowable本身已经创建了许多类型的模板,可以参考**-template.html相关的文件
2-增加模板信息
增加模板文件
mypropertytype-properties-display-template.html
mypropertytype-properties-write-template.html
3-实现自定义解析类
增加js实现,创建文件properties-mypropertytype-properties-controller.js
结构可以参考其他相关属性实现,一般为**-properties-controller.js
4-导入自定义解析类
在index.html引入扩展的属性
<script src="editor-app/configuration/properties-mypropertytype-properties-controller.js" type="text/javascript"></script>
三、在节点类型中应用
{
"type" : "node",
"id" : "UserTask",
"title" : "\u7528\u6237\u4efb\u52a1",
"description" : "\u4efb\u52a1\u624b\u52a8\u5206\u914d\u7ed9\u4e00\u4e2a\u7279\u5b9a\u7684\u4eba",
"view" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:svg=\"http://www.w3.org/2000/svg\"\n xmlns:oryx=\"http://www.b3mn.org/oryx\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\n width=\"102\"\n height=\"82\"\n version=\"1.0\">\n <defs></defs>\n <oryx:magnets>\n \t<oryx:magnet oryx:cx=\"1\" oryx:cy=\"20\" oryx:anchors=\"left\" />\n \t<oryx:magnet oryx:cx=\"1\" oryx:cy=\"40\" oryx:anchors=\"left\" />\n \t<oryx:magnet oryx:cx=\"1\" oryx:cy=\"60\" oryx:anchors=\"left\" />\n \t\n \t<oryx:magnet oryx:cx=\"25\" oryx:cy=\"79\" oryx:anchors=\"bottom\" />\n \t<oryx:magnet oryx:cx=\"50\" oryx:cy=\"79\" oryx:anchors=\"bottom\" />\n \t<oryx:magnet oryx:cx=\"75\" oryx:cy=\"79\" oryx:anchors=\"bottom\" />\n \t\n \t<oryx:magnet oryx:cx=\"99\" oryx:cy=\"20\" oryx:anchors=\"right\" />\n \t<oryx:magnet oryx:cx=\"99\" oryx:cy=\"40\" oryx:anchors=\"right\" />\n \t<oryx:magnet oryx:cx=\"99\" oryx:cy=\"60\" oryx:anchors=\"right\" />\n \t\n \t<oryx:magnet oryx:cx=\"25\" oryx:cy=\"1\" oryx:anchors=\"top\" />\n \t<oryx:magnet oryx:cx=\"50\" oryx:cy=\"1\" oryx:anchors=\"top\" />\n \t<oryx:magnet oryx:cx=\"75\" oryx:cy=\"1\" oryx:anchors=\"top\" />\n \t\n \t<oryx:magnet oryx:cx=\"50\" oryx:cy=\"40\" oryx:default=\"yes\" />\n </oryx:magnets>\n <g pointer-events=\"fill\" oryx:minimumSize=\"50 40\">\n\t<rect id=\"text_frame\" oryx:anchors=\"bottom top right left\" x=\"1\" y=\"1\" width=\"94\" height=\"79\" rx=\"10\" ry=\"10\" stroke=\"none\" stroke-width=\"0\" fill=\"none\" />\n\t<rect id=\"bg_frame\" oryx:resize=\"vertical horizontal\" x=\"0\" y=\"0\" width=\"100\" height=\"80\" rx=\"10\" ry=\"10\" stroke=\"#bbbbbb\" stroke-width=\"1\" fill=\"#f2f6fc\" />\n\t\t<text \n\t\t\tfont-size=\"12\" \n\t\t\tid=\"text_name\" \n\t\t\tx=\"50\" \n\t\t\ty=\"40\" \n\t\t\toryx:align=\"middle center\"\n\t\t\toryx:fittoelem=\"text_frame\"\n\t\t\tstroke=\"#373e48\">\n\t\t</text>\n\t\n\t<g id=\"userTask\" transform=\"translate(3,3)\">\n\t\t<path oryx:anchors=\"top left\"\n \t\tstyle=\"fill:#1980FF;stroke:none;\"\n \t\t d=\"m 1,17 16,0 0,-1.7778 -5.333332,-3.5555 0,-1.7778 c 1.244444,0 1.244444,-2.3111 1.244444,-2.3111 l 0,-3.0222 C 12.555557,0.8221 9.0000001,1.0001 9.0000001,1.0001 c 0,0 -3.5555556,-0.178 -3.9111111,3.5555 l 0,3.0222 c 0,0 0,2.3111 1.2444443,2.3111 l 0,1.7778 L 1,15.2222 1,17 17,17\" \n />\n\t\t\n\t</g>\n \n\t<g id=\"parallel\">\n\t\t<path oryx:anchors=\"bottom\" fill=\"none\" stroke=\"#bbbbbb\" d=\"M46 70 v8 M50 70 v8 M54 70 v8\" stroke-width=\"2\" />\n\t</g>\n\t\n\t<g id=\"sequential\">\n\t\t<path oryx:anchors=\"bottom\" fill=\"none\" stroke=\"#bbbbbb\" stroke-width=\"2\" d=\"M46,76h10M46,72h10 M46,68h10\"/>\n\t</g>\n\t\n\n\t<g id=\"compensation\">\n\t\t<path oryx:anchors=\"bottom\" fill=\"none\" stroke=\"#bbbbbb\" d=\"M 62 74 L 66 70 L 66 78 L 62 74 L 62 70 L 58 74 L 62 78 L 62 74\" stroke-width=\"1\" />\n\t</g>\n </g>\n</svg>",
"icon" : "activity/list/type.user.png",
"groups" : [ "\u4efb\u52a1" ],
"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", "skipexpressionpackage","nodetypepackage","editdatapackage" ,"mypeopertypackage"],
"hiddenPropertyPackages" : [ ],
"roles" : [ "Activity", "sequence_start", "sequence_end", "ActivitiesMorph", "all" ]
}
在用户任务节点中增加mypeopertypackage
注意事项
有两种方式配置扩展属性
1-前缀是 “flowable-”
"flowable-drerule": {
"readModeTemplateUrl": "editor-app/configuration/properties/drerule-properties-display-template.html",
"writeModeTemplateUrl": "editor-app/configuration/properties/drerule-properties-write-template.html"
},
对应属性设置
{
"name" : "drerulepackage",
"properties" : [ {
"id" : "drerule",
"type" : "flowable-drerule",
"title" : "规则(DreRule)",
"value" : "",
"description" : "Dre规则引擎中的规则",
"popular" : true
} ]
}
2-前缀是 “oryx-”
"oryx-tasklisteners-multiplecomplex": {
"readModeTemplateUrl": "editor-app/configuration/properties/task-listeners-display-template.html",
"writeModeTemplateUrl": "editor-app/configuration/properties/task-listeners-write-template.html"
},
对应属性设置
{
"name" : "tasklistenerspackage",
"properties" : [ {
"id" : "tasklisteners",
"type" : "multiplecomplex",
"title" : "\u4efb\u52a1\u76d1\u542c",
"value" : "",
"description" : "\u76d1\u542c\u7528\u6237\u4efb\u52a1",
"popular" : true
} ]
},
三、实现接口UserTaskJsonConverter输出自定义的扩展属性
public class CustomizeUserTaskJsonConverter extends UserTaskJsonConverter {
/**
* 标记
*/
private static final String TAG_PATH = "tag";
private static final String TAG_PATH_KEY = "tag";
public static void fillBpmnTypes(
Map<Class<? extends BaseElement>, Class<? extends BaseBpmnJsonConverter>> convertersToJsonMap) {
convertersToJsonMap.put(UserTask.class, CustomizeUserTaskJsonConverter.class);
}
@Override
protected FlowElement convertJsonToElement(JsonNode elementNode, JsonNode modelNode,
Map<String, JsonNode> shapeMap) {
FlowElement flowElement = super.convertJsonToElement(elementNode, modelNode, shapeMap);
if (flowElement instanceof UserTask) {
ObjectMapper objectMapper = new ObjectMapper();
UserTask userTask = (UserTask) flowElement;
Map<String, List<ExtensionAttribute>> atts = new HashMap<String, List<ExtensionAttribute>>();
List<ExtensionAttribute> list = new ArrayList<>();
ExtensionAttribute ea = getExtensionAttribute(TAG_PATH, elementNode);
if (ea != null) {
userTask.addAttribute(ea);
}
}
return flowElement;
}
/**
*
* getExtensionAttribute(创建扩展属性)
*
* @Title: getExtensionAttribute
* @Description: TODO
* @param propertyName
* @param elementNode
* @return 设定文件
* @return ExtensionAttribute 返回类型
* @throws
* @date 2020年11月18日 上午11:42:25
*/
protected ExtensionElement getExtensionElement(String propertyName, JsonNode elementNode) {
ExtensionElement extensionElement = null;
String tagPath = getPropertyValueAsString(TAG_PATH, elementNode);
if (null != tagPath) {
LOGGER.info("新增自定义Tag属性,属性[" + TAG_PATH + "]=" + tagPath);
extensionElement = ExtensionElementUtils.generate(TAG_PATH_KEY, tagPath);
}
return extensionElement;
}
/**
*
* getExtensionAttribute(获取扩展属性)
*
* @Title getExtensionAttribute
* @Description 获取扩展属性
* @param propertyName 属性名称
* @param elementNode 节点
* @return ExtensionAttribute
* @throws
* @date 2020年12月18日 下午3:37:31
*/
protected ExtensionAttribute getExtensionAttribute(String propertyName, JsonNode elementNode) {
ExtensionAttribute extensionAttribute = null;
LOGGER.info("进入自定义属性解析>>" + propertyName);
String tagPath = getPropertyValueAsString(TAG_PATH, elementNode);
if (null != tagPath) {
LOGGER.info("新增自定义驳回接口路径;路径属性[" + TAG_PATH + "]=" + tagPath);
extensionAttribute = ExtensionAttributeUtils.generate(TAG_PATH_KEY, tagPath);
}
return extensionAttribute;
}
}
网友评论