Data Object Data table
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 data object data table, like its purpose, usage in other models, etc. |
Label | Text | The label attribute adds a label to the component. | |
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 purpose of a form is to either display some value or to have users provide values for the various fields of a form. In both situations, this value needs to be bound to an identifier using the {{myValue}} notation, and the value provided by the user will be stored in a variable with that identifier. If there already was a value bound to the identifier before, for example because another form had a field bound to the same identifier, it will be displayed. |
Default value | Text | If the value is not set, the default value will be used. | |
Data object configuration | DataObjectSearchConfiguration | Configures how to search for one or more data object instances. | Select a data object model and a related operation to configure which search query is executed when the data for the data table is retrieved. Using a search operation, it is possible to look up data objects. If the searchbox is enabled, the user will be able to type in the select component and this text input needs to be mapped to a parameter of the search operation. Use the following binding to pass the typed text into the operation: {{$searchText}} Alternatively, an expression can be used that references a list of data objects that was already retrieved by another component. |
Columns | DataObjectDatatableColumns | Configure which fields of the data object are shown in the table. Each field is shown in a separate column. | |
Selectable | Selection:
| Will make rows selectable using Single (radio buttons) or Multiple (checkboxes). | |
Show searchbox | Boolean | When enabled, shows a search textbox above the data table. Note that you will need to have configured the search operation properly, by binding it to the $searchText parameter. | Show searchbox: when enabled, shows a search textbox above the data table. Note that you will need to have configured the search operation properly, by binding it to the $searchText parameter. The other flags here configure which options are available for each data object row in the data table. When enabling view, create or edit, a new property will be made available in the property panel to configure a form for those actions. |
Enable viewing | Boolean | When enabled, allows to model a form that is shown when 'view' is clicked in the datatable for a particular data object instance. | |
Enable creating | Boolean | When enabled, allows to model a form that is shown when the 'create' button is clicked in the datatable. | |
View form | Reference | The form that is shown when the user clicks on 'view' in the data table on a particular data object instance row. | Select a form model for the form that is shown when the user clicks on 'view' in the data table on a particular data object row. |
Create form | Reference | The form that is shown when the user clicks on the 'create' button in the data table. | Select a form model for the form that is shown when the user clicks on 'create' in the data table on a particular data object row. If additional data is needed for this form, use the Create form additional payload property. |
Create form additional payload | List | Allows to configure payload data for the create form that is available in the create form. | Allows to configure payload data for the create form that is available in the create form for a data object. |
Enable editing | Boolean | When enabled, allows to model a form that is shown when 'edit' is clicked in the datatable for a particular data object instance. | |
Edit form | Reference | The form that is shown when the user clicks on 'edit' in the data table on a particular data object instance row. | Select a form model for the form that is shown when the user clicks on 'create' in the data table on a particular data object row. |
Enable deleting | Boolean | When enabled, allows to delete an data object instance from the data table. | |
Delete form | Reference | The form that is shown when the user clicks on 'delete' in the data table on a particular data object instance row. If not set, a default delete confirmation dialog will be displayed. | Select a form model for the form that is shown when the user clicks on 'delete' in the data table on a particular data object row. If none is set, a default delete confirmation dialog is shown. |
Row URL | Text | URL to go when row is clicked. Please use `$item` and `$rowIndex` to access row data, e.g. https://example.org/search?q={{$item.first_name}}&id={{$rowIndex}} | |
Row URL target | Text | When Row URL is defined, native link target, for example, _self (_blank is default). |
Datasource
Attribute | Type | Description | Category |
---|---|---|---|
Show refresh button | Boolean | Display a button with the ability to reload data in the table. | The Show refresh button flag will show or hide a button to refresh the data of the data table. The Refresh time and Enable delayed refresh are two exclusive settings: The Refresh time will poll constantly for new data using the provided value. Make sure this value is not too low, as it might impact the runtime system when polling too much. The delayed refresh options works differently: when set, it will also poll but each time will wait longer until it stops. Only one of the two options can be set. |
Refresh time | Text | If provided, the content will be updated after the given number of milliseconds. | |
Enable delayed refresh | Boolean | Updates the table with new data in a delayed way and it stops eventually after few seconds. |
Data table
Data table configuration
Attribute | Type | Description | Category |
---|---|---|---|
Show column configuration | Boolean | When true the user will have a tool to show and hide columns and to reorder them. | Advanced configuration properties for the data table. If the Show column configuration flag is checked, the user will have the option to hide, show and reorder columns. Favorite key: a technical identifier. All data tables with this key will share the same favorites. If this is not configured then it is computed based on the form key and the data table id. No data message: the text that should be displayed when there's no data to be displayed in the table. The No data message alignment sets the alignment of that text. |
Show favorite button | Boolean | Display the favorite button. | |
Favorite key | String | The data table favorites identifier. All data tables with this key will share the same favorites. If this is not configured then it is computed based on the form key and the data table id. | |
No data message | Text | Message shown when there is no data. | |
No data message alignment | Selection:
| No data message alignment | |
Conditional formatting | List | Each rule is an Object which should contain a condition and an optional style. Only the first rule with a true condition will be applied. | Optional technical rules that can apply custom colors or CSS classes when a certain condition applies. They can be used to customize the styling of the rows in the data table. |
Pagination
Attribute | Type | Description | Category |
---|---|---|---|
Number of visible elements | Integer | How many elements should be visible in the data table. This implicitly defines the height of the component, as a scrollbar will be shown when there are more elements. Leave empty to use the default setting. | The amount of rows shown in the data table can be set using the Number of visible elements properties. The size options that a user can select for the paging are flexible and can be removed or added with the Page size property. |
Validation
Attribute | Type | Description | Category |
---|---|---|---|
Required | Boolean | The required flag specifies if entering a value for the component is mandatory. | 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. |
Validation Panel Display | Selection:
| Display at validation panel and validation tooltip. | |
Custom validations | List | List of additional validations to apply. | The data object data table 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. |
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 data object data table 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. |
Invocation
Advanced
Attribute | Type | Description | Category |
---|---|---|---|
Events | List | The data object data table 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
Columns
Attribute | Type | Description |
---|---|---|
Model Id | Text | This is a unique id for the component. |
Label | Text | The label attribute adds a label to the component. |
Alignment | Selection:
| How text in this column is aligned. |
Sortable | Boolean | Defines if the columns are sortable, identified by arrows next to the column title. |
Width | Integer | Width of the control. |
Maximum width | Integer | The maximum width of the column, in pixels. |
Minimum width | Integer | The minimum width of the column, in pixels. If there is extra room, the column will fill available space (up to the max-width, if set). |
CSS Class | Text | A custom CSS class (optional). |
Display | Selection:
| |
displaySettings | BasicFormList |
displaySettings
Attribute | Type | Description |
---|---|---|
Format | Text | The optional format for the date e.g.: 'DD.MM.YYYY' -> '10.01.2014' 'MMMM DD, YYYY' -> 'January 10, 2014' 'dddd DD MMM, YYYY' -> 'Friday 10 Jan, 2014' (based on momentJs). |
Format | Text | |
Fraction size | Integer |
Create form additional payload
Attribute | Type | Description |
---|---|---|
Name | Text | A human-readable name. |
Expression | Text | Validation passes when this expression is true. |
Conditional formatting
Attribute | Type | Description |
---|---|---|
Condition | Text | An expression that determines whether this row will apply. |
CSS class | Text | A custom CSS class that can be used to customize the visualisation. |
Color | Text | Font color to apply. CSS style format, e.g. lightblue, #f00 |
Background color | Text | The background color applied (use hex values). |
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. |