Table Element

type = "table"

Tables can be used to show raw data to the user in bulk. It takes data from a Datasource and paginates it if the underlying Datasource supports that.


Properties

Property
Type
Description
Example Value
id
string
The unique id assigned to the Element. This is defined by the user and used to refer to the Element in layouts.
"myElementId"
source
string
The id of the Datasource to take the data from.
"myDataSourceId"
config.
columns
array

Optional list of columns to show. If not specified or set to an empty array, all columns are shown.

The column name is mandatory to identify it. A width can be set in px or %. Otherwise, widths will be distributed among all columns that don't have a width set.

Optionally, it can also be specified whether or not entries in a particular column may be edited by the user (default: true, if edit mode is enabled).

If you set a column label the label is displayed as the column header and tooltip.

esacpeHtml: Option to enable or disable escaping of Html for a column (rendering of Html in table cells )


True = it will be escaped (Html will be displayed like <h1 Headline </h1>)


False = it will be displayed as Html


  "config": {
    "columns": [
      {
        "name": "Company",
        "width": "30%",
        "edit": true,
        "label": "Column 1",
        "escapeHtml": false
      },
      {
        "name": "Rank",
        "width": "60px",
        "label": "Column 2"
        "escapeHtml": true
      },
      {
        "name": "Sector"
      },
      {
        "name": "Country"
      }
    ]
  }

config.
columns
(type:
"actions")
arrayOptions to specify table action.
  {
    "name": "Action",
    "type": "actions",
    "actions": [
      {
        "type": "endpoint",
         // Endpoint to execute
         // with table action
        "endpoint": "likeEndpoint",
        // Label which will be shown
        "label": "Like",
        // Icon which will be shown
        "icon": "",
        // disables the action
        // button for given
        // amount of time after
        // it was clicked
        "disableActionButtons": {
          "forTime": 5
        },
        "variableAssignments": [
          {
            // Technical Workflow or
            // Production Line
            // variable name
            "variableName": "test_var",
            // Variable type
            "variableType": "STRING",
            // Column of the table
             // which contains the value
            "variableValueColumn": "col"
          }
        ],
        // Specific execution messages
        "messages": {
          "started": {
            "headline": " ",
            "message": ""
          },
          "aborted": {
            "headline": "",
            "message": ""
          },
          "error": {
            "headline": "",
            "message": ""
          },
          "failed": {
            "headline": "",
            "message": ""
          },
          "success": {
            "headline": "",
            "message": ""
          }
        },
        "showSpecificErrorMessages": true
      }
    ]
  }
config.
pagination
object

Optional settings for the table pagination.

enabled toggles the option to switch pages. Only works for datasources supporting pagination (e.g. FRT).

showInfo toggles paging information being shown (e.g. current page, rows in current page)

page sets the page to be loaded initially. If not set, defaults to what is set on the datasource.

size sets the page size to be set initially. If not set, defaults to what is set on the datasource.


  "pagination": {
    "enabled": true,
    "showInfo": true,
    "page": 23,
    "size": 25
  }

config.
striped
boolean
Whether table rows should be striped or not.
true
config.
datalabels
boolean
Whether table header should show or hide the data type label.
true
config.
column
MinWidth
stringProperty to set the min width of all columns (except a width is set to a named column in the columns array)
"columnMinWidth": "50px"
config.
title
string
Option to add a title to the table Element.
 "title": "Table Title"
config.
subtitle
string
Option to add a subtitle to the Table Element.
 "subTitle": "Subtitle"
config.
sorting
object

Option to enable or disable sorting and to set a sorting order for a column.

Can be done for one specific column in the config.columns array as well.


  "sorting": {
    "enabled": true,
    "column": "",
    "order": "asc"
  }
config.
valueFilter
boolean

Option to enable or disable value filters.

Can be done for one specific column in the config.columns array as well.


  "valueFilter": true
config.
rangeFilter
boolean

Option to enable or disable range Filters.

Can be done for one specific column in the config.columns array as well.


  "rangeFilter": true
config.
editing
object

Options to enable / disable editing of the table.

If delete is enabled you can delete rows by right clicking on it.


  "editing": {
    "add": true,
    "edit": true,
    "delete": true
  }
config.
editing.
labels
objectOption to set the start and stop editing labels
  "labels": {
    "startEditing": "Start",
    "stopEditing": "Stop"
  }
config.
editing.
defaults
arrayDefine default values for columns.
It may includes columns not shown in the table.
  "defaults": [
    {
      "name": "id",
      "value": "100"
    },
    {
      "name": "first_name",
      "value": "Hans"
    },
    {
      "name": "gender",
      "value": "Male"
    }
  ]
config.
editing.
saveTo
Micro

Service
object
  "saveToMicroservice": {
    "version": "",
    // Workflow ID 
    "id": "d6a1600f-0f65-406d-b6e5-95cfd7aae809",
    "fullDeletedRows": true
  }

Used to save changes to a microservice.
It has three configuration options:
  • id: The id of the workflow that processes the changes.
  • version: The version of the respective workflow. If this option is not set, the latest version is used.
  • fullDeletedRows: Indicates if only the ROW_IDs of the deleted rows are sent to the workflow, or the whole row. The recommended option is "true".

To use this feature you also need to add the following to your workflow:
1. Three input processors (The indicator must be exactly the same!)

  • Input_added_rows: A table with the rows added
  • Input_updated_rows: A table with the updated rows. Every row contains a Row-ID column identifying the edited row. The row id can be used to match against the original FRT
  • Input_deleted_rows: A table containing only a column with the row IDs of the deleted rows. Can be used to match against the original FRT.

2. Four workflow variables are needed:

  • row_id_col: The name of the row-Id column in the inputs
  • data_id: The ID of the FRT operated on. May be empty if frt_id is set.
  • frt_id: The FRT-ID of the FRT operated on. May be empty if data_id is set.
  • user_jwt: The current JWT token of the invoking user.
The microservice may output a table via Microservice Output called "Output_messages".

This table has two columns status, message. Possible values for status are SUCCESS, ERROR, WARNING.

For every message a popup is shown in the apps client after the microservice execution is finished (messages of a type may be aggregated in a single popup).

The status defines the visual appearance of the popup.

If the output is omitted, a generic success or error popup is shown depending on whether there were errors during microservice execution. In the error case it will include the execution errors.
config.
editing.
value

Options
arrayAllows providing a autocompletion/selection input to search and choose predefined values to be set.
column:
 The column to provide the selection for.
source: The id of the datasource to take values from.
valueColumn: The column holding the values.
labelColumn: The (optional) column holding labels to show instead of the values.
sourceOptions: Same as the sourceOptions on Elements.
syncSets: Same as the syncSets on Elements.
  "valueOptions": [
    {
      "column": "item",
      "source": "itemDetails",
      "valueColumn": "itemId",
      "labelColumn": "itemName",
      "sourceOptions": {},
      "syncSets": []
    }
  ]
config.
editing.
value
Options.
sync
Options
arrayAllows to sync table cell values.

sourceColumn: Name of the column of which the value should be used to filter this columns options.
targetColumn: Column name of this columns value options source which should be filtered by the value of the source column
  "syncedOptions": [
   {
      "sourceColumn": "month",
      "targetColumn": "month"
    },
    {
       "sourceColumn": "year",
       "targetColumn": "year"
    }
  ]
config.
editing.
hooks
arrayYou can influence the editability and validity of cells using hooks.
There are builtin hooks for different typical cases, but it's also possible to develop your own hooks.
The hooks are applied in the order they are defined and scoped by the event they are applied for.
Hooks can take an optional config to influence their behavior.

Builtin hooks:
  • notEmpty: Validates a column if its value is not null or "".
  • validateOnValid: Validates one column if another column (given in the config) is valid.
  • validateOnSet: Validates one column if another column (given in the config) is not empty.
  • enableOnValid: Makes one column editable if another column (given in the config) is valid.
  • enableOnSet: Validates one column editable if another column (given in the config) is not empty.


Example:

  "hooks": [{
    // The column to apply the hook to
    "column": "myColumn",
     // the lifecycle event to apply the hook on
    "on": "<validate|change:cell|change:row>",
    // the function to inject for this hook
    "function": "notEmpty"
  },{
    // The column to apply the hook to
    "column": "myOtherColumn",
     // the lifecycle event to apply the hook on
    "on": "<validate|change:cell|change:row>",
    // the function to inject for this hook
    "function": "<validateOnValid|enableOnValid|
                  validateOnSet|enableOnSet>",
    // Config for the hook function, 
    // in this case a column reference
    "config": { "column": "myColumn" }
  }]
config.
value

Mapping
arrayAllows mapping values in table columns to values of a column in an arbitrary data source
column: The column to replace values in.
source: The id of the datasource to take the values from.
joinColumn: The column to "join" the sources by. Values should match values in "column".
targetColumn: The column the values to display are taken from.
  "valueMapping": [
    {
      "column": "item",
      "source": "itemDetails",
      "joinColumn": "itemId",
      "targetColumn": "itemName" 
    }
  ]
config.
escape

Html
boolean

Option to allow or disable escaping of Html ( rendering of Html in table cells ).


True = it will be escaped (Html will be displayed like <h1 Headline </h1>)


False = it will be displayed as Html


  "escapeHtml": true
config.
download
object
Options to enable / disable download of the data of the table:

full: Will show a "Download full dataset" option (All pages of the table) if its set to true.

paged: Will show a "Download current page" option (Only current page of the table) if its set to true
  "download": {

    "full":true,
    "paged":true
  },
config.
download
.csv
object
Csv download options:

charset: the character encoding to use for the exported csv


delimiterToken: The token to use for delimiting cells in the exported csv


escapeToken: The token to use for escaping special characters in the exported csv


numberFormat: The number format defines how numbers are serialized to text in the exported csv

  "csv": {
    "charset":"UTF_8", 
     // or "WINDOWS_1252"
    "delimiterToken": ",",
    "escapeToken":"\\\\",
    "numberFormat":"DE", 
    // or "EN"
    "stringEscapeToken": "\""
  }
config.
download
.excel
objectExcel download options

sheetName: The name of the Excel worksheet that contains the data. This sheet will always be the first one in the Excel workbook.

additionalSheets: Definition of worksheets to be included in the export in addition to the data of the table. This allows adding additional information to the export.

additionalSheets.sheetName: The name of the worksheet. This needs to be unique for the downloaded file.

additionalSheets.includeHeader: Whether a header-row with the name of the columns should be inserted. The default value is true.

additionalSheets.tableSchema: The columns of the worksheet and their types

additionalSheets.data: The data that should be inserted in the worksheet.


Example:
  "excel": {
    "sheetName": "Test sheet",
    "additionalSheets": [
      {
        "sheetName": "Additional worksheet",
        "includeHeader": false,
        "tableSchema": [
          {
            "name": "some_col",
            "index": 0,
            "type": "STRING"
          }
        ],
        "data": [
          {
            "some_col": "Test"
          }
        ]
      }
    ]
  }
config.
rowFilter
object
Config of the table row filter options.
  "rowFilter": {
    // Apply set filter to
    // own table / datasource
    "applyRowFilterOnTable": false,
    // Configuration to 
    // pass values to variables
    "variableConfig": [
      {
        // Column from which the
        // value should be taken
        "column": "Country",
        // Name of the variable where
        // it should be applied
        "variableName": "testVar"
      },
      {
        "column": "Sales",
        "variableName": "testVar2"
      }
    ],
    "syncSetConfig": [
      {
        // Column(s) which should be
        // applied to a syncSet
        "column": "Country"
      }
    ]
  }


Example

  "elements": [
    {
      "id": "frtTable",
      "type": "table",
      "source": "frt_testSource",
      "showResetFilter": {
        "enabled": true,
        "label": "Reset filter",
        "icon": "arrowleft"
      },
      "config": {
        "pagination": {
          "enabled": true,
          "showInfo": true
        },
        "striped": false,
        "sorting": {
          "enabled": true,
          "column": "",
          "order": "asc"
        },
        "editing": {
          "add": true,
          "edit": true,
          "delete": true
        },
        "valueFilter": true,
        "rangeFilter": true,
        "columns": [
          {
            "name": "Month",
            "edit": true
          },
          {
            "name": "Num1",
            "edit": true
          }
        ]
      }
    }
    // .. more elements
  ]