3.15 KPI-Indikatoren — Visuelle Kennzahlen in Spalten

3.15 KPI-Indikatoren — Visuelle Kennzahlen in Spalten

Anleitung für Kundenadministratoren · UDM Admin Client

1

Überblick — Was sind KPI-Indikatoren?

Ein KPI-Indikator zeigt einen Spaltenwert als visuelles Element an — z. B. als farbigen Kreis (Ampel), Fortschrittsbalken, Badge oder Sternebewertung. Anstelle des Rohwerts sieht der Anwender eine sofort erfassbare Visualisierung, deren Farbe und Darstellung anhand konfigurierbarer Schwellwerte oder eines Farbgradienten bestimmt wird.

KPI-Indikatoren funktionieren in allen Ansichtselementen, die Spalten darstellen:

  • Tabellenansicht (Grid)
  • Baumansicht (TreeView)
  • Listenansicht (ListView)
  • Infokarte (InfoCard)
Voraussetzung KPI-Indikatoren werden in der Spaltenkonfiguration einer Ausgabespalte definiert. Die Grundlagen zur Spaltenkonfiguration finden Sie in der Anleitung 3.14 Spaltenkonfiguration.
2

Darstellungsarten

UDM bietet fünf verschiedene KPI-Darstellungsarten:

Darstellungsart Beispiel Beschreibung
Ampel
(TrafficLight)
15 %   52 %   88 %
Farbiger Kreis, der je nach Wert eine Farbe annimmt.
Einsatz: Status, Risiko, Qualität
Fortschrittsbalken
(ProgressBar)
25 %
60 %
92 %
Horizontaler Balken, der den Wert als Anteil eines Maximalwerts darstellt.
Einsatz: Projektfortschritt, Auslastung
Trendpfeil
(TrendArrow)
−12 %   0 %   +8 %
Pfeil-Icon, das anhand des Werts nach oben, seitwärts oder unten zeigt.
Einsatz: Veränderung gegenüber Vorperiode
Badge
🕑 Offen ⚙ In Arbeit ✔ Erledigt
Farbiger Chip mit optionalem Text und Icon.
Einsatz: Kategorisierung, Status-Label
Sternebewertung
(Rating)
★★★★★  Niedrig
★★★★  Hoch
Stern-Anzeige (1 bis N Sterne) für Bewertungen oder Prioritäten.
Einsatz: Bewertungsskalen, Prioritäten
UserClient → KPI-Indikatoren in einer Grid-Spalte
ProjektStatusPrioritätAuslastung
Projekt Alphaon trackhoch82 %
Projekt Betaverzögertkritisch112 %
Projekt Gammaon tracknormal64 %
Projekt Deltaat riskhoch95 %
3

Auswertungsmodi

Jeder KPI-Indikator arbeitet in einem von zwei Modi, die bestimmen, wie aus dem Spaltenwert eine Farbe und Darstellung abgeleitet wird:

Modus Beschreibung Geeignet für
Schwellwerte Sie definieren eine geordnete Liste von Regeln. Die erste zutreffende Regel bestimmt Farbe und Darstellung. (Standard) Diskrete Zustände, Textvergleiche, Ampel-Logik
Gradient Farbe und/oder Balkenlänge werden linear interpoliert zwischen einem Minimal- und Maximalwert. Kontinuierliche Werte wie Prozentzahlen, Auslastung
4

KPI einrichten — Schwellwert-Modus

  1. Spaltenkonfiguration öffnen

    Öffnen Sie die Spaltenkonfiguration der gewünschten Spalte (Schieberegler-Symbol in der Ausgabespalten-Tabelle).

  2. KPI-Bereich aufklappen

    Im unteren Teil der Spaltenkonfiguration finden Sie den Bereich „KPI-Indikator“. Wählen Sie die gewünschte Darstellungsart (z. B. Ampel).

  3. Schwellwert-Regeln anlegen

    Klicken Sie auf „Schwellwert hinzufügen“ und konfigurieren Sie für jede Regel:

    Operator Pflicht Vergleichsoperator (z. B. Kleiner als, Größer oder gleich, Zwischen, Ist Null, Text enthält)
    Wert Pflicht Der Vergleichswert (numerisch oder Text, je nach Operator)
    Wert bis Optional Nur bei Zwischen-Operator: obere Grenze des Bereichs
    Farbe Pflicht CSS-Farbe als Hex-Code (z. B. #28a745 für Grün)
    Icon Optional FontAwesome-Klasse (z. B. fa-solid fa-check) oder ein PNG-Bild
    Label Optional Anzeigetext anstelle des Rohwerts (nur bei Badge-Darstellung)
    Tooltip Optional Zusatzinformation, die beim Hover angezeigt wird
  4. Wert neben dem Indikator anzeigen (optional)

    Aktivieren Sie „Wert anzeigen“, um den numerischen Wert zusätzlich neben dem Indikator darzustellen. Über das Feld „Wertformat“ können Sie das Anzeigeformat steuern (z. B. 0 %).

  5. Speichern

    Speichern Sie die Konfiguration. Die Spalte zeigt nun den KPI-Indikator anstelle des Rohwerts.

Verfügbare Operatoren

Operator Beschreibung
Kleiner alsWert < Vergleichswert
Kleiner oder gleichWert ≤ Vergleichswert
GleichWert = Vergleichswert
Größer oder gleichWert ≥ Vergleichswert
Größer alsWert > Vergleichswert
ZwischenWert liegt zwischen zwei Vergleichswerten
Ist NullWert ist nicht gesetzt
Ist nicht NullWert ist gesetzt
Text gleichTextwert stimmt exakt überein
Text enthältTextwert enthält den Vergleichstext
Tipp: Reihenfolge beachten Die Schwellwert-Regeln werden von oben nach unten ausgewertet. Die erste zutreffende Regel gewinnt. Ordnen Sie die Regeln daher vom spezifischsten zum allgemeinsten Fall — z. B. zuerst „Kleiner als 30“, dann „Kleiner als 70“, zuletzt „Größer oder gleich 70“.
5

KPI einrichten — Gradient-Modus

Im Gradient-Modus definieren Sie einen Wertebereich und zwei Farben. Die Farbe wird linear zwischen Start und Ende interpoliert:

Minimalwert Untere Grenze des Wertebereichs (Standard: 0)
Maximalwert Obere Grenze des Wertebereichs (Standard: 100)
Startfarbe Farbe für den Minimalwert (Standard: Rot #dc3545)
Endfarbe Farbe für den Maximalwert (Standard: Grün #28a745)
Farbe skalieren Farbe proportional zum Wert interpolieren
Balken skalieren Balkenlänge proportional zum Wert berechnen (nur bei ProgressBar)
„Wert anzeigen“ im Gradient-Modus Auch im Gradient-Modus können Sie „Wert anzeigen“ aktivieren, um den numerischen Wert neben dem Indikator darzustellen. Über „Wertformat“ steuern Sie das Anzeigeformat (z. B. 0 %).
6

Vererbung der KPI-Einstellungen

KPI-Einstellungen werden — wie alle Spalteneinstellungen — hierarchisch vererbt:

Objekt (Entity) → Datenquelle → Ansichtselement

Auf Datenquellen- und Ansichtselement-Ebene können Sie steuern, wie die KPI-Einstellungen der Elternebene behandelt werden:

Modus Verhalten
Erben Übernimmt die KPI-Einstellungen der Elternebene vollständig. Eigene Einstellungen werden nur verwendet, wenn die Elternebene keine hat. (Standard)
Überschreiben Ignoriert die Elternebene komplett und verwendet ausschließlich die eigenen KPI-Einstellungen.
Tipp Definieren Sie KPI-Indikatoren möglichst auf Objekt-Ebene (im Feld-Detail), damit sie automatisch in allen Datenquellen und Ansichtselementen wirken. Überschreiben Sie nur dort, wo eine abweichende Darstellung benötigt wird.
7

Praxisbeispiele

Beispiel 1: Status-Ampel mit Schwellwerten

Die Spalte „Fortschritt“ soll als Ampel dargestellt werden:

  • KPI-Darstellungsart: Ampel (TrafficLight)
  • Schwellwert 1: Kleiner als 30 → Rot (#dc3545)
  • Schwellwert 2: Kleiner als 70 → Gelb (#ffc107)
  • Schwellwert 3: Größer oder gleich 70 → Grün (#28a745)
  • „Wert anzeigen“ aktiviert, Wertformat: 0 %

Beispiel 2: Status-Badge mit Text und Icon

Die Spalte „Status“ soll als farbiger Chip mit Icon dargestellt werden:

  • KPI-Darstellungsart: Badge
  • Schwellwert 1: Text gleich Offen → Blau (#0d6efd), Icon: fa-solid fa-clock, Label: Offen
  • Schwellwert 2: Text gleich In Arbeit → Orange (#fd7e14), Icon: fa-solid fa-gear, Label: In Arbeit
  • Schwellwert 3: Text gleich Erledigt → Grün (#28a745), Icon: fa-solid fa-check, Label: Erledigt

Beispiel 3: Fortschrittsbalken mit Gradient

Die Spalte „Auslastung“ soll als Fortschrittsbalken mit Farbverlauf dargestellt werden:

  • KPI-Darstellungsart: Fortschrittsbalken (ProgressBar)
  • Auswertungsmodus: Gradient
  • Minimalwert: 0, Maximalwert: 100
  • Startfarbe: Grün (#28a745), Endfarbe: Rot (#dc3545)
  • „Farbe skalieren“ und „Balken skalieren“ aktiviert
  • „Wert anzeigen“ aktiviert, Wertformat: 0 %

Beispiel 4: Sternebewertung für Prioritäten

Die Spalte „Priorität“ (Werte 1–5) soll als Sterne dargestellt werden:

  • KPI-Darstellungsart: Sternebewertung (Rating)
  • Der Spaltenwert bestimmt die Anzahl der gefüllten Sterne

Beispiel 5: Trendpfeil für Veränderungen

Die Spalte „Abweichung“ soll als Trendpfeil dargestellt werden:

  • KPI-Darstellungsart: Trendpfeil (TrendArrow)
  • Schwellwert 1: Kleiner als 0 → Rot (#dc3545), Pfeil nach unten
  • Schwellwert 2: Gleich 0 → Grau (#6c757d), Pfeil seitwärts
  • Schwellwert 3: Größer als 0 → Grün (#28a745), Pfeil nach oben
UserClient → KPI-Karten mit Trend-Pfeilen
Neukunden
+12
▲ Wachstum
Aufträge
0
→ Stabil
Reklamationen
-3
▼ Rückgang
8

Häufige Fragen

Kann ich KPI-Indikatoren nur im Ansichtselement setzen?

Nein, KPI-Einstellungen können auf jeder Ebene gesetzt werden: Objekt, Datenquelle und Ansichtselement. Wird ein KPI auf Objekt-Ebene definiert, gilt er automatisch auch in Datenquellen und Ansichtselementen (sofern nicht überschrieben).

In welchen Ansichtselementen funktionieren KPI-Indikatoren?

KPI-Indikatoren funktionieren in allen Ansichtselementen mit Spaltenanzeige: Grid, TreeView, ListView und InfoCard.

Funktionieren KPI-Indikatoren auch mit Textwerten?

Ja. Im Schwellwert-Modus stehen die Operatoren Text gleich und Text enthält zur Verfügung. So können Sie z. B. Status-Texte als farbige Badges darstellen. Der Gradient-Modus ist hingegen nur für numerische Werte geeignet.

Was passiert, wenn kein Schwellwert zutrifft?

Wenn keine der definierten Schwellwert-Regeln auf den aktuellen Wert zutrifft, wird der Rohwert ohne Indikator angezeigt.

Kann ich KPI-Indikatoren mit Enrichments kombinieren?

Ja. Enrichments werden vor dem KPI-Rendering ausgewertet. Sie können also z. B. erst einen Wert per Math-Enrichment berechnen und dann auf das Ergebnis einen KPI-Indikator anwenden.

Wo finde ich die Spaltenkonfiguration?

In der Ausgabespalten-Tabelle der Datenquelle oder des Ansichtselements: Klicken Sie auf das Schieberegler-Symbol (fa-sliders) in der Zeile der gewünschten Spalte. Auf Objekt-Ebene erreichen Sie die Konfiguration über den Detail-Dialog des Feldes → Subdialog „Anreicherung“. Details: 3.14 Spaltenkonfiguration.