...

However, in order to create reports with this reporting framework, it is important that you're familiar with the concept of Command and Data Pipeline. If not, please follow the link to read more about it and then come back to this guide.

...

In case this pipeline will be run within the next 30 minutes, the data is returned from the cache.

Report Config Attributes

The Report Config is the main configuration file for a report. Here you can define the title, description, charts of the report and from where the report data should be loaded from.

In order to create a new report and show it as a new entry in your apps tiles listing, you have to add the report config as a new property to this path in the property store:

global/app/tld.domain.myapp/report/<reportname>

Whereas <reportname> is a lower-case and unique name for the report in a format supported by the property path.

The content type of the report config property must be application/json; type=report.

You can also create it in the web ui in section LOW CODE -> Properties using the Report wizard.

The most basic structure of this JSON document must be like this:

{  
  "title": "The title of your report",
  "description": "Description of your report",
  "type": "CHART_TYPE",
  "data" : {...},
  "options": {...}
}

title

The title defines the title of the report to be displayed in the web ui and in other locations.

This can be a static text or an i18n uri like $uri:i18n:myTitle for example. See: Internationalization (i18n)

description

The description is optional and describes the intention of the report.

This can be a static text or an i18n uri like $uri:i18n:myDescription for example. See: Internationalization (i18n)

icon

Each report can have an individual icon. This value must be a code name from the Google Material Icons as listed here: https://fonts.google.com/icons

This value is optional. If not given, the default icon is shown.

color

The color of the report icon. If not specified, the secondary color is used, which depends on the style settings. By default this is a blue color like this:

...

The color value can be a hexadecimal value, like this:
"color": "#FFA500"

Or it can be a constant selected from the Colors palette.

For example you could use the color palette constant “green” like this:
"color": "green"

...

Another example:

"color": "red-8"

...

hidden

This optional attribute defines whether the report should be shown as tile inside the app ("hidden": false) or not ("hidden": true).

The list can be still loaded by its URL if required.

If this attribute is missing, "hidden": false is used as a default.

type

The type of the chart to be displayed. Please refer to the Chart.js sample documentation and select the key of the chart you would like to display. Example keys are: line, bar, radar, doughnut, bubble and many more.

data

Defines the data to be consumed by this chart. How this data structure looks like depends on the selected chart. Refer to the Chart.js documentation for the selected chart about it.

This data can be a static JSON embedded here, or a PIPEFORCE URI pointing to a pipeline or property as the data source.

options

This section defines configuration options for the selected chart as documented in Chart.js.