Flowable工作流引擎自定义表单组件

胡萝虎 

最近在使用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目录
image-20220805170036409

开始

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

  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}
    其中,type表示组件类型,icon表示图标,需要先把图片放到images目录中;'title': $translate.instant('FORM-BUILDER.PALLETTE.ORDER-DETAIL')表示组件在页面中显示的名称,需要在i18n文件中配置image-20220805170308621
  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-BUILDERPALLETTE增加一个节点:ORDER-DETAIL:"订单详情"
    • FORM-BUILDERLABEL增加一个节点:ORDER:"选择订单..."
    • 将订单详情组件的icon图片文件放到images目录
  4. 如果需要对组件增加选项,比如是否选择多个等,需要在以下文件里配置:1)打开 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>
    表示在order组件的选项卡中增加是否支持选择多个选项,此选项卡的id为custom-option选项卡

​ 2)然后打开scripts/services/editor-directives.js,参考其他选项卡设置,增加一个选项卡配置,并将组件添加进去即可

自定义选项卡

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

Recommended Posts

Jellyfin中使用QSV替代VAAPI转码

使用过Jellyfin的应该都会遇到转码的问题,默认情况下都是使用VAAPI进行转码,这种方式兼容性比较好,但是转码的性能比较一般。如果使用的是Intel平台J4125及更早的CPU的话,建议切换为QSV(Intel Quick Sync )进行转码,效率会比VAAPI快很多,并且CPU也会更低。

胡萝虎 

在群晖上使用Docker部署为知笔记服务

虽然市面上有很多各种类型的云笔记应用,像有道云笔记、印象、OneNote,包括Notion,博主都曾尝试使用过。但是随着资料越来越多,特别是一些涉及个人隐私的资料放在云端笔记上,比如密码、账号之类的,让博主越来越感到焦虑😂。博主此前也曾在群晖部署过蚂蚁笔记,但是使用感受实在不咋滴;一段时间以来,只能勉强用群晖自带的弱智Note Station来记录个人资料,真怕哪天自己也搞弱智了。

最近实在受不了Note Station的反人类操作了,不得不再次开启寻找解决方案的征途,幸运的是,Eureka…… 为知笔记的私有化方案终于让我解放啦

胡萝虎 

在群晖中搭建Cloudreve网盘系统

众所周知,某度网盘为了挣钱,各种极限限速,下载限速能把人恶心死。但是,网盘类服务越来越成为人们的刚需,不管是个人生活中的照片,还是工作学习中各类资料,相信很多人都需要使用到网盘进行存储和分享。如果你不想忍受某度的速度,建议有条件的朋友可以试试自己搭建一套网盘系统,本文以Cloudreve为例,在群晖NAS上搭建一套属于自己的私人网盘服务,供读者们参考

胡萝虎 

在群晖上搭建Bitwarden密码管理服务器

管理密码是很多人头痛的事,密码设置简单好记又不太安全,设置复杂又容易忘。为了解决这个难题,市面上出现了不少密码管理工具,帮助人们管理在各种平台、系统、网站、APP上设置的密码,比如1Password、Lastpass、KeePass等,不过绝大多数需要付费才能使用。本着能白嫖就绝不花一个子儿的原则,今天我就来介绍一个不需要花钱的密码管理器——Bitwarden

胡萝虎 

使用Docker一键安装服务端神器Appwrite

Appwrite是一个基于Docker的开源的端到端开发者平台,其容器化的微服务库可应用于网页端,移动端,以及后端。Appwrite 通过视觉化界面极简了从零编写 API 的繁琐过程,在保证软件安全的前提下为开发者创造了一个高效的开发环境。

简单来说,如果你只会前端开发,不懂后端技术,那么这个神器就可以帮你轻松完成后端服务搭建,包括账户、用户、团队、数据库、存储、云函数等等,目前支持各类前端平台,包括Flutter、Vue、Angular、React、iOS和Android等

胡萝虎 

Leave A Comment