Table¶
Insight Tables visualize rows of data. Tables offer a huge amount of additional features like inline-editing, multi edit, filter popups, pagination and many more for easy viewing and working with big amounts of data.
Configuration¶
To open tables from menus, use the menu action table open.
To configure tables the list configuration applies. The additional table specific features are described on this page.
Where¶
Tables can be displayed below Insight Planning Gantt charts, as standalone or inside a Details View. The following is an example of opening a table as part of Insight Planning.
{
"label": "Teamplanung",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "team-workorder-planning"
},
"tab": {
"label": "Planung Teams"
},
"table": {
"tree": "jobtask"
}
}
]
}
Table settings¶
A table can have different settings.
pageSize
: The number of rows shown per page. Default:10
.pageSizeOptions
: List of pageSize options the user can select from. Default:[]
.edit
: Defines if values in the table can be edited. Default:false
.hideCsvDownload
: Hides the Csv Download button: Default:false
.hideSorter
: Hides the sort buttons of the table. Default:false
.useSelectedItems
: Activates the ability to collect selected tree nodes by user clicks. These selectedItems are then forwarded to the js filter function, if configured. Default:false
.csv
: Defines how the attributes are exported by the csv export. Default:undefined
.filterDelay
: Delay time in ms after which the filter action is triggered. Default: When setConfig.searchDelay
, otherwise500
.loadAll
: Loads all table items. Default:false
.collapse
: Defines if the table is collapsed on startup. Default:false
.sticky
: Makes table headers and pagination sticky when scrolling. Tables which are displayed under another component will use themaxHeight
value. Standalone tables will stretch the whole page. Default:undefined
.filterTriggerOnEnter
: Manual input in the table filter boxes does not trigger automatically and instead will only trigger when pressing ENTER. Default:false
.
"settings": {
"sticky": {
"maxHeight": "500px"
}
}
sumRow
: Appends a row to the bottom of the table which contains the sum of the defined attributes. If the attribute is editable the sum also updates if the user changes the input value.attributes
: Contains an array of all attribute names which should be summed.name
: The name of the attribute. If the attribute contains values which are not numbers they are not summed.js
: An Javascript function which is called when the sum changes. The following values or functions are available.value
: The new summed value.setClass()
: Sets a css class which is added to the table cellsetValue()
: Sets the value which will be shown
"settings": {
"sumRow": {
"attributes": [
{
"name": "ATTRIBUTENAME1"
},
{
"name": "ATTRIBUTENAME2",
"js": ""
}
]
}
}
- A table supports columnConfiguration.
popupFilter
: Shows filter popups for all or the specified columns. Default:false
.datagrid
: Settings to configure the datagrid.enabled
: Sets the initial datagrid mode to enabled/disabled. Default:false
toggleVisible
: Sets if the datagrid toggle button is visible. Default:false
"settings": {
"datagrid": {
"enabled": true,
"toggleVisible": true
}
}
Filter¶
Insight Tables support different ways to filter data: - column based filtering: Input field above every column or specific columns to filter all records based on that input against the column the input was made on. - filter actions: Menu actions above the table. Stay active once clicked, click again to deactivate the filter again. - default filter button: Click on blue highlighted values to use them as filter values for current column. - filter js function: Configurable js function to filter all records against. - filter popups: Advanced UI that lists all distinct values of that column. Can manually select specific values, offers autocomplete.
Column based filtering¶
To enable column based filtering, you can specify all or specific columns that will only show rows that match the entered value.
Example all columns are filterable:
"filter": {
"attributes": true
}
Example specific columns are filterable:
"filter": {
"attributes": [
"MESSAGE",
"REPORTDATE"
]
}
Filter Actions¶
Pre-configured filter actions can be displayed in the table menu for easier filtering. See filter actions for configuration details.
Default Filter Button¶
Any table will have a default filter button for usability if certain criteria are met. Clicking the default filter button will color cells blue that are clickable for the now activated filter mode. Clicking any blue cell selects it's value to filter against instead of having to type it manually. A default filter button is automatically displayed when:
- There is at least one column that is configured as filterable
- At least one of the filterable columns does not have filterSupressed: true configured
- The table has data to visualize
Column filtering through JavaScript function¶
To enable column based javascript filtering specify a javascript function in filter.js that returns true for rows to show. Available variables are:
userData
: The data of the userprofileobject
: The record of the current processed row.selectedObjects
: The items of the filtered objects
Example:
"filter": {
"js": "return containsAll(object.properties.qualificationNames,'|',filterObjects,'classificationName')"
}
Filter Popups¶
Filter poups are popups for each column that list all available options in that column to be filtered for, similar to Excel. Users can easily select what they want to filter for. For tables on root elements, a server call is issued to retrieve all possible options. For tables on children, all data is loaded and the list of possible options is then calculated client side.
All columns example:
"settings": {
"popupFilter": true
}
Specified columns example:
"settings": {
"popupFilter": ["ATTRIBUTENAME1", "ATTRIBUTENAME2"]
}
Column sorting¶
See sorting
To enable javascript sorting,you can specify a javascript function in sort.js that returns the sorted list of entries.
Available variables are:
userData
: The data of the userprofileitems
: All table row items. Must be the result of the function.
Available functions are
sortByFollower(items, idName, followerName)
: Can be used to sort the items by follower. idName is the attribute-name of the id. followerName is the attribute-name of the follower. Example:
"filter": {
"js": "return sortByFollower(items, 'id','follower')"
}
"filter": {
"js": "return items.reverse()"
}
Tooltips¶
You can define custom tooltips für each table cell. Example:
"table": {
"attributes": [
{
"name": "CREATEBY",
"tooltip": "Message: ${MESSAGE}, Created on: ${CREATEDDATE}"
}
]
}
If you configure a tooltip for regular nodeConfig attributes, that tooltip is shown as the table column header tooltip.
{
"name": "someNode",
"attributes": [
{
"name": "CREATEBY",
"tooltip": "Message: ${MESSAGE}, Created on: ${CREATEDDATE}"
}
]
}
CSV Export¶
By default a CSV Export button is displayed for each table. You can permanently disable the button with:
"table": {
"settings": {
"hideCsvDownload": true,
"csv": {
"...": "..."
}
}
}
The csv settings can be configured as shown here.
Master Detail¶
You can configure a Master-Detail view for Insight Tables. When activated and a user clicks on any given row in the table, the details view of that object will be loaded next to the table. Additionally, you can also configure the sizes of the table and appearing details view.
"table": {
"width": "ten",
"details": {
"width": "six"
},
"attributes": []
}
Highlights¶
You can dynamically highlight rows. The business logic to determine which rows to highlight can be implemented in a backend script that automatically gets called whenever a page change in a table occurs. Example:
"table": {
"attributes": [
{"name": "id"}
],
"settings": {
"highlight": {
"backend": "business-suite",
"name": "markierung/getMarkierungen",
"params": {
"massnahmeId": "${$context.$record.properties.massnahmeId}"
}
}
}
}
Important: The resulting json send back by the backend script needs to adhere to a specific structure, where the key is the path of the table row node and the value is the css class to apply. Example:
{
"tree/node/1": "red",
"tree/node/2": "blue"
}
If you have static information available on how to color each row or cell, the following configuration applies. Example:
"list": {
"attributes": [
{
"name": "systemId",
"colorClass": "bg-color-light-yellow color-red",
"headerColorClasses": "bg-color-light-yellow color-red"
}
]
}
Refresh behaviour¶
If you add the typical CRUD behaviour via menu actions to tables, you should take a few things into consideration.
Create actions¶
If you create a new item for an already loaded table, the table won't know that a new item for it exists, it needs to be reloaded. There is currently no direct way to reload a table, so you need to refresh it's parent. It is not currently possible to refresh a standalone table via menu actions. Example:
{
"label": "Create entry",
"icon": "icon-arrow-right-circle",
"action": "request",
"script": {
"backend": "business-suite",
"name": "createTableEntry",
"params": {
"activityId": "${id}"
}
},
"then": {
"action": "refresh",
"actionValues": [
{
"paths": ["tree/parentNode/${id}"]
}
]
}
}
Update actions¶
If you update an already existing item in a table, you only need to configure an empty refresh action after the update action for Insight tables to get notified upon successful update to refresh that specific item. This case only applies when calling the update action from the specific item. Example:
{
"label": "Update entry",
"icon": "icon-arrow-right-circle",
"action": "request",
"script": {
"backend": "business-suite",
"name": "updateTableEntry",
"params": {
"activityId": "${id}"
}
},
"then": {
"action": "refresh"
}
}
If you update a specific table item through a script triggered outside of that table, you have to notify the specific path of that item for Insight tables to reload that row. Example:
{
"label": "Update entry from somewhere else",
"icon": "icon-arrow-right-circle",
"action": "request",
"script": {
"backend": "business-suite",
"name": "updateTableEntry",
"params": {
"activityId": "${id}"
}
},
"then": {
"action": "refresh",
"actionValues": [
{
"paths": ["tree/node/${id}"]
}
]
}
}
Remove actions¶
If you use the remove action for deleting a table entry, special behaviour kicks in and Insight tables automatically know to refresh themselves. This works both when using a remove action on a specific table item, as well as removing a specific table item through a script triggered from somewhere else. A manual refresh action is not necessary. Example:
{
"label": "Remove entry",
"icon": "icon-arrow-right-circle",
"action": "request",
"script": {
"backend": "business-suite",
"name": "removeTableEntry",
"params": {
"activityId": "${id}"
}
}
}