RootITUp.Ticket.Usability bietet visuelle Steuerelemente für die Ticket-Ansicht in Matrix42. SLA-Fortschrittsbalken zeigen die verbleibende Bearbeitungszeit, Status-Chips machen den aktuellen Ticket-Status auf einen Blick erkennbar.
Verfügbare Komponenten
| Komponente | Funktion |
|---|---|
rootitup-chip-readonly | Farbiger Status-Chip (Nur-Lesen) |
rootitup-progress-bar | Generischer Fortschrittsbalken |
rootitup-service-level-agreement-progress-bar | SLA-spezifischer Fortschrittsbalken mit automatischer Berechnung |
Architektur
Die Extension wird als Front-End Workspace in Matrix42 integriert. Das AngularJS-Modul RootITUp.Ticket.Usability registriert sich über mx.workspacesConfig.registerModule().
Genutzte Matrix42-Services
mx.sb.public.service– HTTP-Aufrufe und Benachrichtigungenmx.internationalization– Datumsformatierung und Lokalisierung
Data Query Abhängigkeit
Die SLA-Komponente benötigt eine Data Query mit der ID:
5ed9627f-38f9-cf02-b4fa-08de22b89aebDiese Query wird mit der Extension ausgeliefert und liefert SLA-Daten für ein Ticket basierend auf dessen ObjectId.
Installation
Extension Gallery
- Matrix42 Administration öffnen
- Zu Administration → Extensions → Extension Gallery navigieren
- Nach „RootITUp.Ticket.Usability” suchen
- Auf „Install” klicken und warten, bis die Installation abgeschlossen ist
Diese Extension ist kostenlos verfügbar.
Konfiguration (Integration)
Ticket-Vorschau anpassen
- Layout öffnen: Administration → User Interface → Layouts → Ticket Preview
- Control platzieren:
rootitup-service-level-agreement-progress-barper Drag-&-Drop einfügen - ObjectId binden:
$ctrl.form.objectIdzuweisen - Typ festlegen:
'reaction'oder'solution'
Status-Chip für Ticket-Status
- Control platzieren:
rootitup-chip-readonlyeinfügen - Text binden: Z. B.
$ctrl.form.data.State_DisplayString - Farbe binden: Z. B.
$ctrl.form.data.State_Color
Komponenten im Detail
Status-Chip (rootitup-chip-readonly)
Ein einfacher, read-only Chip zur Anzeige von Status-Labels. Die Farbe passt sich automatisch an.
Bindings
| Binding | Typ | Beschreibung |
|---|---|---|
text | String | Anzeigetext (z. B. „In Bearbeitung”) |
color | String | CSS-Farbe (z. B. var(--mx-success-color), #FF0000) |
Verwendung
<rootitup-chip-readonly
text="'Aktiv'"
color="'var(--mx-success-color)'">
</rootitup-chip-readonly>Farbkorrektur
Die Komponente korrigiert automatisch ungültige Farbformate:
| Eingabe | Korrektur |
|---|---|
0xFF00FF | #FF00FF |
#FFFF00FF | #FF00FF (letzte 6 Zeichen) |
Fortschrittsbalken (rootitup-progress-bar)
Generischer Fortschrittsbalken mit Labels und Unterstützung für angehaltene Zustände.
Bindings
| Binding | Typ | Beschreibung |
|---|---|---|
labelLeft | String | Hauptbeschriftung oben links |
labelRight | String | Sekundäre Beschriftung oben rechts |
labelBottom | String | Tertiäre Beschriftung unten rechts |
progress | Number | Fortschrittswert (0–100) |
color | String | CSS-Farbe für den Balken |
isPaused | Boolean | Optional. Zeigt Pause-Zustand an |
pausedText | String | Optional. Text bei Pause (Standard: „Paused”) |
Verwendung
<rootitup-progress-bar
label-left="'Reaktionszeit'"
label-right="'2h 30m verbleibend'"
progress="65"
color="'var(--mx-warning-color)'">
</rootitup-progress-bar>SLA-Fortschrittsbalken (rootitup-service-level-agreement-progress-bar)
Spezialisierter Fortschrittsbalken für SLA-Anzeige. Berechnet Fortschritt, verbleibende Zeit und Zieltermin automatisch basierend auf dem Ticket.
Bindings
| Binding | Typ | Beschreibung |
|---|---|---|
objectId | String | Pflicht. ObjectId des Tickets |
type | String | Pflicht. SLA-Typ: 'reaction' oder 'solution' |
labelLeft | String | Optional. Überschreibt Standardlabel |
labelRightPrefix | String | Optional. Prefix für verbleibende Zeit |
labelBottomPrefix | String | Optional. Prefix für Zieltermin |
slaWarningThreshold | Number | Optional. Warnschwelle in % (Standard: 75) |
slaBreachThreshold | Number | Optional. Breach-Schwelle in % (Standard: 90) |
Verwendung
<!-- Reaktionszeit -->
<rootitup-service-level-agreement-progress-bar
object-id="$ctrl.form.objectId"
type="'reaction'"
label-left="'Reaktionszeit'">
</rootitup-service-level-agreement-progress-bar>
<!-- Lösungszeit mit angepassten Schwellen -->
<rootitup-service-level-agreement-progress-bar
object-id="$ctrl.form.objectId"
type="'solution'"
label-right-prefix="'Verbleibend: '"
label-bottom-prefix="'Fällig: '"
sla-warning-threshold="80"
sla-breach-threshold="95">
</rootitup-service-level-agreement-progress-bar>Farblogik
Die Balkenfarbe ändert sich automatisch basierend auf dem SLA-Status:
| Zustand | Bedingung | Farbe |
|---|---|---|
| OK | Fortschritt < Warnschwelle | --mx-active-color (Blau) |
| Warnung | Fortschritt ≥ Warnschwelle | --mx-warning-color (Orange) |
| Kritisch | Fortschritt ≥ Breach-Schwelle | --mx-error-color (Rot) |
| Eingehalten | Abgeschlossen, Fortschritt < 100% | --mx-success-color (Grün) |
| Verletzt | Abgeschlossen, Fortschritt ≥ 100% | --mx-error-color (Rot) |
| Pausiert | Status 203 (Pausiert) oder 220 (Gelöst) | --mx-content-hint-color (Grau) |
SLA-Berechnung
- Data Query abrufen: Ticket-SLA-Daten via
POST api/dataQuery/{id} - Priorität abgleichen: SLA-Priorität muss mit Ticket-Priorität übereinstimmen
- Servicezeit-Profil laden: Berechnet Arbeitszeit unter Berücksichtigung von Wochenenden/Feiertagen
- Zeitdifferenz berechnen:
GET api/serviceTimeProfile/{id}/timeDifference
Unterstützte Status
| Status-Value | Status | Verhalten |
|---|---|---|
| 203 | Pausiert | Fortschrittsbalken zeigt Pause-Icon |
| 220 | Gelöst | Fortschrittsbalken zeigt Pause-Icon |
| Andere | Aktiv | Normale Fortschrittsanzeige |
Zieltermin-Anzeige
Nach Abschluss wird neben dem Zieltermin das Ergebnis angezeigt:
- ✅ SLA eingehalten
- ❌ SLA verletzt
Changelog
Version 1.0.0 – Initial Release (25.01.2026)
- ✨ Status-Chip (
rootitup-chip-readonly) für farbige Status-Anzeige - ✨ Generischer Fortschrittsbalken (
rootitup-progress-bar) mit Pause-Unterstützung - ✨ SLA-Fortschrittsbalken mit automatischer Berechnung
- ✨ Unterstützung für Reaktions- und Lösungszeit
- ✨ Servicezeit-Profile für korrekte Arbeitszeitberechnung
- ✨ Anpassbare Warn- und Breach-Schwellen
- ✅ ARIA-Attribute für Barrierefreiheit
- ✅ Matrix42-Theme-Integration (CSS-Variablen)
Häufig gestellte Fragen
Werden Servicezeit-Profile berücksichtigt?
Ja. Die SLA-Berechnung nutzt die Matrix42 API api/serviceTimeProfile/{id}/timeDifference, die Wochenenden, Feiertage und Pausenzeiten korrekt berücksichtigt.
Was passiert, wenn kein SLA-Profil gefunden wird?
Der Fortschrittsbalken zeigt „N/A” und eine Warnung wird in der Konsole protokolliert. Dies kann passieren, wenn die Priorität des Tickets nicht mit einem SLA-Level übereinstimmt.
Lassen sich die Farbschwellen anpassen?
Ja, über die Bindings slaWarningThreshold (Standard: 75%) und slaBreachThreshold (Standard: 90%) im Layout Designer.
Welche Ticket-Status pausieren das SLA?
Die Status-Values 203 (Pausiert) und 220 (Gelöst) werden als „pausiert” behandelt. Der Fortschrittsbalken zeigt dann ein Pause-Icon und den Status-Namen.
Werden zusätzliche Berechtigungen benötigt?
Nein. Die Extension verwendet eine mitgelieferte Data Query und öffentliche Matrix42-APIs. Keine zusätzlichen Berechtigungen erforderlich.
Wie werden ungültige Farbcodes behandelt?
Der Status-Chip korrigiert Farbformate automatisch: 0x-Prefix wird zu #, überlange Hex-Codes werden auf 6 Zeichen gekürzt. Bei fehlender Farbe wird --mx-content-hint-color verwendet.