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，参考其他选项卡设置，增加一个选项卡配置，并将组件添加进去即可
- 到此，自定义一个简单的表单组件就完成了，重新将代码发布，然后打开表单设计器，就可以看到自定义的表单组件了。
