bpmn右侧添加自定义属性，并添加方法

最新推荐文章于 2023-12-15 08:07:38 发布
最新推荐文章于 2023-12-15 08:07:38 发布
阅读量1.5k 收藏 7
点赞数 1
分类专栏： bpmn 文章标签： vue anti-design-vue 流程图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cainiaoyiige/article/details/132116549
版权

1、首先在右侧创建节点，这地方可以参考官网提供的例子。地址https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension

2、 在创建模板时，引入自己所创建节点信息

3、此时我们的右侧面板就出现了我们自定义的属性：

4、最后我们获取这个节点的信息，并给这个节点添加监听方法。

 

5、最终我们可以通过handleButtonClick（）方法来实现自己定义的一些业务操作。

欢迎大家一起讨论！！！

 

进击de小菜鸟
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bpmn-js中实现shape的内置属性、节点的默认配置
飞云先生
03-14 186
若是深度定制可以通过在shape创建的时候配置shape属性实现，在开始添加内置属性之前，我们先来了解下shape在bpmn-js中直接创建的场景，以及内置属性创建的具体格式。两种方式均可实现内置属性节点的配置插入，第一种方式通过适配式的方式实现，尽可能少的影响建模其的独立性和完整性，后一种方式比较直接，一次性完成创建配置，减少shape的绘制次数，但代码侵入性较高，不利于不同场景的适配共用。具体可根据需求选择使用何种方式进行实现。
vue项目中使用bpmn-自定义platter的示例代码
11-20
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。如果转载或通过爬虫直接爬的，格式特别丑，请来原创看：我是作者原文 前情提要 经过前四篇的学习，我们能够实现bpmn基本绘图、预览、为节点加事件加颜色等效果，这一篇我们来说，如何自定义左侧工具栏（platter），首先看一下自定义前后效果图对比： 我们本次要实现的目标：基于左侧platter原有元素类型，创建出一个新的自定义节点。暂且叫它“草莓蛋糕”节点，
VUE+BPMN.JS右侧属性栏自定义功能
StarFlll的博客
12-09 5127
Bpms.js自定义右侧属性栏,部分二次封装
bpmn.js+vue实现工作流设计器（左侧功能+右侧详情）
热门推荐
浩星
09-06 1万+
前言： 整理在vue项目中使用bpmn.js的过程和源码。 实现最终效果： 1、bpmn.js的介绍 2、bpmn.js中实现最简单的效果： 3、bpmn.js引入中文版 4、bpmn.js引入左侧的功能面板 5、bpmn.js引入右侧的详情面板 ...
vue3使用工作流bpmn.js实现保存 ，新增，修改 ，右边工具栏自定义，属性栏自定义
weixin_50379372的博客
03-16 5570
vue3使用工作流bnpm.js实现保存 ，新增，修改 ，右边工具栏自定义，属性栏自定义。
Flowable 6.6.0 BPMN用户指南 -9 表单 - 9.2 表单属性
月满闲庭的博客
01-02 1501
9.2 表单属性 All information relevant to a business process is either included in the process variables themselves or referenced through the process variables. Flowable supports complex Java objects to be stored as process variables like Serializable objects,
flowable-bpmn2添加自定义节点属性
gzt19881123的专栏
09-20 8378
记录一下对flowable流程引擎创建自定义下拉框属性步骤方法 目录说明添加自定义属性思路步骤找到 flowable的静态画图页面文件找到bpmnjson的数据文件修改找到bpmnjson的数据添加自定义下拉框属性类型添加自定义属性转换器获取自定义属性值 说明 Flowable 一款流行的bpmn2流程引擎，里面包含了绘制bpmn2的流程图工具。本次flowable 版本为 6.4.2 ， 6.5开始flowable走商用路线了。6.4.2基本上满足了常用流程引擎的功能。 在绘制用户任务流程图的时候，除.
bpmn-js自定义右侧属性面板properties-panel
最新发布
m0_37239448的博客
12-15 2824
这里有一点要注意，就是modeler要取importXML()方法渲染完之后的值(awaitModeler)，否则会报错，或者在importXML()之后再执行一次init()，因为importXML()之前和之后的modeler发生了变化；bpmn.js完全自定义右侧属性面板，其实就是完全自己写template组件，自由开发，最大化满足需求，所有与画布的交互全部通过Modeler的实例对象(modeler)；跟正常开发页面一样，先定义好自己的属性面板组件，传入Modeler以及其他参数进行使用;
Bpmn.js自定义文件说明
weixin_43359503的博客
02-21 7492
Bpmn.js自定义文件说明 由于工作需要（其实不是很需要），在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer, 预览地址 MiyueFE blog, 欢迎 fork 和 star。 前言 在使用 bpmn-js 绘制流程图时，可能会存在需要开发者自己定义属性或者元素的情况，为了保证符合官方定义，对官方文档进行了汉化说明。以下说明基于个人理解，可能与真实作用有出入，希望大家指出不正确或者意义不明的地
【扩展】bpmn右侧属性面板（新版本）+ 国际化（二）
sxm的博客
11-22 1094
上一个博客介绍了bpmn流程图的搭建，这个博客扩展一下bpmn右侧属性面板新版本的使用和国际化。
bpmn-vue-custom:v基于vue编写的一些自定义bpmn.js案例
03-08
bpmn-vue基本 项目描述 此项目为以下教材中的教材案例。 :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: 项目截图： 如何使用 将项目克隆至本地： git clone [email protected]:LinDaiDai/bpmn-vue-custom.git 安装依赖： npm install 本地启动项目： npm run serve 打包发布至生成环境： npm run build
vue-bpmn-element:bpmn.js流程设计器组件，基于vue-elementui美化属性面板，满足90％以上的业务需求
03-20
bpmn.js流程设计器组件 1、调整设计器UI布局，基于vue-elementui美化属性面板 2、支持设置任务变量、表达式、分支条件等，满足90%以上的业务需求 3、支持flowable和activiti 组件常用方法 1，配置支持flowable（激活） < vue xss=removed></ vue> 2，组件还在完善中，如果有需要扩展需求，可以参考以下三个事件： // 监听选择事件，改变属性栏表单的显示与隐藏 this.modeler.on("selection.changed", e => { // TODO }) // 监听内容变化事件，改变属性栏的值 this.modeler.on("element.changed", e => { // TODO }) // 监听点击事件 this.modeler.on("el
bpmn-js-example-custom-elements:如何在确保BPMN 2.0兼容性的同时支持bpmn-js中的自定义元素的示例
05-02
这个例子结合了我们的所有方面 。 bpmn-js中的自定义元素 如何在确保BPMN 2.0兼容性的同时支持自定义元素的示例。 关于 本示例创建一个BPMN编辑器，该编辑器知道一些QA相关的元数据。 这样，它结合了我们之前发布的所有先前示例 ： 通过数据定制元素进行建模和读取 渲染具有自定义元素 添加允许创建自定义元素的 阅读以下各节中的详细信息： 创建模型扩展 使用模型扩展，我们可以读取，修改和编写包含qa:suitable扩展属性和qa:analysisDetails扩展元素的BPMN 2.0图。 您可以设置每个元素的适用性得分。 这样的元素的XML看起来像这样： < bpmn2 xss=removed xss=removed xss=removed> < bpmn2 : outgoing
vue项目中使用bpmn为节点添加颜色的方法
10-15
主要介绍了vue项目中使用bpmn为节点添加颜色的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
关于html标签自定义属性的问题
09-28
对HTML JS没有影响。可以写n多个属性。只要定义的属性名别跟原有默认属性同名就行。这种自定义的属性，浏览器不会去解析
bpmn-js自定义属性面板报错问题解决
Stone的博客
12-11 4126
bpmn-js自定义属性面板报错问题解决 链接: LinDaiDai_霖呆呆 全网最详bpmn.js教材-properties-panel篇(上). 大佬在这篇文中提供的源码在bpmn-js最新的版本中会报一个id找不到的错 解决方法如下： 只需要将TitleProps中的： 下面展示一些 内联代码片。 group.entries.push(entryFactory.textField({ id : 'title', description : '权限的标题', labe
bpmnjs Properties-panel拓展（属性设置篇）
回炉重造P的博客
08-28 3740
最近有思考工作流相关的事情，绘制bpmn图的工具认可度比较高的就是bpmn.js了，是一个基于node.js的流程图绘制框架。初始的框架只实现了基本的可视化，想在xml进行客制化操作的话需要拓展，简单记录下几个需求的实现过程。
bpmn-添加自定义图元
qq_29603991的博客
11-11 1910
背景：项目组在进行流程设计器的开发中，定义了很多具有业务意义的自定义标签，在原有的bpmn2.0的字体图标库（https://cdn.staticaly.com/gh/bpmn-io/bpmn-font/master/dist/demo.html）中并不能找到与之契合的图标，所以考虑自定义图元图标来描述我们自己定义的图元标签。 目标：我们总共需要修改三处地方，1.工具栏palette，2.图元shape，3.ContextPad 实现： 一、替换渲染在画布中的图元shape 1.在iconf.
在angular中引入bpmn（5）【自定义扩展bpmn属性栏】
小钻风的博客
03-16 1867
对于bpmn的一些扩展，最复杂的莫过于 自定义扩展属性栏 了，注意观察就可以发现，属性卡有很多标签页，每个标签页有很多属性， 不同的元素属性还不同，因此，扩展bpmn属性相当复杂，大致可分为以下几种： 新增一栏，针对全部元素 新增一栏，针对个别元素 在某一栏内，新增一个属性 但是，扩展过属性栏的都知道，一个属性可以是一个输入框，单选框、同步异步，输入输出等等，很多很多花样，而且属性跟形成的bp...
bpmn.js自定义右侧属性栏
03-29
BPMN.js是一个JavaScript库，可用于创建BPMN（业务过程建模符号）图形。它提供了一个默认的右侧属性栏，用于显示选定元素的属性。 如果您希望自定义此属性栏，则可以使用以下步骤： 1. 创建一个新的属性栏HTML文件，例如“custom-properties.html”。 2. 在该文件中，使用HTML和CSS创建属性栏的布局和样式。 3. 在该文件中，使用JavaScript编写代码来获取选定元素的属性并将其显示在属性栏中。 4. 在BPMN.js中，使用以下代码将属性栏与选定元素关联起来： ```javascript var propertiesPanel = { parent: '#properties-panel', propertiesProvider: customPropertiesProvider }; var bpmnModeler = new BpmnModeler({ container: '#canvas', propertiesPanel: propertiesPanel }); ``` 其中，`customPropertiesProvider`是您编写的JavaScript代码，用于获取选定元素的属性。 5. 在BPMN.js中，使用以下代码将自定义属性栏文件加载到页面中： ```javascript var propertiesPanelModule = require('bpmn-js-properties-panel'); var customPropertiesProvider = require('./custom-properties'); var propertiesPanelContainer = document.querySelector('#properties-panel'); var propertiesPanel = new propertiesPanelModule.PropertiesPanel({ parent: propertiesPanelContainer, propertiesProvider: customPropertiesProvider }); ``` 其中，`custom-properties`是您编写的JavaScript代码，用于获取选定元素的属性。 通过按照以上步骤，您可以自定义BPMN.js右侧属性栏以显示您需要的属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值