Comment on page
Overview
The Overview widget allows you to automatically display a so-called widget group multiple times. How often a widget group is displayed is determined by the number of rows the datasource of the overview widget has.
To understand how the overview widget is built, let's see how it looks like and how it is structured:
Example of an overview widget
Anatomy of an overview widget
An overview widget is structured as follow:
- Overview Widget: The widget itself acts as a container around multiple widget groups. On the overview widget, you define how many widget groups should be displayed in a single row, how many total widget groups you want to display, and most importantly the datasource you want to use to generate your widget groups.
- Widget Group: A widget group can be described as a "smaller" widget inside the overview widget. The number of widget groups that get displayed will be determined by the number of rows that the selected datasource has. So if your datasource only has one row, only one widget group will be displayed, if it has ten rows, ten widget groups will be displayed, etc.
- Sub-widget: You can define up to five sub widgets per widget group. Currently, the sub-widgets you can define are "Text", "Progress bar" and "Gauge chart" sub-widgets, but there will be more sub-widget types in future releases.
To create an overview widget, simply create a new widget and select Overview as the type.
You can then define some general properties for your overview widget in the General tab:
- No. of columns: Defines how many columns your overview widget should have, or in other words, how many widget groups you want to show in one line. Allowed is any value between 1 to 10.
- Datasource type / Datasource: Here you can select the datasource the overview widget should use. The values of this datasource will not only be shown in the widget, the number of widget groups displayed also depends on how many rows are in this datasource.
- Max no. of rows: With this setting, you can limit how many rows should be taken from the selected datasource to generate widget groups. So if you specify 10 here, only 10 widget groups will be displayed, even if your datasource has 50 rows. Allowed is any value between 1 to 30.
With these settings alone you should already see widget groups being generated, although they don't have any content yet:
Overview widget with empty widget groups
To add sub-widgets you first need to navigate to the Sub-Widgets tab. In there you can click on the Add Sub-Widget button to create a new sub-widget.
You can only create five sub-widgets. When you already have five sub-widgets the Add Sub-Widget button will no longer be visible.
Clicking on the newly created sub-widget will take you to the configuration. Every sub-widget, regardless of the selected type, has the following configuration options:
- Type: Defines the type of the sub-widget (eg. "Text", "Progress bar", "Gauge chart").
- Show Header / Sub-Widget Header: Defines if you want to show a header text in this sub-widget, if yes, what the header should be. This is basically the same as the header in every other widget type.
- Sub-Widget Height: Defines the height of the sub-widget in pixel.
If you select Text as the sub-widget type you will have the possibility to add text entries exactly like you would in a normal text widget. The only difference is that you can't select a datasource, you can only select columns from the datasource that has been selected in the general settings of the overview widget.
Example overview widget with one text sub-widget
If you select Progress bar as the sub-widget type, you will have the same options as in a normal progress bar widget. The only difference is that you can't select a datasource for your progress bars value column, as well as for your progress bar boundaries. Instead, you will only have the option to select columns from the datasource you've selected in the general settings in the overview widget.
Example overview widget with one progress bar sub-widget
If you select Gauge chart as the sub-widget type, you will have the same options as in a normal gauge chart widget. The only difference is that you can't select a datasource for your gauge chart value column, as well as for your gauge boundaries and statuses if you use a conditional gauge. Instead, you will only have the option to select columns from the datasource you've selected in the general settings in the overview widget.
Example overview widget with one gauge chart sub-widget
Example overview widget with a text sub-widget and a progress bar sub-widget
You can change the position of a sub-widget in the widget group by dragging and dropping the lines from the Sub-Widgets tab.
Example for changing the order of a sub-widget in the widget group
Color conditions in overview widgets work pretty much the same as in every other widget type, but there are some minor differences. To get more info on how color conditions work in general, please take a look at the general documentation here.
To add color conditions in an overview widget, navigate to the Colors tab in the widget editor.
Here we see the first difference to the color conditions in other widget types, namely that color conditions in the overview widget are not defined for the widget as a whole, but for sub-widgets. That's why your first step after navigating to the Colors tab is to select a sub-widget to which you want to add color conditions.
Changing color conditions for a selected sub-widget
After opening a color condition, all the available settings are pretty much the same as in color conditions of all other widget types (text color, background color, min and max values). The difference here is that, instead of selecting any datasource, all color conditions in overview widgets are bound to the datasource of the overview widget itself (defined in the General tab). This is why you can only select columns from this datasource and not any other datasource.
Example of a color condition in an overview widget
Because every color condition is automatically bound to the datasource of the overview widget, every color condition of every widget-group will get compared to the dataset row of the widget group itself. This makes it possible that color conditions are applied in a sub-widget of one widget group, but not in another widget group.
In the example below, you can see for example that a color condition defined on the first sub-widget, that sets the background color to a red color if the value of the
Value 1 column is between 0 and 50, is only getting applied in the first and fourth widget groups, because they the only widget groups where the Value 1 value is between 0 and 50.
Example of applied color conditions
Last modified 1yr ago