Article Content

  1. Introduction
  2. Available Elements
  3. Element Refresh Options
  4. Element Source Options


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
HighchartshighchartsDefine any highcharts based visualizationsEvery highcharts based chart type
TabletableShow and explore data in tabular wayTable
FilterfilterUsed to filter data via single or multi select
KPI
kpi
Define any KPI based visualizations
KPI
ProgressKPIprogressKpiDefine 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

CheckBoxcheckBoxCheckBox 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 InputvariableInputDefine 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:

  "dontRefreshOnDependencyConfigUpdate": true || false


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.


PropertyTypeDescriptionExample Value
sourceOptions.
aggregations
arrayThe 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
arrayA list of columns, which should be displayed in the given order.
  "columns": [
    "int",
    "string"
  ]
sourceOptions.
pagination
objectThe pagination for an FRT or Datatable.
type:
  • "offset" allows jumping between pages of a certain (configured) size
  • "random" allows to disable pagination and only retrieves a given amount of samples randomly
  "pagination": {
     "type": "offset" | "random"
     // The page that should be
     // loaded when opening the app
     "page": 1,
     // The default size 
     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..."
  }