Modal component icon Modal

A Modal is used to show a panel container definition as a controlled emergent window.


Group Name Description



This is a unique id for the component.


The label attribute adds a label to the component, if not empty.

Store panel data into single variable

The binding for the component. Use an appropriate expression to bind the component to its value and specify where the value is saved /read. For example, use '{{myVariableName}}' to store the value of the component in a variable named 'myVariableName'. Use prefixes to define the scope of the value, for example, 'root.' for referencing the root case to store the value in or 'parent.' to store the value in the parent work item of the current one. For example, '{{}}' stores the value in the root case using a variable named 'foo'. For more information please refer to the Flowable Forms section.


If true the component is hidden and the value is not part of the payload.


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 to the checked state of the checkbox. If you want only to show the component, if the form is not used as the init-form, you can use the expression {{}} which evaluates to true only, if there is a current id which is not the id in a start form.


A Boolean value or expression specifies whether component is enabled or disabled.



If true, the panel is collapsible.


If true, the contents are initially hidden but displayed on expansion.

Show border

Show a border around the panel.


Style class

Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering.