Depending on how it’s configured, the Card displays several informations :

Card schema

Each part can be configured, as detailed below.

Configuring KPI, Left Value, Right Value

For each of KPI, Left Value, Right Value, the following can be configured :

Show/hide

Each can be displayed or hidden by checking Show Value (or Show KPI) :

Card Show Value configure

Type

The value displayed at each position can be one of several types :

Card Value Type configure

Absolute Difference

Shows the difference between the Value and the Target.

Calculation = Value - Target

Card Value Type Absolute Difference example

Percent of Target

Shows the % of value to target

Calculation = 100 * Value / Target

Card Value Type Pct Target example

Actual Value

Shows the value of the Value field itself.

Calculation = Value

Card Value Type Value example

Target Value

Shows the value of the Target field itself.

Calculation = Target

Card Value Type Target example

Percent of Change

Shows the % of variation to target.

Calculation = 100 * (Value - Target) / Target

Card Value Type Pct Change example

Color

The value displayed at each position can have :

  • the Direction Color that depends on the distance between the Value and the Target, and whether we consider that “good” or “bad” (see below “Colors and result interpretation”)
  • or a Custom Color that is fixed

Card Color Type configure

Caption

The Caption can be displayed or hidden by checking Show Caption.
The Caption’s text and Caption Color can be configured :

Card Caption configure

KPI Value formatting

The calculated KPI has its own value formatting, because it is a calculated value and isn’t listed for Value Formatting.

Card KPI formatting

Element sizes

The relative font sizes of elements can be configured :

Card Font Scale configuration

Card Font Scale example

This Font Scale is relative, so that it remains responsive when the widget is viewed on different devices.

Colors and result interpretation

The font and symbol of the distance to target has a color :

  • green for “good”
  • yellow for “near target” or “similar”
  • red for “bad”

Card Colors good-bad configure

Card Colors good-bad example

High/Low Is Good

Card Direction configuration

You can define high values as being “good” or “bad” by selecting the Direction configuration in Colors :
  • with High is Good, values that go above target will be displayed with the Good Color, and values that go below target will be displayed with the Bad Color
  • with Low is Good, values that go above target will be displayed with the Bad Color, and values that go below target will be displayed with the Good Color

Thresholds for the “similar” state

Instead of displaying the “similar” state only when the value equals the target exactly, you can configure thresholds to accept an interval of values that are similar to the target.
These lower threshold and higher threshold are configured under KPI thresholds :

Card thresholds configure

Other colors

When no Target is configured, only the Value is displayed, with a constant color.
This color can be configured under Default Color :

Card Color default configure

Card Color default example

The Separator Color can also be configured :

Card Color Separator configure

Full detail or KPI only

By default, when the Card has a Target Value, it displays both values as text, as well as a KPI with its value as text.
It is also possible to instead simplify this display and have only the KPI in a very readable way.

For this, select Show Indicator Only :

Card Indicator Only configure

Card Indicator Only example

Title style

The Title is especially useful when a “Split into many Widgets” field is bound.
It can be hidden or shown, the text, position and color can be configured :

Card Title configuration

Card Title example
Last modified: Sep 13, 2021

Feedback

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.

Post your comment on this topic.

Post Comment