UDM — 3.16 TimeBadge — Zeitabstände visuell darstellen

1

Überblick — Was ist ein TimeBadge?

Ein TimeBadge zeigt den zeitlichen Abstand eines Datumswerts zur aktuellen Zeit als kompaktes, farbiges Badge an. Anstelle eines rohen Datums wie 31.08.2024 sieht der Anwender sofort „18M“ (18 Monate her) in einer Farbe, die signalisiert, wie „frisch“ oder „alt“ der Wert ist.

TimeBadges unterstützen Vergangenheit und Zukunft: Zukünftige Werte erhalten ein + Präfix (z. B. +7M, +5T).

5M 18M 3J +5T +7M

Voraussetzung TimeBadges werden in der Spaltenkonfiguration einer Ausgabespalte vom Typ DateTime definiert. Die Grundlagen zur Spaltenkonfiguration finden Sie in der Anleitung 3.14 Spaltenkonfiguration.

2

Zeiteinheiten und Anzeige

Das TimeBadge wählt automatisch die passende Einheit für den zeitlichen Abstand:

Abstand	Anzeige	Beispiel
< 1 Stunde	Minuten	`23m`
1–24 Stunden	Stunden	`5h`
1–30 Tage	Tage	`12T`
30 Tage–1 Jahr	Monate	`8M`
≥ 1 Jahr	Jahre (mit einer Nachkommastelle)	`1.5J`, `53.0J`

Zukünftige Werte erhalten zusätzlich ein + Präfix: +5T, +3M.

UserClient → Tickets mit TimeBadge-Spalten

Ticket	Erstellt	Letzte Antwort	Fällig
#4421 Login-Problem	23m	gerade eben	+2T
#4420 Druckdialog	5h	12m	+1T
#4418 Export-Fehler	12T	3T	-2T
#4399 Altlast	18M	8M	-180T

3

TimeBadge einrichten

Szenario Austritt-Spalte als TimeBadge

Sie möchten die Spalte „Austritt“ (Austrittsdatum) als farbiges TimeBadge anzeigen, das sowohl vergangene als auch zukünftige Austritte signalisiert.

Spaltenkonfiguration öffnen
Öffnen Sie die Ausgabespalten-Konfiguration und wählen Sie die gewünschte DateTime-Spalte (z. B. „Austritt“).
TimeBadge aktivieren
Im Konfigurationsbereich finden Sie den Abschnitt „TimeBadge“. Aktivieren Sie die Checkbox. Das UI-Element wird automatisch auf TimeBadge gesetzt (SmartDefault).

Zeitrichtung wählen

Wählen Sie im Dropdown „Zeitrichtung“ die gewünschte Anzeige:

Past	Nur vergangene Werte werden farblich dargestellt (3 Grundfarben)
Future	Nur zukünftige Werte werden farblich dargestellt (3 Grundfarben)
Both	Vergangenheit und Zukunft werden dargestellt (4 Grundfarben: Zukunft-fern, Zukunft-nah, Vergangenheit-nah, Vergangenheit-fern)

Farbpalette wählen

Wählen Sie im Dropdown „Farbpalette“ eine vordefinierte Palette oder Custom:

Palette	Vergangenheit	Zukunft
Default	Grün → Bernstein → Grau	Cyan → Blau → Violett
BluePurple	Cyan → Violett → Grau	Türkis → Blau → Violett
RedOrange	Gelb → Orange → Rot	Grün → Gelb → Rot
Custom	Beliebige Farben über Farbwähler definierbar

Farben anpassen (bei Custom)
Wählen Sie Custom als Palette, werden die aktuellen Vorschaufarben automatisch als Ausgangswerte übernommen. Klicken Sie auf die Farb-Badges, um einzelne Farben über den Farbwähler anzupassen.
Speichern
Speichern Sie das Ansichtselement. Die Spalte zeigt nun farbige TimeBadges im Benutzer-Client.

Tipp: Von Palette zu Custom wechseln Wenn Sie von einer vordefinierten Palette (z. B. BluePurple) zu Custom wechseln, werden die Palettenfarben automatisch als Startwerte übernommen. So können Sie eine vordefinierte Palette als Basis verwenden und einzelne Farben gezielt ändern.

4

Wie die Farbzuordnung funktioniert

TimeBadges verwenden ein dreistufiges Farbsystem, das den zeitlichen Abstand in Farbgruppen und Intensitätsstufen übersetzt:

Abstand	Farbgruppe (Past)	Intensität
< 7 Tage	Gruppe 1 (frisch)	Voll / Leicht
7–180 Tage	Gruppe 2 (mittel)	Voll / Leicht
> 180 Tage	Gruppe 3 (alt)	Leicht / Sehr leicht

Innerhalb jeder Farbgruppe variiert die Opazität (Transparenz) zwischen 100 %, 70 % und 45 %, um feinere Abstufungen zu erzeugen.

Bei der Richtung „Both“ werden vier Farbgruppen verwendet: Zukunft-fern, Zukunft-nah, Vergangenheit-nah, Vergangenheit-fern.

5

Vererbung der TimeBadge-Einstellungen

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

Objekt (Entity) → Datenquelle → Ansichtselement

Auf jeder Ebene können Sie steuern, wie die Einstellungen der Elternebene behandelt werden:

Modus	Verhalten
Erben	Übernimmt die TimeBadge-Einstellungen der Elternebene. Eigene Einstellungen nur, wenn die Elternebene keine hat. (Standard)
Überschreiben	Ignoriert die Elternebene und verwendet die eigenen TimeBadge-Einstellungen.

Tipp Definieren Sie TimeBadges möglichst auf Objekt-Ebene, damit sie automatisch in allen Datenquellen und Ansichtselementen wirken. Überschreiben Sie nur dort, wo eine abweichende Darstellung benötigt wird.

6

Praxisbeispiele

Beispiel 1: Austrittsdatum mit Zukunft und Vergangenheit

Zeitrichtung: Both
Farbpalette: BluePurple
Ergebnis: Vergangene Austritte in Cyan → Violett → Grau, zukünftige in Türkis → Blau → Violett

Beispiel 2: Letzte Änderung (nur Vergangenheit)

Zeitrichtung: Past
Farbpalette: Default (Grün → Bernstein → Grau)
Ergebnis: Kürzlich geänderte Datensätze leuchten grün, ältere verblassen zu Grau

Beispiel 3: Vertragslaufzeit mit Alarm-Farben

Zeitrichtung: Future
Farbpalette: RedOrange
Ergebnis: Bald auslaufende Verträge in Grün (weit weg), bald fällig in Gelb, überfällig in Rot

Beispiel 4: Eigene Firmenfarben

Farbpalette: Custom
Eigene Hex-Farben eintragen (z. B. Firmen-CI-Farben)
Beim Wechsel zu Custom werden die Farben der vorherigen Palette automatisch als Startwerte übernommen

7

Erweiterte Einstellungen (V2)

Die TimeBadge-Konfiguration wurde um mehrere Optionen erweitert:

Einstellung	Beschreibung
Abstufungen (GraduationCount)	Anzahl der Farbabstufungen zwischen den Stützfarben der Palette. Werte von 3 bis 9 möglich (bisher fest 3). Höhere Werte erzeugen feinere Farbverläufe.
Skalierung (Scale)	Bestimmt die obere Grenze der Farb-Schwellen. Auto (Standard): leitet die Skala aus dem Werte-Bereich der Datenquelle ab (Phase 2 liefert den Bereich; bis dahin = Verhalten Monate). Stunden (24 h) · Tage (30 T) · Wochen (~12 Wochen) · Monate (1 Jahr, heutiges Verhalten) · Jahre (10 Jahre) · Jahrzehnte (100 Jahre). Eine feste Skala ist sinnvoll, wenn die Farbe eine fachliche Aussage treffen soll (z. B. Fälligkeiten, Mitgliedschaftsdauer, Geburtsdatum) — dann sind Farben auch über Datensätze hinweg vergleichbar.
Datumsanzeige (ShowDate)	Wenn aktiviert, wird neben dem farbigen Badge das formatierte Datum angezeigt. Nützlich, wenn der genaue Zeitpunkt zusätzlich zur visuellen Einordnung sichtbar sein soll.
Richtung (Direction)	Vergangenheit (Past): Badge für vergangene Zeitpunkte (3 Stützfarben). Zukunft (Future): Badge für zukünftige Zeitpunkte (3 Stützfarben). Beides (Both): Vergangenheit und Zukunft kombiniert (4 Stützfarben).
Benutzerdefinierte Palette	Bei Palette = Custom können die Stützfarben frei gewählt werden. Zwischen den Stützfarben wird automatisch interpoliert (HSL-Farbinterpolation).

8

Häufige Fragen

Funktioniert TimeBadge nur mit DateTime-Spalten?

Ja. TimeBadges berechnen den zeitlichen Abstand zwischen dem Spaltenwert und dem aktuellen Zeitpunkt. Die Spalte muss daher vom Datentyp DateTime sein.

Kann ich TimeBadge mit KPI-Indikatoren kombinieren?

Nein, eine Spalte kann nur ein UI-Element haben: entweder TimeBadge oder KPI-Indikator. Bei Aktivierung des TimeBadge wird das UI-Element automatisch auf TimeBadge gesetzt.

Was zeigt das TimeBadge bei NULL-Werten?

Bei leeren Werten wird ein Strich (—) angezeigt.

Werden die Farben in Echtzeit aktualisiert?

Die Farbe wird bei jedem Laden der Seite neu berechnet. Es gibt keine automatische Aktualisierung während der Sitzung — ein Neuladen der Ansicht aktualisiert alle Badges.

Was bedeutet „Both“ mit 4 Farben?

Bei „Both“ werden getrennte Farbgruppen für Zukunft und Vergangenheit verwendet: Zukunft-fern, Zukunft-nah, Vergangenheit-nah, Vergangenheit-fern. So kann der Anwender auf einen Blick erkennen, ob ein Datum in der Zukunft oder Vergangenheit liegt.