Skip to content

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 set Config.searchDelay, otherwise 500.
  • 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 the "maxHeight" 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 cell
    • setValue(): 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 is 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 - filter actions - default filter button - filter js function - filter popups

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 columns 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 userprofile
  • object: 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 userprofile

  • items: 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.

"list": {
    "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",
            "clientProperties": {
                "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:

"list": {
    "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.

"list": {
    "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:

"list": {
    "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",
            "clientProperties": {
                "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}"
        }
    }
}