Senseforce 2.0 Manual
Search…
Overview
General
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 three sub widgets per widget group. Currently, the sub-widgets you can define are "Text" and "Progress bar" sub-widgets, but there will be more sub-widget types in future releases.
Creating an overview widget
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
Adding sub-widgets
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 three sub-widgets. When you already have three 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").
- 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.
Text sub-widgets
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
Color conditions
Progress bar sub-widgets
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.
If you select Progress bar as the sub-widget type you will have the same settings as you would see in a normal progress bar widget. The only difference is that when defining the boundaries of the progress bar, you can only select columns from the datasource that has been selected in the general settings of the overview widget, or use fixed values for your minimum and maximum boundary values.
To add color conditions in an overview widget, navigate to the Colors tab in the widget editor.
Example overview widget with a text sub-widget and a progress bar sub-widget
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. Thats 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
Changing sub-widgets order
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.
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 of a color condition in an overview widget (note that there is no select for a datasource)
Example for changing the order of a sub-widget in the widget group
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
value1 column is between 0 and 5, is only getting applied in the third widget group, because its the only widget group where the value1 value is between 0 and 5.
Example of applied color conditions
Last modified 4mo ago