Key Concepts

Form Definition

For the BPMN engine, we adhere to the BPMN specification and for the DMN engine, we use the DMN specification. For start and task forms no Oasis specification exists. Therefore, we have defined a JSON-based form definition structure that we use as an output format for the Flowable Form Editor and is used to render start and task forms in the Flowable Task application.

Fields

Field Layout

A field is made up of several parts (all but the widget part are optional):

Name Description

Widget

The widget visualizes the data model. Most widgets are interactive and let the user change the data model; however some widgets are read-only. There are widgets to manipulate strings, numbers, dates, rich text, selections, and many others. The widget is located in the center of the field; all other parts are arranged around the widget. The field configuration defines the precise positioning of the field parts.

Label

The label tells the user to which part of the data model the widget is bound. The label is located on the left side or top of the widget (depends on the field configuration).

Required indicator

The required indicator is displayed for required fields. Required means that the widget cannot be empty. The required indicator is located on the right side of the widget.

Description

The description gives additional information to the user. This can be formatting instructions or further description about of the App uses the entered value. The description is located on the bottom of the widget.

Fields

Field Alignment

To enhance the readability of a form, the field parts of all fields are aligned among themselves: the labels are aligned, the widgets and descriptions are aligned, the required indicators are aligned.

The alignment is performed per slot. All fields that start in the same slot build a field group. Inside such a field group Flowable looks for the widest label which becomes the dominating label for that slot. All labels in the field group are then enlarged to the same width of the dominating label. This is done by adding space between the label and the widget. This ensures that all widgets and descriptions of a field group start in one line and all.

Field alignment

The only exception is with fields that have top label positions. For these fields, the label, the widget and the description all start at the beginning of the slot.

Field alignment

Binding

Binding is the process to connect the form fields to the data model. The binding in Flowable is always bi-directional. When the user changes the form fields, then those changes are immediately propagated to the data model. On the other side changes in the data model are immediately propagated back to the form fields.

A binding expression defines to which part of the data model the form field is connected. The binding expression has to be a writable front end expression, e.g., {{foo}}, {{case.bar}}.

There are some reserved expressions that cannot be used as they are used internally to save some work item information. The reserved front end expressions are:

  • id

  • definitionId

  • definition

  • type

  • state

  • creationTime

  • updateTime

  • currentUser