Master Detail
Allows modelling of a master-detail view based on a data source and modelled form elements.
Properties
This component uses a Data Source.
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 position | Selection:
| The position of the label, you can choose between left or top. | |
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. | |
Value | Text | 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. | The value binding determines where the internal stat of the master-detail component is stored. It's advised to store this in the $temp variable, as you typically don't want to have these details in form variables. When it comes to storing the result of using the master-detail component, for example for building a list with objects, the items property can be used. |
Enable creating | Boolean | Activates the view for creating an item | Configures whether this master-detail component allows for creating, editing and deleting items. If the flag is unchecked, the corresponding create, edit and delete buttons will be removed. |
Enable editing | Boolean | Activates the view for editing an item | |
Enable deleting | Boolean | Activates the view for deleting an item |
Datasource
Attribute | Type | Description | Category |
---|---|---|---|
Data source | Selection:
| Options to select different types of Data source. | Configures the source for the master-detail component. Either a static one is used, where the item are statically pre-defined or need to be stored in a form variable. In the latter use case, the items property should be switched to be an expression and bound to a variable like {{myItems}}. The various format properties allow to customize how the left-hand side of the master-detail component is rendered at runtime. The current item can be referenced using the $item variable. |
Items | List | When using a 'static' datasource, the items need to be defined. If no values are shown, make sure you have configured the 'columns' property, as the items are defined by giving values for the different columns. | |
Master Data Key | Text | Key representing the Master Data Type. e.g., 'md-country'. | |
Include Translations | Boolean | Flag indicating whether master data instance translations should be included in the fetched data. | |
Query URL | Text | URL to request the items with optional variables. $searchText: Text the user typed if the component allows search. $start: First item index (for pagination). $pageSize: Number of items per page. eg. /rest/users?start={{$start}}&size={{$pageSize}} | |
Lookup URL | Text | The REST endpoint URL used to retrieve the full item by ID. For example, rest/get?id={{$id}}&type={{someValue}} The URL can contain expressions evaluated against the current work object. The selected item ID is available as $id If the lookupURL does not contain {{$id}}, this will be automatically added at the end. The URL should not be encoded as it will be encoded automatically. | |
Path | Text | When using a REST data source, this is the location in the response data to get the row collection. | |
Format for id | Text | The format where the id is located at the response payload, this would be used to identify the item, tha value must be unique | |
Format for title | Text | The format where the label is located at the response payload, this would be shown at the master view of the component | |
Format for description | Text | The format where the description is located at the response payload, this would be shown at the master view of the component | |
Data object model | dataobjectselectsearch | Defines which type of data object data is returned when using the select and which operation is used. | |
Query Parameters | List | The query parameters that should be added to the Query URL. $searchText: Text the user typed if the component allows search. $start: First item index (for pagination). $pageSize: Number of items per page. eg. /rest/users?start={{$start}}&size={{$pageSize}} | |
Format | Text | An expression used to generate the label for each item. For example, Mr. {{$item.name}} {{$item.surname}} The expression is evaluated against the current work object. The selected item is available as $item. | Advanced configuration options of the datasource. Please check the tooltips on each property for more information. |
Storage | Selection:
| Specifies how the data retrieved by the REST endpoint should be stored in the variable. Choose 'ID' if only the ID of the selected entry should be saved in the variable, choose 'Full value' if the whole object should be saved and thus making it possible to display other values of the selected element within the form as well. Pay attention as storing the full value could lead int bloating the variables with unnecessary information depending on the amount of data retrieved by the REST endpoint. | |
Map to | Text | The attribute of an item to map to. For a Static data source 'value' is commonly used as the map to attribute and for a REST data source 'id' is commonly used as the map to attribute. | |
Map to | Selection:
| The attribute of an item to map to. For a Static data source 'value' is commonly used as the map to attribute and for a REST data source 'id' is commonly used as the map to attribute. | |
Track by | Text | The attribute to uniquely reference an item for tracking may improve form frontend performance. For 'REST' datasource is usually 'id', for Static data is usually 'value'. | |
Navigation URL | Text | The URL to navigate to for the selected item. The URL might contain expressions, most likely at least '{{$item.id}}' in order to include the ID of the selected element in the navigation URL. | |
Target | Text | Specifies the target for the navigation URL, use '_blank' to open the selected item in a new window or '_self' to use the same window for navigation. |
Validation
Attribute | Type | Description | Category |
---|---|---|---|
Validation Panel Display | Selection:
| Display at validation panel and validation tooltip. | Configures whether or not errors in this component are shown on the validation panel. |
Custom validations | List | List of additional validations to apply. | The modal dialog 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 |
---|---|---|---|
Description | Text | The description attribute adds a description to the component. | Some field types have an extra line of text displayed to give the user more details about the field. |
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. | 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. |
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 master-detail component 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 master-detail component 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
Items
Attribute | Type | Description |
---|---|---|
Text | Text | Label for the item |
Value | Text | Value for the item |
Query Parameters
Attribute | Type | Description |
---|---|---|
Name | Text | The name of the query parameter |
Value | Text | The value of the query parameter. The value will be automatically URL-encoded. |
Default Value | Text | The default value for the query parameter (in case the value didn't return anything). The value will be automatically URL-encoded. |
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. |