Creating new types of Form fields

Flowable Engine
1

Creating new types of Form fields

This tutorial is designed to help and encourage the Flowable community to develop new features in Modeler and to create new form components contributing to the evolution of the tool. The prints are in Brazilian Portuguese which is my native language, but by analogy it is possible to visually identify the components in any language.
To create a new form field type in Flowable Modeler follow the steps below:

1) Add a new element in the Field Type

Edit the file …/flowable-ui-modeler-app/src/main/webapp/scripts/controllers/form-builder.js and add a new item in $scope.palletteElements.

Ex:

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

Then add to the files …/flowable-ui-modeler-app/src/main/webapp/i18n/*.json the translation of the expression defined in $translate.instant.

Ex:

   ` "FORM-BUILDER": {
        "PALLETTE": {
            "HYPERLINK": "Hyperlink"
     }       }`

2) Add the form field to be viewed in the Modeler drawing tab

Edit the …/flowable-ui-modeler-app/src/main/webapp/views/templates/form-builder-element-template.html file and create a new div by defining the new component.

Ex:

<div ng-switch-when="hyperlink" class="form-group">
    <label class="control-label form-field-label">{{formElement.name}}
         <span class="marker" ng-if="formElement.required">*</span></label>
    <div class="message" ng-show="formElement.params.hyperlinkUrl">
         {{formElement.params.hyperlinkUrl}}</div>
 </div>

3) Add a new tab in the properties of the new form field and define which types of fields will display the new tab

Edit the file …/flowable-ui-modeler-app/src/main/webapp/scripts/editor-directives.js
Ex:

{ "id": "advanced", "name": $translate.instant('FORM-BUILDER.TABS.ADVANCED-OPTIONS'), "show": ['hyperlink'] }

Then add in the translation files …/flowable-ui-modeler-app/src/main/webapp/i18n/*.json the expression defined in $translate.instant.

Ex:

"FORM-BUILDER": { "TABS": { "ADVANCED-OPTIONS": "Avançado" } }

4) Add a new Property in the new created Tab

Edit the file …/flowable-ui-modeler-app/src/main/webapp/views/popover/formfield-edit-popover.html and add a new div by setting the new property for the created tab.

Ex:

`




`

Note that the hyperlinkURL property will only appear in the Advanced tab and for the hyperlink field type.
Then add in translation files …/flowable-ui-modeler-app/src/main/webapp/i18n/*.json the expression defined in translate.

Ex:

"FORM-BUILDER": { "COMPONENT": { "HYPERLINK-URL": "URL do Hiperlink" } }

Set up so that the new field type created does not have the Required and Read Only flag.

Ex:

`







{{‘FORM-BUILDER.COMPONENT.REQUIRED’ | translate}}







{{‘FORM-BUILDER.COMPONENT.READONLY’ | translate}}


`

5) Add in the Flowable Task the visualization of the new field type

Edit the file …/flowable-ui-task-app/src/main/webapp/workflow/views/templates/form-element-template.html and add a new div that defines the new field type.

Ex1: Viewing the Hyperlink field in Flowable Task Form Filling:

`

`

Ex2: Viewing the Hyperlink field in completed forms (read-only) in the Flowable Task:

`

`
9 Likes
2

Thanks for taking the time to write that up (I’m sure many people will find it useful)!

3

I tried to figure that out as well yet stuck in the near beginning. Doing so strictly following your steps surprisingly ended up with those lines of a code appeared in a form as plain text, not adding new form fields. I tried to open that files with this tool I used for creating extra fields before: https://online-form-builder.pdffiller.com/ and there it outputs right. No clue what was it all about…