Neue TCA Typen in TYPO3 v12

Easier configuration for your custom records

Benni Mack

11. Dezember 2023

Grafik mit Benutzerschnittstellenelementen wie Schiebereglern, Kontrollkästchen und Eingabefeldern, begleitet von einer Glühbirne und Zeichentools wie Bleistiften und einem Lineal, alles in einem lebhaften Rot- und Orangeton.

In diesem Blog-Beitrag werden wir uns mit benutzerfreundlichen Methoden zur Konfiguration von TCA beschäftigen. TCA ist das Kraftwerk hinter der gesamten Logik zur Bearbeitung und Darstellung von Datenbankeinträgen in TYPO3.

Was ist TCA? Und warum sollte mich das interessieren?

Das Herzstück von TYPO3 ist TCA, ein Akronym für „Table Configuration Array“ - ein PHP-basierter Layer, der die Definition von Daten vereinheitlicht, die innerhalb von TYPO3 zugänglich und manipulierbar sind. Dieser Layer regelt die Struktur der Datenspeicherung in der Datenbank, erweitert deren Möglichkeiten um zusätzliche Felder für Content-Ersteller und ermöglicht ein flexibles Rendering in TypoScript über das Frontend. Es ist wichtig, diese Konzepte zu verstehen, wenn du TYPO3 erweitern willst, denn TCA definiert alles von Seiten und Inhaltselementen bis hin zu Adressen und Website-Benutzerdatensätzen. Mehr über TCA und seine Konzepte erfährst du im TCA Reference Guide auf docs.typo3.org.

In TYPO3 verleiht TCA den Datenbanktabellen und -feldern einen semantischen Wert. Wenn du zum Beispiel möchtest, dass Redakteure aus drei gültigen Optionen wählen können, erleichtert TCA die Darstellung der Optionen als Dropdown in der Verwaltungsoberfläche. Während einem Datenbankfeld allein diese kontextuelle Bedeutung fehlt, übernimmt TCA die Aufgabe, diese zu liefern. Jede Extension kann nahtlos neue Felder oder sogar ganze Datenbanktabellen zur Bearbeitung im TYPO3 Backend einführen. Wenn du also jemals vorhattest, über das Basis-Framework von TYPO3 hinauszugehen, ist dies ein hervorragender Startpunkt.

Bisherige Probleme mit TCA

Da es sich bei TCA um ein umfangreiches PHP-kompiliertes Array handelt, bietet es ein hohes Maß an Flexibilität für umfangreiche Manipulationen innerhalb von TYPO3-Extensions. Allerdings trägt TCA das Gewicht der umfangreichen Geschichte von TYPO3, und für Neulinge war seine Semantik nicht immer einfach. Zum Beispiel ist es nicht einfach zu verstehen, dass ein Feld vom Typ input eine eval-Option wie password haben kann, um seine Behandlung als Passwort-Eingabefeld für Redakteure zu kennzeichnen. Und die Informationen, die nicht zusammen mit dem einfachen Wert in der Datenbank gespeichert werden, machen die Sache noch komplizierter. Außerdem wurde der Begriff „input“ gelegentlich auf Felder angewandt, die für die Auswahl bestimmter Daten oder Zeiten bestimmt waren, was zu einer verworrenen Interpretation seiner Bedeutung beitrug.

Smartere Types mit weniger verwirrenden Optionen

In TYPO3 v11 debütierten mehrere neue TCA-Typen, darunter type=language zur Erleichterung der Auswahl der verfügbaren Sprachen für eine Site und type=category anstelle des generischen type=select mit renderType=selectTree und einem Verweis auf die Datenbanktabelle sys_category. TYPO3 v12 hat diese Konzepte zu neuen Höhen geführt und ihren Umfang und ihre Funktionalität weiter ausgebaut.

Begrüße neue Types in Version 12

Anstatt die potenziell fehleranfällige Aufgabe zu bewältigen, type=input mit eval in TCA zu schreiben, können Autoren von Erweiterungen in Version 12 die folgenden neuen TCA-Typen zur Definition von Feldern nutzen:

color
datetime
email
file
folder
json
link
number
password
uuid

In der offiziellen TYPO3-Dokumentation sind alle Feldtypen im TCA-Referenzhandbuch aufgeführt.

Die Vorteile von verschlanktem Code

Die Typen uuid und json sind völlig neu und wurden für spezielle Anwendungsfälle eingeführt — vor allem im Zusammenhang mit den neuen Systemerweiterungen „Reactions„ und “Webhooks„. Alle anderen Felder wurden sorgfältig neu definiert, was das Leben der bestehenden TYPO3-Integratoren und Extension-Autoren überall vereinfacht.

Schauen wir uns ein Beispiel an. Color steht für die Auswahl eines beliebigen HEX-Farbwertes. Dies wurde bisher über type=input und renderType=colorpicker definiert. Jetzt werden spezifische Komponenten implizit durch die Verwendung von type=color definiert. Weniger zu schreibender Code sorgt für einen wesentlich schlankeren Kodierungsprozess.

// Before

'a_color_field' => [
    'label' => 'Color field',
    'config' => [
        'type' => 'input',
        'renderType' => 'colorpicker',
        'size' => 20,
        'max' => 1024,
        'eval' => 'trim',
        'valuePicker' => [
            'items' => [
                ['TYPO3 orange', '#FF8700'],
            ],
        ],
    ],
],

// After
'a_color_field' => [
    'label' => 'Color field',
    'config' => [
        'type' => 'color',
        'size' => 20,
        'valuePicker' => [
            'items' => [
                ['TYPO3 orange', '#FF8700'],
            ],
        ],
    ]
]

Ähnliche Fälle der Verdichtung der TCA-Definition, die ursprünglich durch „eval“ mit spezifischen Optionen verwaltet wurden, sind nun zu benutzerdefinierten TCA-Typen übergegangen. Zu meinen Favoriten gehören „link“ und „file“.

Type link

// Before

'cta_link' => [
    'label' => 'CTA Link',
    'config' => [
        'type' => 'input',
        'renderType' => 'inputLink',
        'required' => true,
        'max' => 1024,
        'eval' => 'trim,
        'fieldControl' => [
            'linkPopup' => [
                'disabled' => true,
                'options' => [
                    'title' => 'Browser title',
                    'blindLinkFields' => 'class,target,title',
                    'blindLinkOptions' => 'mail,folder,file,telephone',
                ],
            ],
        ],
        'softref' => 'typolink',
    ],
],

// After
'cta_link' => [
    'label' => 'CTA Link',
    'config' => [
        'type' => 'link',
        'required' => true,
        'allowedTypes' => ['page', 'url', 'record'],
        'appearance' => [
            'enableBrowser' => false,
            'browserTitle' => 'Browser title',
            'allowedOptions' => ['params', 'rel'],
        ],
    ]
]

Type „File“

Das Schreiben von Beziehungen in Dateien war früher eine Besonderheit, wird aber jetzt über einen benutzerdefinierten TCA-Typ vereinfacht:

// Before
'columns' => [
    'image' => [
        'label' => 'My image',
        'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
            'image',
            [
                'maxitems' => 6,
            ],
            $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
        ),
    ],
],

// After
'columns' => [
    'image' => [
        'label' => 'My image',
        'config' => [
            'type' => 'file',
            'maxitems' => 6,
            'allowed' => 'common-image-types'
        ],
    ],
],

Die existierende Installation ohne viel Aufwand übertragen

TYPO3 ist mit einem automatischen Migrationsprozess für bestehende TCA ausgestattet, um einen nahtlosen Übergang zur neuen Struktur zu ermöglichen und jegliche Bedenken während des Upgrade-Prozesses zu zerstreuen.

Bei b13 sind wir überzeugte Verfechter von Rector for TYPO3 - einem Tool, das entwickelt wurde, um Extension-Code, einschließlich TCA, selbstständig zu migrieren und sicherzustellen, dass er mit der zukunftssicheren Syntax übereinstimmt.

Du brauchst Hilfe? Wir helfen dir gerne weiter!

Wenn du immer noch Schwierigkeiten haben, deine Installation auf die nächste Version zu aktualisieren, setz dich mit uns in Verbindung und wir beraten Dich gerne.

Meld dich bei uns!

Geschrieben von:

Lächelnder Mann mit kurzen Haaren und einem Bart, der ein weinrotes Hemd trägt, steht in einer modernen Innenumgebung mit unscharfen Hintergrundelementen.

Der Mitbegründer von b13 und Leiter des TYPO3 CMS Core Developement, Benni Mack, bestimmt maßgeblich unsere technischen Best-Practises. Er ist zuständig für den Aufbau und die Wartung unserer technischen Infrastruktur und koordiniert unseren Beitrag zum Open-Source-Projekt. Sein wesentliches Werkzeug: TYPO3

Benni Mack CTO

mehr von Benni Mack