TYPO3 14: The new rendering concept with ContentArea and f:render ViewHelpers

The PAGEVIEW cObject was introduced with TYPO3 v13. Version 14.2 builds on this and now provides significantly more context for your templates. Content elements no longer come as a simple list, but as structured objects with all relevant column information.

In practice, this means less code in the template, automatic TypoScript resolution and context-dependent rendering without detours.

The concept: ContentArea objects

Previously, you received content elements as a list and rendered them using a loop. With TYPO3 14.2 you get ContentArea objects instead. Each column of your backend layout becomes a separate object with all relevant information:

• records: The content elements as fully resolved record objects
• identifier: The column identifier from the backend layout (e.g. main, sidebar)
• colPos: The colPos number
• name: The descriptive name of the column
• configuration: The complete column configuration
• allowedContentTypes / disallowedContentTypes: Which content types are allowed or disallowed in this column
• slideMode: The defined slide mode

The access in the template:

{content.main.records}

This returns all content elements in the main column. Because you now know in which column an element is located, you can render depending on the context. For example: The header partial is only displayed if the element is not in the sidebar.

Performance: The ContentArea objects are only loaded when you actually call them up (lazy loading). A column that you do not use in the template does not cause any load.

f:render.contentArea: Less code, same functionality

Until now, rendering a content column looked like this:

<f:for each="{content.normal.records}" as="contentElement">
    <f:cObject
        typoscriptObjectPath="{contentElement.mainType}"
        table="{contentElement.mainType}"
        data="{contentElement}"
    />
</f:for>

With the new ViewHelper:

<f:render.contentArea contentArea="{content.normal}" />

The ViewHelper takes over the loop internally and calls the appropriate TypoScript setup for each record. You no longer need to specify typoscriptObjectPath yourself, the ViewHelper determines this automatically via the record type.

f:render.record: Render individual records

The same principle applies to individual records:

<f:render.record record="{record}" />

The ViewHelper automatically determines which TypoScript setup applies to the record (via $record->getMainType()). This works not only for tt_content, but for any database record. Prerequisite: You have configured the TypoScript rendering for the respective table.

An example: You have your own data records in tx_myext_product and a suitable TypoScript setup. With f:render.record you can render these records just as easily as content elements.

PSR-14 events for extension developers

Both ViewHelpers dispatch a PSR-14 event (ModifyRenderedContentAreaEvent or ModifyRenderedRecordEvent) after rendering. This allows extension developers to subsequently modify the rendered HTML without you as the integrator having to adapt your template.

A typical use case: a debug extension that displays additional information around each content element in the development context.

This is less relevant for the normal day-to-day work of an integrator. But it shows that TYPO3 is building a clean architecture here that is also open to tool developers.

What will change for you

Less boilerplate: You can replace the f:for loop with f:cObject with a single line.

Automatic TypoScript resolution: You no longer have to specify typoscriptObjectPath manually. The ViewHelper knows itself which setup it needs.

More context in the template: The ContentArea objects provide you with all column information. Context-dependent rendering (e.g. different display depending on the column) becomes easier.

Future-proof: Anyone working with PAGEVIEW and the new ViewHelpers now uses the architecture that TYPO3 relies on.

Sources

You can find the complete documentation in the official TYPO3 ChangeLog:

• Feature #104974: Content area related information in the frontend
• Feature #108726: Introduce Fluid f:render.contentArea ViewHelper
• Feature #108726: Introduce Fluid f:render.record ViewHelper

If you want to learn PAGEVIEW and the new rendering concepts from scratch: I'm currently working on a TYPO3 complete course that will be updated with every release. Sign up for the waiting list if you want to be there at the start.