07. Juli 2025 4 Min.

Status Labels im Seitenbaum: das Wichtigste immer sichtbar

Development UX & UI TYPO3

Mit TYPO3 Version 13 kam eine aufregende neue Möglichkeit hinzu, wichtige Statusinformationen übersichtlich direkt im Seitenbaum anzuzeigen. Das AfterPageTreeItemsPreparedEvent erlaubt es, den PageTree zu modifizieren und zu erweitern, nachdem TYPO3 mit dem Aufbereiten der Informationen fertig ist.

Was jetzt möglich ist

Wenn man nun einen eigenen EventListener für dieses Event registriert, erhält man von TYPO3 ein Item-Array mit allen Seitenbaum-Einträgen, die in der aktuellen Iteration verarbeitet wurden. Bereits in TYPO3 v12 konnte man so z.B. das angezeigte Icon verändern. Wichtig ist hier jedoch zu beachten, dass diese Anpassungen sich nur auf den PageTree (z.B. im Seitenmodul) auswirken, nicht jedoch auf das Listenmodul (welches nicht als Seitenbaum gerendert wird).

In Version 13 kann man nun auch Label und Status-Informationen mit Icons hinzufügen, die im Anschluss von TYPO3 aggregiert, nach Dramatik (severity) und Priorität sortiert und dem Tooltip-Text hinzugefügt werden.

Ein Tupfer Farbe: das Label

Die erste neue Möglichkeit ist das Hinzufügen eines einfachen Farbstriches links am Seitenbaum.

// use TYPO3\CMS\Backend\Dto\Tree\Label\Label;

$item['labels'][] = new Label(
  label: 'Translation missing: French',
  color: '#c0ffee',
  priority: 3,
);

Werden auf ein Item mehrere Label gesetzt, gewinnt visuell das mit der höchsten Prio. Die Informationen aller Label-Texte werden aggregiert und dem ToolTip angehängt.

Da man auf den ersten Blick nur einen Farbstrich sieht, sollte die Information für diese TYPO3-Instanz von globaler Bedeutung sein: beispielsweise das Fehlen einer Übersetzung, oder ein zu kleines Teaser-Image in den Seiteneigenschaften, was an diversen anderen Stellen genutzt wird. So kann die Einhaltung von Best Practices verbessert werden.
Die Farbcodes (color) kann man frei wählen; jedoch sollte man prüfen, ob sie sowohl im Light als auch im Dark Mode gut aussehen und ausreichend Kontrast bieten.

Wenn ein bisschen Farbe nicht reicht: Status Information mit Icon

Die zweite Möglichkeit, Informationen im Seitenbaum zu visualisieren, ist der Einsatz der Status Icons (rechts vom Seitentitel).

// use TYPO3\CMS\Backend\Dto\Tree\Status\StatusInformation;
// use TYPO3\CMS\Core\Type\ContextualFeedbackSeverity;

$item['statusInformation'][] = new StatusInformation(
  label: $statusLabel,
  severity: ContextualFeedbackSeverity::WARNING,
  priority: 1,
  icon: 'f7seocheck_in_pagetree',
);

Auch hier gewinnt bei Hinzufügen mehrerer Icons zu einem Item das mit der höchsten Severity und der höchsten Priorität. Die Severity kennt aktuell fünf Eskalationsstufen.

NOTICE = -2;    // grau
INFO = -1;      // blau
OK = 0;         // grün
WARNING = 1;    // gelb
ERROR = 2;      // rot

Wenn im SVG-Icon an den passenden Stellen fill="currentColor" steht, übernimmt das Icon auch die Farbe der Severity.
Minimales Beispiel-SVG mit fill und opacity:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path fill="currentColor" opacity="0.2" d="M1 1h14v14H1V1z"/>
</svg>

Ein Anwendungsbeispiel

Für die OpenGraph- und SEO-Auszeichnungen im Quelltext greifen wir im Fallback auf Felder zu, die auch anderweitig ausgelesen werden. Daher ist es hier nicht sinnvoll, im Backend harte Zeichenbegrenzungen zu erzwingen. Daher habe ich testweise einen PageTreeSeoCheck geschrieben, in dem für alle Seiten, für die SEO relevant sind (z.B. keine SysFolder oder noindex-Seiten) die Felder title und description auf korrekte Befüllung im SEO-Sinn untersucht und das Ergebnis als nettes Icon mit entsprechendem Tooltip-Text ausgegeben werden.

Ziel ist es, die Redakteur:innen dazu zu motivieren, das Icon auf Grün zu setzen. Dies erreichen sie, indem der Title nicht länger als 60 Zeichen ist und die Description im Optimalfall zwischen 55 und 200 Zeichen liegt.

In ein paar Wochen will ich hier noch ein Update hinzufügen, ob das was gebracht hat und was so das Feedback der Kolleg:innen dazu war.

Fazit

Mit dem EventListener AfterPageTreeItemsPreparedEvent kann man den Seitenbaum um viele Informationen anreichern und damit den Redakteur:innen das Leben einfacher machen.

Technisch gesehen sind hier wenig Grenzen gesetzt, doch sollte man beim Entwickeln immer die Performance und die Erkennbarkeit im Hinterkopf haben. Niemandem ist geholfen, wenn der PageTree 30 Sekunden zum Laden braucht und dann blinkt und leuchtet wie ein Weihnachtsbaum im Einkaufszentrum. Außerdem sollte man beachten, dass die Informationen nur beim Neuladen des Seitenbaums geprüft werden, zum Beispiel nach dem Login oder wenn man manuell den PageTree neu lädt. Dadurch sind die angezeigten Informationen ggf. nicht immer die aktuellsten.

Mit Bedacht eingesetzt gibt es hier schöne neue Möglichkeiten, die Inhaltspflege übersichtlicher zu gestalten und Best Practices ohne harte Grenzen (wie Pflichtfelder oder maximale Zeichenanzahl in einem Textfeld) durchzusetzen.