KPI card

The KPI cards portlet allows for a quick view of specific values; Key performance indicators. The card and values can be configured in different sizes and with color rules to draw the user's attention to value changes.


General data is required for all portlets.

General configuration

Advanced settings

Initialize load: When checked, the KPI card will be refreshed every time the user enters the page. If not checked, the KPI card will only be refreshed on listening commands.


The portlet can listen to the following events:

  • On Row Selection

  • On Refresh

  • On Point Selection

The portlet can send the following events:

  • On Row Selection

  • On Refresh

Listeners configuration


Data source

The portlet data source configuration enables the portlet to execute specified queries towards the chosen database connector to fetch data or fetch data from a workflow.

  • Database: uses a flow connector to retrieve data from a database

  • Workflow: runs a workflow to retrieve data

Data source configuration

Workflow source configuration

Data source columns

Manage: the columns can be configured as a grid view as well as the list view. This view can help for a better overview and quicker configuration when a lot of columns are in use.

Value in Presentation must be filled in before data source columns can be configured.

Click Execute in the data source section to fetch the columns. Each column can be configured with:

  • display name

  • column type

There are a number of column types to choose from. The default column type is text.

  • Text: use to display column as a text fields

  • Number: use for number fields where the number is an integer

  • Decimal: use for numbers with decimals

  • Date: will display the column as a date with no time

  • Date & Time: use to display date and time


Under presentation, add the data which is to be displayed in the KPI card. All presentation objects are configured with a fixed size, default color and an optional color rule (for configuration see Background color rule).

  • Description: the description to describe the value.

  • Value: the value which is to be displayed as the primary information in the portlet.

  • Unit: the unit of the value.

  • Bottom left corner: the information displayed in the bottom left corner of the portlet. Configure with Widget type:

    • Data Field - input value will be displayed as it is, ie if the input is the text Area: Central, that is what will be shown

    • Trend - will be displayed as an arrow in the direction as per the input value. Input must be an integer between -2 and 2, where -2 is an arrow pointing down and 2 is an arrow pointing up.

  • Bottom right corner: the same configuration as the Bottom left corner but the information is displayed to the right.

Background color rules

The KPI card can have its background color changed (default color). It can also have one or more color rules, for example, to be used to make the background color change to indicate the value is below or above a certain threshold. A color rule will always have priority over the default color and override this if its condition is met.

To enter a new rule:

  • click New

  • select a color

  • enter the condition field, operator and value

  • preview the result or save

To edit an existing rule, click on the rule and it expands into edit mode.


Change the header text color and add a header stripe by configuring style.

Style configuration

Last updated