Table Element

Modified on Mon, 11 Apr 2022 at 03:52 PM

This article is outdated, you can access the most current version here: https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/elements/TableElement.html

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")	array	Options 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	string	Property 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	object	Option to set the start and stop editing labels	"labels": { "startEditing": "Start", "stopEditing": "Stop" }
config. editing. defaults	array	Define 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	array	Allows 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	array	Allows 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	array	You 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	array	Allows 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	object	Excel 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

]