Sub-Form
Use a subform when you want:
- reuse the components at different places
- to edit a list of elements of the same type (multiple entries set to true)
If you just need to group some components together or bind them to one variable, you can use a Panel component.
Example
Specific expressions
Attribute | Type | Description |
---|---|---|
$itemParent | generic | Access parent scope of the component |
$index | number | Returns a number (starting from zero) for each subform instance |
Properties
General
Attribute | Type | Description | Category |
---|---|---|---|
Model Id | String | This is a unique id for the component. | Every field on a form model needs a unique ID, which is automatically generated but can be changed if needed (e.g. to reference in expressions or for debugging purposes). If the field type supports rendering a label, and most types do, it can be configured here. This label is a displayed on the form to the end user and typically indicates what value is expected in the field. The documentation property holds free-form text that can be used to give more details about this subform, like its purpose, usage in other models, etc. |
Label | Text | The label attribute adds a label to the component. | |
Label tooltip | Text | When it is defined, a question mark icon will appear in the component label. When the user hovers over it it will show this text in a tooltip. | |
Documentation | Multiline Text | A free-form text to explain the use cases for this form field. | |
Store subform data in a single variable | CheckToInput | The binding for the form field. Use an appropriate expression to bind the component to its value and specify where the value is written/read. For example, use '{{myVariableName}}' to store the value of the field in a variable named 'myVariableName'. Use prefixes to define the scope of the value, for example, 'root.' for referencing the root case/process to store the value in. Please refer to the section 'Frontend expressions' in the Flowable guide for more information. | If the Store subform data in single variable flag is not checked the field vales will be stored as-is. For example, if the field ID of a field in the subform is myField, the value will be stored on the parent form as myField. However, if the Store subform data in single variable flag is checked, the field values will be stored in a JSON variable with the configured name. For example, if the subform has a subform X with two fields A and B, on the parent form there will be one JSON variable bound to X, with two fields A and B. When the flag is checked, this will enable the option to have multiple entries. If so, the JSON variable will become an array, that contains one element for each of the subform instances created at runtime. |
Form reference | Reference | The referenced form to be used as a subform. You can select a form reference directly or provide a static reference to the form with the form key value. | Create or link a form for the subform. At runtime, the form will be rendered on the location of the subform. A form reference can be unlinked to allow another form to be linked in its place. Note that unlinking a form does not delete the form model itself. |
Form
Attribute | Type | Description | Category |
---|---|---|---|
Show border | Boolean | If true, the sub form renders a border around the list of elements in it. | Customize how the subform is displayed to the user. |
Collapsible | Boolean | If true, the subform can be collapsed/expanded by clicking on an arrow ▲/▼. | |
Initially collapsed | Boolean | If true, the subform will be initially rendered as collapsed. | |
Multiple elements | Boolean | If multiple elements is set to 'true', the subform can hold more than one entry and the variable the subform is bound to will contain a list of maps holding the data shown in the subforms. Set multiple elements to 'false', if there should only be one subform shown and the variable the subform is bound to will hold a map rather than a list of maps. | When binding the subform to a single variable, it's possible to allow the user to add multiple instances of the subform at runtime. If so, the field values of each subform will be stored in a JSON array, with one element in the array for each subform. Additionally, whether or not addition, deletion or reordering is allowed, can be changed by checking or unchecking the flags on the left. |
Show add button | Boolean | When multiple entries is true, it will show or hide the add button. | |
Add button text | Text | Add button text. | |
Show remove button | Boolean | When multiple entries is true, it will show or hide the delete button. | |
Delete confirmation | Boolean | Displays a message asking for confirmation to delete a subform element. | |
Reorder elements | Boolean | Allows you to change the order of the elements of a subform. | |
Instance unique key mapping (expression) | Text | Map Subform instances with unique keys to be able to identify a specific instance of the multi subform. (e.g. {{$item.id}}) | |
Show no items message | Boolean | When there are no items, it will show or hide the no items message | Customize the message shown to the user when there are no subforms added yet. |
No items message | Text | Message to display when there are no items |
Validation
Validation
Attribute | Type | Description | Category |
---|---|---|---|
Minimum elements | Integer | If provided, a minimum number of elements in the subform must be added. Either provide a fixed number of an expression to specify the minimum number of elements in the subform or leave it blank, if there is no limitation. | Providing proper data in form fields is important, especially when in process, case, decision or any other models the values provided in the form fields are used in subsequent steps. To make sure that the data is correct, validation is crucial. For this reason, a form can only be submitted when all fields are valid and thus all validation properties configured on the left apply. Check the tooltips on the properties for more information. |
Maximum elements | Integer | If provided, it will not be possible to add more elements than the number specified. Either provide a fixed number or an expression to specify the maximum number of elements in the subform, or leave it blank if there is no limitation. | |
Validation Panel Display | Selection:
| Display at validation panel and validation tooltip. | |
Custom validations | List | List of additional validations to apply. | The subform can have custom validation rules beyond the standard set of validations. Such a rule is written as a frontend expression in the form of {{myExpression}}. If this expression evaluates to false, the submission of the form won't be possible. |
Validation messages
Attribute | Type | Description | Category |
---|---|---|---|
Minimum elements | Text | Specifies the message to be displayed if the minimum number of elements in the subform is not reached. | If there any validation rules configured for this subform, an error message will be displayed to the user when the field is deemed invalid. This error message can be customized. Make sure to choose the matching error message property for the particular validation rule property you want to customize the message for. |
Maximum elements | Text | Specifies the message to be displayed if the maximum number of elements in the sub form is exceeded. |
Rendering
Attribute | Type | Description | Category |
---|---|---|---|
Ignored | Boolean | If true the component will be hidden and the value will not be part of any payload. | Fields can also be shown or hidden based on the visible condition. This can be a frontend expression in the form of {{myExpression}} which can reference other form field values by their IDs. Fields can also be enabled or disabled, and similarly this can be made dynamic based on a frontend expression. Some field types can be ignored (the property is shown here if that's the case), which means that its value won't be taken into account. |
Visible | Boolean | Boolean value or expression specifies whether the component is visible or hidden. This expression might include another value in the same form, for instance use a checkbox bound to {{showAdditionalFields}} and use the very same expression as the visible attribute to show or hide the component according the checked state of the checkbox. If you want to only show the component, if the form is not used as the init-form, you can use the expression '{{root.id}}' which evaluates to true only, if there is a current case id which is not the case in an initialization form. | |
Enabled | Boolean | Boolean value or expression specifies whether component is enabled or disabled. | |
Style class | Text | Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering. | The subform can get customized CSS classes to customize the default styling. Note that the CSS files needed for the customizations must be available on the runtime system. |
Advanced
Attribute | Type | Description | Category |
---|---|---|---|
Events | List | The subform emits low-level events on which can be reacted with a frontend expression to implement various use cases that are not possible with regular modeling. If the expression produces a value, it can be stored in a new variable using the Result variable property. |
List Attribute Details
Custom validations
Attribute | Type | Description |
---|---|---|
Expression | Text | Validation passes when this expression is true. |
Error message | Text | Message to display when the validation fails. |
Events
Attribute | Type | Description |
---|---|---|
Event label | Text | This is a unique id for the component. |
Event type | Selection:
| The type of event emitted by the form field. |
Expression | Text | Validation passes when this expression is true. |
Result variable | Text | Capture the result of the expression in a result variable. |