Flowable自定义表单组件

作者 胡萝虎 日期 2022-08-05
Flowable自定义表单组件

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

Flowable

准备

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

  • scripts/controllers/form-bulder.js
  • views/templates/form-builder-element-template.html
  • i18n/zh-CN.js (这个是国际化文件,可以根据自己使用的语言进行选择)
  • 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. 到此,自定义一个简单的表单组件就完成了,重新将代码发布,然后打开表单设计器,就可以看到自定义的表单组件了。

    image-20220805171319449

“扫一扫接着看”