胡萝虎的博客

  • 首页
  • Tech
  • NAS
  • AI
  • Apple
  • Windows
  • Linux
  • 资讯
  • 工具箱
  • 关于
天下皆白,唯我独黑
  1. 首页
  2. 编程
  3. 正文

Flowable工作流引擎自定义表单组件完整教程

2022年8月5日 301点热度 1人点赞 0条评论

最近在使用Flowable做工作流相关的项目,其中涉及到流程表单的设计。Flowable自带的表单设计器支持的组件类型只有常用的几个Input组件和一些样式组件,而在具体项目中需要用的特殊组件就不支持了,需要进行自定义。

Flowable自定义表单组件

准备

自定义表单组件主要涉及Modeler设计器中的页面,具体包含以下文件:

  • scripts/controllers/form-bulder.js
  • views/templates/form-builder-element-template.html
  • i18n/zh-CN.js (这个是国际化文件,可以根据自己使用的语言进行选择)
  • scripts/services/editor-directives.js
  • views/popover/formfield-edit-popover.html
  • images目录
    Flowable自定义表单组件

操作步骤

以下以自定义订单详情组件为例进行演示:

1、打开scripts/controllers/form-bulder.js文件,找到$scope.palletteElements代码的地方,在数组的最后增加一项:

{'type': 'order-detail', 'title': $translate.instant('FORM-BUILDER.PALLETTE.ORDER-DETAIL'), 'icon': 'images/form-builder/order-detail.png', 'width':1}

Flowable自定义表单组件
字段含义:

  • type表示组件类型,icon表示图标,需要先把图片放到images目录中;
  • 'title': $translate.instant('FORM-BUILDER.PALLETTE.ORDER-DETAIL')表示组件在页面中显示的名称,需要在i18n文件中配置。

2、打开views/templates/form-builder-element-template.html,在最后增加一个div,可以参考上面的进行修改:

<div ng-switch-when="order-detail" class="form-group">
<label class="control-label form-field-label">{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span></label>
<div class="input-group">
<span class="input-group-addon"></span>
<input type="text" class="form-control" style="cursor:default;background-color:#fff;" placeholder="{{'FORM-BUILDER.LABEL.ORDER' | translate}}" value="{{formElement.placeholder}}" disabled>
</div>
</div>

字段含义:

  • ng-switch-when="order-detail"表示组件的类型;
  • placeholder="{{'FORM-BUILDER.LABEL.ORDER' | translate}}"表示组件的placeholder值,需要在i18n文件中配置,其他的元素按需配置。

3、接下来就是配置i18n文件,由于我使用的是中文,所以配置zh-CN.json文件:

  • 在FORM-BUILDER–PALLETTE增加一个节点:ORDER-DETAIL:"订单详情"
  • 在FORM-BUILDER–LABEL增加一个节点:ORDER:"选择订单..."
  • 将订单详情组件的icon图片文件放到images目录

4、如果需要对组件增加选项,比如是否选择多个等,需要在以下文件里配置:

  • 打开views/popover/formfield-edit-popover.html,参考其他组件,在其下面增加以下代码
<div ng-if="activeTab.id == 'custom-option' && formElement.type === 'order'">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="formElement.params.multiple">
{{'FORM-BUILDER.COMPONENT.SELECT-ALLOW-MULTIPLE' | translate}}
</label>
</div>
</div>
</div>

Flowable自定义表单组件

表示在order组件的选项卡中增加是否支持选择多个选项,此选项卡的id为custom-option选项卡。

  • 然后打开scripts/services/editor-directives.js,参考其他选项卡设置,增加一个选项卡配置,并将组件添加进去即可
    Flowable自定义表单组件

​
​

总结

到此,自定义一个简单的表单组件就完成了,重新将代码发布,然后打开表单设计器,就可以看到自定义的表单组件了。
Flowable自定义表单组件

HELIB_QRCODE
标签: Flowable
最后更新:2023年9月20日

诺多

这个作者不懒,他正在学习新知识~

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复
搜索
文章目录
  • 最近在使用Flowable做工作流相关的项目,其中涉及到流程表单的设计。Flowable自带的表单设计器支持的组件类型只有常用的几个Input组件和一些样式组件,而在具体项目中需要用的特殊组件就不支持了,需要进行自定义。
    • 准备
    • 操作步骤
    • 总结
最新 热点 随机
最新 热点 随机
Ponymusic:一款涅槃重生的云音乐客户端,仅限安卓哦! Melody: 一款支持9大平台歌曲搜索播放的音乐精灵! Nuclear:如你所见,一款免费的多音源音乐播放器! FreshRSS:一款跑在NAS上的新鲜RSS服务器,搭配APP使用体验更佳! MusicTagWeb:一款非常顺手的音乐刮削软件,直接跑在NAS上!
Musify:一款国外版的LX流媒体音乐播放器,太漂亮了!VipVideo:一款Mac版vip视频免费观看客户端Gfriends Inputer:一款适用于Jellyfin和Emby的女友头像和cup导入工具MusicTagWeb:一款非常顺手的音乐刮削软件,直接跑在NAS上!Wizarr:一款可以为Jellyfin/Emby/Plex创建用户邀请的魔法老头
如何在iPhone和iPad上将HEIC照片转换为JPG 解决macOS Ventura打开软件提示已损坏的问题 关于Bitwarden的一些设置 FreshRSS:一款跑在NAS上的新鲜RSS服务器,搭配APP使用体验更佳! 还在傻傻手工预约茅台?那你可抢不过别人的自动化小助手
分类目录
  • NAS
  • AI
  • Apple
  • Linux
  • Windows
  • Tech
  • 编程
  • 资讯
  • 未分类
归档
  • 2023年12月
  • 2023年11月
  • 2023年10月
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年5月
  • 2022年12月
  • 2022年11月
  • 2022年8月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年2月
  • 2021年1月
  • 2018年4月

COPYRIGHT © 2023 胡萝虎的博客. ALL RIGHTS RESERVED.