This article is outdated, you can access the most current version here: https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/elements/AvailableElements.html
Article Content
Introduction
Elements are the actual visual thing that you want to show on the screen. In ONE DATA reports this was referred to as "report container". Elements have neither a fixed position, size nor layout directly assigned. They serve as a pool of visualization which you can add and configure on their own independently from their actual use in the App. To place an element in the UI you have to add it in the respective layout. This decoupling allows us to use an element in different layouts without having to configure it for every layout. Also it is possible to use the same element multiple times in a single layout.
Available Elements
Here is a list of the currently available Elements in Apps. For every entry you can get to the respective article by clicking the link.
| Name | Type | Purpose | Eqivalent in classic ONE DATA reports |
| HTML | html | Define arbitrary HTML to display | Auxiliary Container |
| Highcharts | highcharts | Define any highcharts based visualizations | Every highcharts based chart type |
| Table | table | Show and explore data in tabular way | Table |
| Filter | filter | Used to filter data via single or multi select | |
| KPI | kpi | Define any KPI based visualizations | KPI |
| ProgressKPI | progressKpi | Define any Progress KPI based visualizations | |
| ResetFilterButton | button | Button which resets all set filters | |
| Execute Button | button | Button to execute a workflow | "Save and Run" Button |
| Toggle Button | button | Button to switch between two states | |
| CheckBox | checkBox | CheckBox to change the Boolean value of a variable | |
| VariableConfigSingleSelect | dropdown | Dropdown to select defined variable Values | |
| Data Input | dataInput | Input values which will be assigned to a column of your datasource | |
| Data Select | dataSelect | Select values of a column of your datasource. | |
| Variable Input | variableInput | Define values for certain variables |
A more in-depth describtion of the elements can be found in the following sections.
Element Refresh Options
| Property | Type | Description |
| dontRefreshOnDependencyConfigUpdate | boolean | If enabled your element won't rerender in case of config changes outside the element config (eg. datasources). |
Example:
Element Source Options
A collection of options for data manipulation. The simple options are always executed in a fixed order (column selection, sql, aggregation, sorting). For more advanced options see the "transformations" property, but beware that the simple options will be ignored as soon as the "transformations" object is present.
| Property | Type | Description | Example Value |
| sourceOptions. aggregations | array | The aggregation operation for each column of the table is specified separately. If a column is not included in the aggregations it is ignored and not part of the resulting table | "aggregations": [ { "aggregationOperation": "AVG_OPERATION", "column": "columnName", "summaryFunction": "AVG" }, { "aggregationOperation": "COUNT_OPERATION", "column": "columnName", "summaryFunction": "COUNT" }, { "aggregationOperation": "GROUP_OPERATION", "column": "columnName", "summaryFunction": "GROUP" }, { "aggregationOperation": "MAX_OPERATION", "column": "columnName", "summaryFunction": "MAX" }, { "aggregationOperation": "MIN_OPERATION", "column": "columnName", "summaryFunction": "MIN" }, { "aggregationOperation": "SUM_OPERATION", "column": "columnName", "summaryFunction": "SUM" } ] |
| sourceOptions. columns | array | A list of columns, which should be displayed in the given order. | "columns": [ "int", "string" ] |
| sourceOptions. pagination | object | The pagination for an FRT or Datatable. type:
| "pagination": { "type": "offset" | "random" // The page that should be // loaded when opening the app "page": 1, // The default size a page should have "size": 100, // Indicator if the total amount // pages should be computed "totalPages": false } |
| sourceOptions. retrieveOther Columns | boolean | Also retrieve the columns, which are not given in the "columns" property and append them, without special ordering, after the given columns. | "retrieveOtherColumns": true |
| sourceOptions. sort | array | Allows sorting columns either ascending or descending. Multi-level sorting is only applied on columns where sorting on the previous columns resulted in a group of cells with equal entries. | "sort": [ { "name": "columnName", "order": "asc" | "desc" } ], |
| sourceOptions. sql | string | A custom sql statement which is executed on the FRT or Datatable | "sql": "SELECT * FROM..." |
| sourceOptions. transformations | array | A more advanced method for configuring the data manipulations. The transformations are always executed in the order given. | "transformations": [ { "type": "aggregation", "config": [ { "aggregationOperation": "AVG_OPERATION", "column": "columnName", "summaryFunction": "SUM" } ] }, { "type": "columnSelection", "config": { "columns": [] } }, { "type": "filter", "config": { "column": "columnName", "columnType": "INT", "range": { "min": "", "max": "" }, "values": [ "1", "2", "3" ] } }, { "type": "order", "config": { "name": "columnName", "order": "asc" } }, { "type": "sql", "config": "SELECT * FROM..." } ] |
| transformation type: aggregation | object | The aggregation operation for each column of the table is specified separately. If a column is not included in the aggregations it is ignored and not part of the resulting table. | { "type": "aggregation", "config": [ { "aggregationOperation": "AVG_OPERATION", "column": "columnName", "summaryFunction": "SUM" } ] } |
| transformation type: columnSelection | object | A list of columns, which should be displayed in the given order. | { "type": "columnSelection", "config": { "columns": [ "1", "2", "testColumn" ] } } |
| transformation type: filter | object | A filter for filtering a column by a specified range or value. | { "type": "filter", "config": { "column": "columnName", "columnType": "INT", "range": { "min": "", "max": "" }, "values": [ "1", "2", "3" ] } } |
| transformation type: order | object | Sort a specified column by a given order. | { "type":"order", "config": { "name": "columnName", "order": "asc" | "desc" } } |
| transformation type: sql | object | A custom sql statement which is executed on the FRT or datatable | { "type":"sql", "config": "SELECT * FROM..." } |
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article