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

准备
自定义表单组件主要涉及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目录

开始
以下以自定义订单详情
组件为例进行演示:
- 首选,打开
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文件中配置 - 打开
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文件中配置,其他的元素按需配置。 - 接下来就是配置i18n文件,由于我使用的是中文,所以配置
zh-CN.json
文件- 在
FORM-BUILDER
–PALLETTE
增加一个节点:ORDER-DETAIL:"订单详情"
- 在
FORM-BUILDER
–LABEL
增加一个节点:ORDER:"选择订单..."
- 将订单详情组件的icon图片文件放到images目录
- 在
- 如果需要对组件增加选项,比如是否选择多个等,需要在以下文件里配置: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,参考其他选项卡设置,增加一个选项卡配置,并将组件添加进去即可
- 到此,自定义一个简单的表单组件就完成了,重新将代码发布,然后打开表单设计器,就可以看到自定义的表单组件了。
