Skip to main content

Service Model Data Table

v3.17.0+

Data table that invokes the service registry from a form and displays the result in a table.

Properties​

General​

AttributeTypeDescriptionCategory
Model Id RequiredString

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. 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 , like its purpose, usage in other models, etc.

Label Expression usage possibleTranslatable to different languagesText

The label attribute adds a label to the component.

Label position Selection:
  • Left
  • Top

The position of the label, you can choose between left or top.

Label tooltip Expression usage possibleTranslatable to different languagesText

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 Expression usage possibleText

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.

Default value Expression usage possibleText

If the value is not set, the default value will be used.

Datasource​

AttributeTypeDescriptionCategory
Path Text

When using a REST data source, this is the location in the response data to get the row collection.

Storage RequiredSelection:
  • ID
  • Full value

Specifies how the data retrieved by the service should be stored in the variable. Choose 'ID' if only the ID (specified by the lookupId) 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 service.

Service Model RequiredServiceModelWithSearchAndLookup

Service Model

Permission groups Group Selection

User groups that will see this button. All the users will see it if this attribute is left empty. Note: The default permission checks defined in the action button are also applied when executing it.

Show refresh button Boolean

Display a button with the ability to reload data in the table.

Refresh time Expression usage possibleText

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​

dataTableDetails​

AttributeTypeDescriptionCategory
Show column configuration Boolean

When true the user will have a tool to show and hide columns and to reorder them.

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 favorite button Expression usage possibleBoolean

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 Translatable to different languagesText

Message shown when there is no data.

No data message alignment Selection:
  • top-left
  • top-center
  • top-right
  • middle-left
  • middle-center
  • middle-right
  • bottom-left
  • bottom-center
  • bottom-right

No data message alignment

Columns ServiceModelDataTableColumns

A list of objects containing column definitions.

Selectable Selection:
  • Single
  • Multiple

Will make rows selectable using Single (radio buttons) or Multiple (checkboxes).

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.

paginationDetails​

AttributeTypeDescriptionCategory
Show pagination Expression usage possibleBoolean

Enable the pagination bar and buttons.

Auto-hide pagination Expression usage possibleBoolean

Hides the pagination when there are less rows than the page size. Furthermore, it will hide the pagination in case there are no rows.

Client side pagination Boolean

Enable browser-side pagination.

Validation​

AttributeTypeDescriptionCategory
Required Expression usage possibleBoolean

The required flag specifies if entering a value for the component is mandatory.

Validation Panel Display Selection:
  • Show
  • Only message
  • Hide

Display at validation panel and validation tooltip.

Custom validations List

List of additional validations to apply.

Rendering​

AttributeTypeDescriptionCategory
Description Expression usage possibleTranslatable to different languagesText

The description attribute adds a description to the component.

Ignored Expression usage possibleBoolean

If true the component will be hidden and the value will not be part of any payload.

Visible Expression usage possibleBoolean

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 Expression usage possibleBoolean

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.

Invocation​

Advanced​

AttributeTypeDescriptionCategory
Events List

The 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​

AttributeTypeDescription
Column Id RequiredText

Provide a unique id for the column. For some data sources this is used if the accessor is not a string or to overwrite the column id used in server-side calls.

Accessor Text

Path of the row value to show. This is used to read the actual information.

Label Translatable to different languagesText

Title in the header of the column

Filterable Selection:
  • true
  • false

Defines if the column is filterable; overrides the table filterable property.

Filter type Selection:
  • Text
  • Select
  • Date (range)

Control column's filter type.

Sortable Selection:
  • true
  • false

Defines if the columns are sortable, identified by arrows next to the column title.

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).

Control width Integer

A fixed width for the column. This overrides both min and max width options

Alignment Selection:
  • Left
  • Right
  • Center
  • Justify

How text in this column is aligned.

Style class Text

A custom CSS class (optional).

Show Expression usage possibleBoolean
Data component DataComponentType

Can contain the JSON definition of other components. Use this sparingly, as there is no check nor validation being done on component JSON pasted here.

Display Selection:
  • Text
  • Date
  • Date without time
  • Double
  • User ID
displaySettings BasicFormList

displaySettings​

AttributeTypeDescription
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
Escape Html Boolean

When enabled, the Html content of the column will be escaped and shown as text.

Conditional formatting​

AttributeTypeDescription
Condition RequiredExpression usage possibleText

An expression that determines whether this row will apply.

CSS class Expression usage possibleText

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​

AttributeTypeDescription
Expression RequiredExpression usage possibleText

Validation passes when this expression is true.

Error message RequiredTranslatable to different languagesText

Message to display when the validation fails.

Events​

AttributeTypeDescription
Event label RequiredText

This is a unique id for the component.

Event type Selection:
  • On value change

The type of event emitted by the form field.

Expression Expression usage possibleText

Validation passes when this expression is true.

Result variable Text

Capture the result of the expression in a result variable.