Bpmn-js 属性控制

最新推荐文章于 2024-05-31 08:42:24 发布
最新推荐文章于 2024-05-31 08:42:24 发布
阅读量236 收藏
点赞数
分类专栏： Bpmn-js 流程建模器实战 文章标签： bpmn-js 流程编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chf1142152101/article/details/136145393
版权
本文介绍了如何使用Bpmn-js进行属性的读取和设置，包括通过图例引用获取属性值，了解内置元素和属性，并展示了设置属性的不同方法，强调了在需要撤销/重做支持时的操作方式。同时提供了一个官方测试示例的代码片段和生成的XML数据。
摘要由CSDN通过智能技术生成

我们可以通过bpmn-js来访问对应的BPMN图例的属性信息。对应的流程图中的每个图例元素（如开始、结束、中间/边界事件等都通过businessObject属性存储对基础BPMN元素的引用。业务对象是从BPMN 2.0 XML导入并在导出过程中序列化的实际元素。使用业务对象来读取和写入BPMN特定的属性。

属性读取

我们需要通过关系图的图例的引用来获取对应的属性值：

var elementRegistry = bpmnJS.get('elementRegistry');

var sequenceFlowElement = elementRegistry.get('SequenceFlow_1'),
    sequenceFlow = sequenceFlowElement.businessObject;

sequenceFlow.name; // 'YES'
sequenceFlow.conditionExpression; // ModdleElement { $type: 'bpmn:FormalExpression&#
了解本专栏 订阅专栏 解锁全文 超级会员免费看
胖蔡
关注
专栏目录
订阅专栏
bpmn-js-develop.zip
09-17
**API接口**：bpmn-js提供了一套API接口，允许开发者与BPMN模型进行交互，例如加载和保存模型、获取和修改元素属性、监听模型变化等。这些接口对于实现自定义的流程设计器功能至关重要。 **事件系统**：bpmn-js通过...
bpmn-js 扩展元素模型
最新发布
weixin_43359503的博客
06-26 1220
这里用一个例子来进行说明。在 bpmn-js 中，临时子流程具有一个属性，默认为 true，所以 xml 中会有如下情况：使用 bpmn-js 解析该流程得到的两个子流程对应 js 对象如下：此时可以看到虽然在 js 中我们可以获取到的实际值，但当其为 true 时无法显示到 xml 中。那么这个属性在 Json Schema 中的定义是怎么样的呢？"types": [省略了部分内容。其中可以看到isAttr为true，所以这个属性直接显示在标签上，默认值default为true。
Bpmn.js 中文文档(二)
热门推荐
weixin_43359503的博客
02-21 1万+
Bpmn.js 中文文档(二) 前言： 由于工作需要（其实不是很需要），在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer, 预览地址 MiyueFE blog, 欢迎 fork 和 star。 四. Modules 7. Modeling 基本建模方法 Diagram.js 提供的基础建模工厂 BaseModeling，注入了 EventBus, ElementFactory, CommandSta
bpmn-js 给sequenceFlow 添加 conditionExpression
Mr 丶 Tian的博客
06-25 3223
//1. this.bpmnModeler = new BpmnModeler({...}) // 2. var modeling = this.bpmnModeler.get("modeling"); const moddle = this.bpmnModeler._moddle; var conditionExpression = moddle.create("bpmn:FormalExpression", { body: "*****", }); ...
bpmn-js中实现shape的内置属性、节点的默认配置
油墨香^-^的博客
05-31 438
若是深度定制可以通过在shape创建的时候配置shape属性实现，在开始添加内置属性之前，我们先来了解下shape在bpmn-js中直接创建的场景，以及内置属性创建的具体格式。两种方式均可实现内置属性节点的配置插入，第一种方式通过适配式的方式实现，尽可能少的影响建模其的独立性和完整性，后一种方式比较直接，一次性完成创建配置，减少shape的绘制次数，但代码侵入性较高，不利于不同场景的适配共用。具体可根据需求选择使用何种方式进行实现。
Bpmn.js 进阶指南之原理分析与模块改造
weixin_43359503的博客
12-20 2848
在第四节中，大概讲解了自定义元素属性的方式。参照Bpmn-js自定义描述文件说明-掘金和，这里再重新说明一下。一个描述文件的格式为json，或者是一个可以导出json对象的js/tsname: 该部分扩展的名称，一般根据流程引擎来命名，字符串格式uri: 统一资源标识符，一般是一个地址字符串prefix: 属性或者元素统一前缀，小写字符串格式xml: 格式转换时的配置，一般用来配置, 表示会将标签名转换为小写驼峰，可省略types: 核心部分，用来声明元素和属性，以及扩展原有属性等，对象数组格式。
bpmn-js+vue3 属性面板添加和汉化 （二）
wDeveloper的博客
10-21 2564
在`vue3`中使为`bpmn-js`流程建模工具添加属性面板并汉化
vue-bpmn-master.zip
09-17
9. **版本控制与社区支持**: 作为一个开源项目，Vue-BPMN 可能在GitHub等平台上托管，拥有版本控制历史和社区支持，用户可以报告问题、请求功能或贡献代码。 10. **集成开发环境(IDE)**: 开发Vue-BPMN 应用时，...
xmlStr.js工具bpmn配合vue开发jsp格式文件
08-06
XMLStr.js是一个JavaScript工具，主要用于处理XML字符串，它在与BPMN（Business Process Model and Notation）结合使用时，可以极大地提升在Vue.js框架下开发JSP格式文件的效率和便捷性。BPMN是一种国际标准的业务...
VUE + bpmn 流程设计器 demo
04-10
Vue.js 是一款流行的前端JavaScript框架，它以其轻量级、高效和易用性著称，广泛应用于构建用户界面。BPMN（Business Process Modeling Notation）是一种业务流程建模的标准语言，它允许业务分析师和开发者以图形化...
js实现鼠标悬浮给图片加边框的方法
10-24
例如`.T-s-la`类定义了背景、位置和尺寸等属性，而`.T-s-l`类则用于控制父容器的宽度、溢出处理等。 在JavaScript部分，首先要确保在文档加载完成后执行我们的脚本。这可以通过jQuery的`$(document).ready()`方法...
bpmnjs Properties-panel拓展（属性设置篇）
回炉重造P的博客
08-28 5671
最近有思考工作流相关的事情，绘制bpmn图的工具认可度比较高的就是bpmn.js了，是一个基于node.js的流程图绘制框架。初始的框架只实现了基本的可视化，想在xml进行客制化操作的话需要拓展，简单记录下几个需求的实现过程。
BPMN2.0 -条件序列流和默认序列流
走在悬崖的边上
05-21 1325
当离开BPMN 2.0活动时，默认行为是计算其每个出口顺序流上的条件。在流程执行过程中访问一个元素之后，将继续执行素有的序列流，默认是并行的。只有当没有其他顺序流可以选择时，才会选择默认顺序流作为活动的出口顺序流。流程会忽略默认顺序流上的条件。下面的例子，通过典型的JavaBean的方式，使用getter引用流程变量的数据。时，选择该出口顺序流。都计算为false时，才会选择默认顺序流作为网关的出口顺序流。子元素的普通顺序流。定义，默认为唯一支持的表达式类型。活动的默认顺序流由该活动的。
复习步骤20- BPMN其他元素（2）顺序流与网关
香帅的博客
05-05 1337
I.顺序流 条件顺序流 -- 在顺序流里面可以定义表达式，表达式的计算结果是true，顺序流就往这里走了，一般这些顺序流的源对象是网关或流程活动 默认顺序流 -- 就是条件顺序流 里有一条 不配置 如下的标签<conditionExpression xsi:type="tFormalExpression"><![CDATA[ ${...
bpmn.js常用的api方法
ZHANG_666
05-09 1685
【代码】bpmn.js常用的api方法。
bpmn-js（五） 线条上添加决策表达式
飞天代码的博客
04-27 3155
bpmn-js确实强大，但资料也确实太少。可能也只有作者知道咋玩，为了给线条加上表达式这么个功能 生生的看了2天源码才搞定。 const moddle = window.prcessAppObj.bpmnModeler._moddle; var conditionExpression = moddle.create('bpmn:FormalExpression', { body: this.nodeItem.condition }); const modeling = windo
bpmn-js-properties-panel：强大的BPMN模型属性面板扩展
gitblog_00028的博客
05-25 659
bpmn-js-properties-panel：强大的BPMN模型属性面板扩展 bpmn-js-properties-panelA properties panel for bpmn-js.项目地址:https://gitcode.com/gh_mirrors/bp/bpmn-js-properties-panel 项目介绍 bpmn-js-properties-panel是一个为bpmn-j...
Bpmn.js流程建模结合业务整合工作流（二）
朝花夕拾的博客
06-25 907
上一篇文章讲述了bpmn.js的基本搭建使用过程，下面介绍工具栏的按钮使用 以及右侧属性如何绑定到节点保存的。这个时候输入节点名称会自动更新到节点上了 然后保存为xml会获取到最新的xml内容。拿流程名称举例，修改了流程名称 调用更新节点属性方法会自动更新到节点上面。updateProperties更新方法。changeField方法触发更新节点。右侧属性绑定节点初始化方法如下。commonParse方法。判断类型用来回显节点的属性。/**自适应屏幕**/
Bpmn.js自定义文件说明
weixin_43359503的博客
02-21 8722
Bpmn.js自定义文件说明 由于工作需要（其实不是很需要），在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer, 预览地址 MiyueFE blog, 欢迎 fork 和 star。 前言 在使用 bpmn-js 绘制流程图时，可能会存在需要开发者自己定义属性或者元素的情况，为了保证符合官方定义，对官方文档进行了汉化说明。以下说明基于个人理解，可能与真实作用有出入，希望大家指出不正确或者意义不明的地
bpmn-js右侧添加属性栏
08-18
3. 使用 JavaScript 获取 bpmn-js 中选定元素的属性信息，并将其显示在属性栏中。你可以使用 bpmn-js 提供的 API 来获取元素的属性信息。 4. 监听 bpmn-js 中元素的选中事件，当元素被选中时，更新属性栏中的字段值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胖蔡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值