OKR Tracker Widget – Team-Ziele transparent im Intranet

Übersicht

Das OKR Tracker Widget macht Team-Ziele zu einem täglichen Touchpoint statt zu einem Quartals-PowerPoint. Jeder OKR mit Progress-Bar, Status-Color-Code und Owner – live aus einer Data Table, die das Strategy-Team wöchentlich aktualisiert.

Warum dieses Widget?

Die meisten OKR-Programme leiden an Sichtbarkeits-Lücken. Das Strategy-Team kennt die Ziele, das Management kennt die Ziele – aber das einzelne Team-Mitglied sieht sie höchstens beim Quartals-Kickoff und vergisst sie zwei Wochen später. Wer nicht weiß, woran das Team arbeitet, kann seinen Beitrag nicht einordnen.

Das OKR Tracker Widget löst das mit einem einzigen Mittel: die OKRs sind auf der Intranet-Startseite. Nicht im Strategy-Wiki, nicht im PowerPoint, nicht in einem separaten OKR-Tool – sondern dort, wo die Mitarbeitenden ohnehin jeden Morgen vorbeischauen.

Architektur

Wie schon bei Kudos Wall und Idea Box ist die Persistenz-Schicht eine Data Table. Hier mit sechs Spalten:

Im Unterschied zu Kudos und Idea Box gibt es kein Submit-Form im Widget. OKRs werden vom Strategy-Team direkt in der Data Table gepflegt – das ist der richtige Workflow für strategische Daten, die nicht von beliebigen Mitarbeitenden eingereicht werden.

Hauptfunktionen

1. Progress-Bar mit dynamischer Farbe

Die Bar-Farbe wechselt mit dem Status: grün bei on_track, amber bei at_risk, rot bei off_track, Akzentfarbe bei done. Das passiert direkt im Inline-Style:

1<div class="h-full rounded-full" style="width: {{this.progress}}%;
2  background-color: {{#if (eq this.status 'off_track')}}#dc2626{{else}}{{#if (eq this.status 'at_risk')}}#f59e0b{{else}}{{../settings.accent_color}}{{/if}}{{/if}};">
3</div>

Das ist hartes nested Handlebars, aber es funktioniert – und der Effekt ist sofort lesbar: rote Bar = Aufmerksamkeit nötig.

2. Vier Status, vier Badge-Farben

On Track (grün), At Risk (amber), Off Track (rot), Erreicht (blau). Genau wie bei der Idea Box: vier eq-Helper, vier Tailwind-Klassen-Sets, ein concat für den Translation-Key.

3. Owner sichtbar

Wer verantwortlich ist, steht direkt unter dem Key Result. Das schafft Klarheit im Team und macht aus dem Tracker einen Accountability-Hebel, nicht nur ein Reporting-Tool.

4. Quartal-Badge

Oben rechts ein farbig gefülltes Badge mit dem aktuellen Quartal („Q2 2026“). Editor-Setting, weil sich das Quartal nur viermal pro Jahr ändert.

Konfiguration

7 Settings, alle Editor-time:

• tableGuid – Pflicht
• Titel, Untertitel, Quartal-Label
• maxItems – Slider 3–12
• accent_color – Color Picker
• theme – Light oder Dark

Technisch

• Sortierung: sortBy=progress&sortDir=desc – die ehrgeizigsten OKRs zuerst
• Limit: 50 Rows per fetch, Slider zeigt davon 3–12
• Performance: < 500 ms Initial Render
• Mehrsprachig: Deutsch und Englisch out-of-the-box

Externe Systeme anbinden

Der OKR Tracker funktioniert sofort mit der integrierten Data Table – aber du kannst OKR-Daten auch direkt aus deinem bestehenden Goal-Management-Tool synchronisieren.

• Lattice – OKRs und Fortschritt aus Lattice automatisch ins Intranet spiegeln
• 15Five – Quartals-Ziele und Check-in-Daten aus 15Five live anzeigen
• Perdoo – OKR-Fortschritt aus Perdoo direkt auf der Startseite visualisieren
• Betterworks – Team-Ziele und Alignment-Daten aus Betterworks übernehmen
• Jira – Epics und deren Fortschritt als OKRs im Intranet darstellen

Häufige Fragen

Können Mitarbeitende OKRs editieren?

Nein – das ist Strategy-Team-Aufgabe. Das Widget hat absichtlich kein Submit-Form. Wer Mitarbeiter-Vorschläge sucht, nimmt die Ideenbox .

Wie kommt der Progress in die Tabelle?

Drei Wege: (1) manuell vom OKR-Owner wöchentlich, (2) per Sync-Skript aus einem externen OKR-Tool wie Lattice oder Workday, (3) über die Data-Table-API direkt aus einem BI-System.

Verwandte Widgets

• Charts & Dashboards – für KPIs mit Charts
• Kudos Wall – um OKR-Erfolge sofort anzuerkennen
• Ideenbox – für Mitarbeiter-Ideen mit Status-Workflow