PageTree Status Labels: key information in view

TYPO3 version 13 added an exciting new way to display important status information directly in the PageTree. The AfterPageTreeItemsPreparedEvent allows you to modify and extend the PageTree after TYPO3 has finished preparing the information.

New pos­sib­lit­ies

When registering your own EventListener for this event, you will be presented an item array from TYPO3 with all the page tree entries that are processed in the current iteration. In TYPO3 v12 you could already change the displayed icon, for example. However, it is important to note that these adjustments only affect the PageTree (e.g. in the page module), but not the list module (which is not rendered as a page tree).

In version 13, you can now also add labels and status information with icons, which are then aggregated by TYPO3, sorted by severity and priority and also added to the tooltip text.

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

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

If several labels are set for an item, the one with the highest priority will visually win. All label information texts are aggregated and attached to the tooltip.

Since only one color bar is what's visible, the information should be of global importance for this TYPO3 instance: for example, the lack of a localizatiob, or a teaser image in the page properties that is too small. This can improve compliance with best practices.

The color codes can be chosen freely; however, one should check whether they look good in both light and dark mode and offer sufficient contrast.

// 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',
);

Similar to the label: when several icons are added to an item, the one with the highest severity and the highest priority wins. The severity currently knows five escalation levels.

NOTICE = -2;    // gray
INFO = -1;      // blue
OK = 0;         // green
WARNING = 1;    // yellow-ish
ERROR = 2;      // red

If the SVG icon contains fill="currentColor" in the appropriate places, the icon also takes on the color of the severity.
Minimal example SVG with fill and opacity:

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

One usage example: SEOcheck

For OpenGraph and SEO markup we access fields in a fallback case that are also used for other outputs. This is why it's not feasible to enforce hard character limits on those fields in the backend. I have therefore written a PageTreeSeoCheck to test on which pages both title and description are good from a SEO point of view. The result is displayed as a nice green, yellow, or red icon with corresponding tooltip text.

The aim is to motivate editors to get all happy green icons. They can achieve this by making the title no longer than 60 characters and the description ideally between 55 and 200 characters.

I will add an update here in a few weeks to see if this has worked and what the feedback from colleagues has been.

Final thoughts

The EventListener AfterPageTreeItemsPreparedEvent can be used to add a lot of information to the page tree, making life easier for editors.

Technically speaking, there are few limitations here, but you should always keep performance and recognizability in mind when developing. It is no help to anyone if the PageTree takes 30 seconds to load and then flashes and lights up like a Christmas tree in a shopping mall. You should also note that the information is only checked when the page tree is reloaded, for example after logging in or when you manually reload the PageTree. This means that the information displayed may not always be the most up-to-date.

Used wisely, there are great new ways to make content maintenance clearer and implement best practices without hard limits (such as mandatory fields or maximum number of characters in a text field).