可视化流程编排(Bpmn.js)介绍及实践

news2024/11/24 15:20:32

作者:罗强

为将内部系统打通并规范流程定义,基于统一的平台实现工单自动化流转,从而使用无界山工单系统帮助公司内部人员统一管理和处理来自企业内部提交的工单需求。而在系统中流程编排及节点设计主要是使用bpmn.js实现精细化配置。从而满足各种复杂的业务需求。目前无界山工单平台对接40+流程,实现IT类工单、消保审核流程的上线运行、同时与各事业部就健康险台账流程、无界山2.0理赔流程、数生理赔特殊案件审核等相关保险业务流程进行了对接。

BPMN 简介

由BPMI(The Business Process Management Initiative)开发了一套标准叫业务流程建模符号(BPMN - Business Process Modeling Notation)。在 BPMI Notation Working Group超过2年的努力,于2004年5月对外发布了BPMN 1.0 规范。后BPMI并入到OMG组织,OMG于2011年推出BPMN2.0标准,对BPMN进行了重新定义(Business Process Model and Notation)。BPMN2.0 是一种标准化的图形表示法,旨在促进必须记录其流程的非技术业务用户与寻求使用业务执行语言实现流程的开发人员之间的通信。

Bpmn.js由 Camunda 团队研发的一个 BPMN 2.0渲染工具包和web建模器。使得可以在浏览器中创建、嵌入和扩展 BPMN 图。单独使用或将其集成到web应用中。创建bpmn

Bpmn.js 内部依赖

bpmn.js 内部依赖于 bpmn-moddle (浏览器中对BPMN 2.0 XML的读/写支持) 和 diagram-js (图表渲染和编辑工具包)

diagram.js: 用于在web应用程序绘制图形和连线中显示和修改图表的工具库,为 bpmn.js 提供了基础的图形元素交互方法,以及覆盖物、工具栏、ContentPad等基础工具和撤销恢复的操作。

bpmn-moddle: BPMN 2.0 标准中定义的 BPMN 2.0 元模型。它允许我们读取和写入符合 BPMN 2.0 规范的 XML 文档,并访问图表上绘制的形状和连接背后的 BPMN 相关信息。

实例化

在开始使用bpmnjs时需先实例化

Bpmn.js 使用及扩展

EventBus 事件监听

很多时候我们需要监听用户的操作并给予相应的反馈,例如在bpmn-js中我们需要监听到流程的变化,并实时将数据补充到a标签中,用到了如下代码

常用事件类型:

  1. canvas.destroy
  2. canvas.init
  3. canvas.viewbox.changed
  4. canvas.viewbox.changing
  5. connect.end
  6. connection.added
  7. connection.changed
  8. connection.remove
  9. connection.removed
  10. ...

更多可以参考官网demo

节点获取

修改节点

通过modeling的updateProperties方法可以修改节点属性,例如这里修改节点name为ops-coffee.cn

更多Modeling Api可点查看

添加自定义注释

用于在 BPMN 模型中添加注释和自定义操作。BPMN Annotate 允许用户在 BPMN 模型中添加注释,包括自定义文本、标记和元数据。这些注释可以帮助用户更好地理解模型,并提供额外的业务信息或指示。BPMN Embed 允许用户将自定义操作嵌入到 BPMN 模型中,例如添加额外的业务逻辑、条件或指令。这些操作可以在业务流程执行期间进行访问和执行,以提高业务流程的可定制性和灵活性。

创建自定义Palette和ContextPad

你可以通过 BPMN 模型元素上添加新的属性或元素。例如,你可以为任务节点添加自定义的属性,如优先级、标签等。

完成了自定义Palette,那ContextPad与自定义Palette相差不大,下面链接中都有示例demo代码

Properties Panel 侧边属性面板

在选中任务节点时要配置更多的属性就需使用属性面板,属性面板扩展可通过 bpmn-js-properties-panel,添加了编辑基础属性(通用和 Camunda)的功能,默认导出一下 Module

  1. BpmnPropertiesPanelModule // 基础侧边栏渲染入口
  2. BpmnPropertiesProviderModule // 侧边栏属性编辑表单构造器
  3. CamundaPlatformPropertiesProviderModule  // Camunda平台执行相关的属性
  4. ZeebePropertiesProviderModule  // Camunda Cloud 执行相关属性

 在 bpmn-js-properties-Panel 的 1.x 版本进行了颠覆性的更新,不仅重写了 UI 界面,1.x 版本之前的部分 API 和属性编辑栏构造函数都进行了重写,并将属性栏 DOM 构建与更新方式改写为 React JSX Hooks 与 Components 的形式,迁移到了 @bpmn-io/properties-panel 仓库中,使用时请需注意版本

引入侧边栏面板如下:

additionalModules 需要同时引入 BpmnPropertiesPanelModule 与 BpmnPropertiesProviderModule ,否则不能正常使用。完成上述则可以实现一个简单的配置面板

Camunda 属性面板

在我们使用时会发现基础可配置属性非常少,对于简单的业务都不一定满足,以 camunda 的团队针对自身的流程引擎对属性侧边栏进行了补充,且官方也针对 camunda 流程引擎开发了对应的 Properties Panel 插件(CamundaPlatformPropertiesProviderModule),主要用来编辑一些不能体现在可视界面上的特殊属性(也包含通用属性,类似 Id、name、documentation 等)。

示例:

这里与引入基础属性侧边栏相比,增加了一下几点配置项:

  1. additionalModules 增加 CamundaExtensionModule(扩展校验模块,用来校验复制粘贴、属性移除等) 和 CamundaPlatformPropertiesProviderModule(提供异步控制属性、监听器配置、扩展属性、条件配置等)
  2. moddleExtensions 配置属性 camunda: camundaModdleDescriptors,用来解析与识别 camunda 流程引擎配置的特殊业务属性以及属性关联格式等。
自定义属性面板

虽然官方提供了基础的属性设置和 camunda 属性编辑面板,但是基础属性对日常业务支持不足以及camunda 属性内部对更新和读取都与 camunda 流程引擎做了强关联,所以在没有使用 camunda 流程引擎的时候,如何去支持业务和拓展元素属性就成了必须要解决的问题,而对于这个问题,bpmn-io 官方也编写了一个示例项目properties-panel-extension

那我们接下来也对这块进行一个示例说明,在创建自定义的属性编辑面板之前,需要先定义相关的自定义属性,这里我们以 flowable 流程引擎对应的属性为例。

第一步:定义相关属性

我们对 StartEvent 节点进行了扩展,增加了 spell 属性。

第二步:创建属性对应的 PropertiesProviderModule

第三步:实现自定义属性栏分组与 Spell 属性编辑组件

第四步:引入自定义属性构造器 MagicPropertiesProvider

那最终的实现如下:

总结

bpmn-js基于BPMN标准实现的一套渲染工具包和web建模器,从而支持了网页端的配置也更加灵活,在开发过程中也需要和后端确认引擎的版本是否一致,以及 bpmn-js-properties-Panel 是否在1.x以上避免导致本地运行错误。diagram.js 的核心模块还提供了撤销,重做,缩放等丰富的api提供扩展。

参考:

Bpmn.js官网

Bpmn.js简介与基础使用

最好用的流程编辑器bpmn-js系列

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1164612.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MapStruct的用法

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、依赖导入二、简单使用2.1、定义转换的接口2.2、创建实体类2.3、测试2.4、底层实现 三、常用的注解3.1、Mapping(target "xxx1",source "x…

你还在用System.currentTimeMillis()打印代码执行时间?

文章目录 前言一、开发环境二、使用步骤1. 创建Springboot项目2. 引入hutool3. 使用TimeInterval 总结 前言 Hutool是一个小而全的Java工具类库,里面集成了很多实用的工具类,比如文件、流、加密解密、转码、正则、线程、XML等,通过这些工具类…

探索 Java 8 中的 Stream 流:构建流的多种方式

人嘛,要懂得避嫌… 开篇引入 Java 8引入了Stream流作为一项新的特性,它是用来处理集合数据的一种函数式编程方式。Stream流提供了一种更简洁、高效和易于理解的方法来操作集合数据,同时也能够实现并行处理,以提高性能。 以下是St…

在 GORM 中定义模型

为实现与数据库的无缝交互而打造有效模型的全面指南 在使用 GORM 进行数据库管理时,定义模型是基础。模型是您的应用程序的面向对象结构与数据库的关系世界之间的桥梁。本文深入探讨了在 GORM 中打造有效模型的艺术,探讨如何创建结构化的 Go 结构体&…

第十二章,集合类例题

例题1 package 例题;import java.util.*;public class 例题 {public static void main(String[] args) {// TODO Auto-generated method stub//实例化集合类对象Collection<String> list new ArrayList<>();//调用方法&#xff0c;向集合添加数据list.add("…

Java——java.time包使用方法详解

Java——time包使用方法详解 java.time 包是 Java 8 引入的新日期和时间 API&#xff08;JSR 310&#xff09;&#xff0c;用于替代旧的 java.util.Date 和 java.util.Calendar 类。它提供了一组全新的类来处理日期、时间、时间间隔、时区等&#xff0c;具有更好的设计和易用性…

什么是消息队列

什么是消息队列 消息队列是一种通信机制&#xff0c;用于在不同的应用程序或组件之间传递消息。它允许应用程序之间异步地发送和接收消息&#xff0c;而无需直接依赖彼此的可用性或性能。消息队列通常用于解耦不同组件&#xff0c;提高系统的可伸缩性和可维护性&#xff0c;以…

【Python入门一】Python及PyCharm安装教程

Python及PyCharm安装教程 1 Python简介1.1 Python下载及安装 2 PyCharm简介2.1 PyCharm下载及安装 参考 1 Python简介 Python是一种开源的高级编程语言&#xff0c;由Guido van Rossum于1991年创建。Python易于学习、阅读和编写&#xff0c;具有丰富的标准库和第三方模块&…

智慧校园管理云平台电子班牌系统源码,数据管理、信息发布、家校互通、物联控制、教务管理、日常办公、人脸识别

智慧校园平台源码 智慧校园云平台电子班牌系统源码 一款全功能智慧校园管理云平台电子班牌系统源码&#xff0c;融合了多媒体信息发布、家校互通、物联控制、教务管理、日常办公等一系列应用&#xff0c;是校园管理的现代手段。 电子班牌系统的主要功能包括&#xff1a;数据信…

电源管理(PMIC)MAX20428ATIA/VY、MAX20428ATIC/VY、MAX20428ATIE/VY适合汽车ADAS应用的开关稳压器

一、概述 MAX20428是一款高效率、八路输出、低压PMIC。OUT1将输入电源升压至5V&#xff0c;电流高达500mA&#xff0c;而三个同步降压转换器的输入电压范围为3.0V至4.2V&#xff0c;输出电压范围为0.8V至3.9875V&#xff0c;峰值电流分别高达1.3A、1.3A和3.5A。三个300mA pMOS…

c++实现建造者模式

代码 director.h #pragma once #include<vector> #include<string> #include<iostream>class Product { private:std::vector<std::string> _parts;public:void Add(const std::string& part) {_parts.push_back(part);}void show(){std::cout &…

L1和L2正则化通俗理解

机器学习中&#xff0c;如果参数过多&#xff0c;模型过于复杂&#xff0c;容易造成过拟合&#xff08;overfit&#xff09;。即模型在训练样本数据上表现的很好&#xff0c;但在实际测试样本上表现的较差&#xff0c;不具备良好的泛化能力。为了避免过拟合&#xff0c;最常用的…

在Linux上通过NTLM认证连接到AD服务器(未完结)

这篇文章目前还没有实现具体的功能&#xff0c;只实现了明文登录&#xff0c;因为我缺少一些数据&#xff0c;比如通过密码生成hash&#xff0c;以及通过challenge生成response&#xff0c;我不知道怎么实现&#xff0c;因此这篇文章也是一个交流的文章&#xff0c;希望大佬看见…

Linux的test测试功能

测试文件名的类型&#xff0c;文件是否存在&#xff0c; 文件的权限检测 文件之间的比较 两个整数之间的比较 判断字符串数据 多重条件判定 一个一个来&#xff0c;这个有点多&#xff0c;不过比较有意思&#xff0c;来代码 案例1&#xff0c;判断文件是否存在&#xff…

VS Code提取扩展时出错。XHR failed

需求&#xff1a;想要在扩展中心下载插件&#xff0c;发现报错 原因&#xff1a;vs code之前设置了代理&#xff0c;需要删除即可

【LLM】大模型中的温度系数temperature是啥玩意||底层逻辑

【LLM】大模型中的温度系数是啥玩意_山顶夕景的博客-CSDN博客 大佬两句话就讲明白了&#xff0c;厉害~ 总结一下就是crossentropy里面引入t如下页ppt公式所示&#xff0c;t越大&#xff0c;每个词都有更大的概率被使用&#xff0c;也就体现出了多样性。

基于OR-Tools的装箱问题模型求解(PythonAPI)

装箱问题 一、背包问题&#xff08;Knapsack problem&#xff09;1.1 0-1背包模型基于OR-Tools的0-1背包问题求解&#xff08;PythonAPI&#xff09;导入pywraplp库数据准备声明MIP求解器初始化决策变量初始化约束条件目标函数调用求解器打印结果 1.2 多重背包问题&#xff08;…

74X138元件怎么找——错误解决方法

1.在做74X138的时候根据课本&#xff0c;无法在现有的库中找到74X138&#xff0c;搜索了老师发的库中&#xff0c;都是集成库打不开&#xff0c;那我该怎么办? 根据这个课本P343&#xff0c;&#xff08;即机械工业出版社&#xff0c;刘超&#xff0c;包建荣&#xff0c;俞优姝…

深入理解TCP协议

深入理解TCP 1.TCP基础概念了解 1.1简介 TCP&#xff08;Transmission Control Protocol&#xff09;是一种计算机网络协议&#xff0c;用于在网络上可靠地传输数据。它确保数据的完整性、顺序性和可靠性&#xff0c;通过建立连接、数据分段、错误检测和恢复机制&#xff0c…

什么是DNS

什么是DNS 概述 域名系统&#xff08;英语&#xff1a;Domain Name System&#xff0c;缩写&#xff1a;DNS&#xff09;是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便地访问互联网**。DNS使用[TCP和UDP端口53。当前&#…