Panel

Use it to group components within the same scope. This allows you to make more complex layouts and also hide or disable all the components inside the panel with a single setting.

Example

Loading...

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.
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.
Store panel data into 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 panel 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 panel is myField, the value will be stored on the parent form as myField. However, if the Store panel 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 panel 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.
Tab Index	Integer	Determine their relative ordering for sequential focus navigation. Tab index will be ignored if the component is inside a subform.

Panel

Attribute	Type	Description	Category
Collapsible	Boolean	If true, the subform can be collapsed/expanded by clicking on an arrow ▲/▼.	Customize how the panel is displayed to the user. If the Show total records is checked, the panel will display the total amount of rows available.
Initially collapsed	Boolean	If true, the subform will be initially rendered as collapsed.
Show border	Boolean	If true, the sub form renders a border around the list of elements in it.
Save button visible	Boolean	Whether or not to show submit button.	Change whether or not and how the save and/or cancel buttons are displayed to the user.
Save button text	Text	Text in submit button once modal is opened.
Save button enabled	Boolean	Whether or not to enable cancel button.
Cancel button visible	Boolean	Whether or not to show cancel button.
Cancel button text	Text	Text in cancel button once modal is opened
Cancel button enabled	Boolean	Whether or not to enable cancel button.
Hide cancel cross button	Boolean	Whether or not to show the cancel cross button.

Validation

Attribute	Type	Description	Category
Validation Panel Display	Selection: Show Only message Hide	Display at validation panel and validation tooltip.	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.
Custom validations	List	List of additional validations to apply.	The panel 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.

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 panel 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 panel 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: On value change	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.