How Is T3AI Built on TYPO3 Core Standards? (UI/UX and Code)
AI
Development
Top 20 Feature in TYPO3 v12 for Developer
Discover the latest advancements in TYPO3 v12 for developers. Explore new security features, incoming webhooks, and powerful CountryProvider API. Dive into the blog now !
In the final part of the TYPO3 v12 series, we will be covering everything you need to know about the significant changes brought in this version and the features for Developers. Earlier in this series, we learn about a set of improvements introduced for Admins, Integrators, and Editors.
And now, as we move further, TYPO3 has brought in changes in their UI along with new Security features for the Developers.
TYPO3 is one of the most popular and powerful CMS, and the new v12 LTS has paved the way for developers with increased productivity. You will come across features such as Webhooks, Reactions, Multi-level Language Fallback, changes in the UI, and much more.
Let us look at the roles played by a TYPO3 Developer as well the new improvements and enhancements in v12.
New Features and Improvement for Developers in TYPO3 v12:
1.Changes for Developers
Starting from the first release of v12 in Oct 2022, you will see better ideas and solutions to multiple problems Developers face.
Firstly, you will come across a thorough cleanup that has taken place. Deprecated PHP classes, functions, and CLI calls have been removed, streamlining the system and paving the way for more efficient development.
Also, to ensure long-term support for multiple extensions and third-party plugins, TYPO3 has released multiple versions of third-party libraries used in the core. Another important update for the Developers is the adoption of Doctrine DBAL version 3 as the Database Abstraction Layer (DBAL).
Instead of using the execute() method as before, developers can now use executeQuery() or executeStatement() methods. This change ensures compatibility with the updated DBAL and prepares the groundwork for future optimization possibilities and enhanced system performance.
However, you can still use the older execute() method that is made backward compatible for users using the v11 LTS version on their system.
Moving on, you will see several enhancements in the Table Configuration Array (TCA), which connects the database layer and the TYPO3 backend's FormEngine. There have been more addition to TCA types such as email, password, link, number, date-time, color, and file.
Furthermore, to improve performance, TYPO3 version 12.0 discontinues and removes RequireJS, a third-party library for loading JavaScript files. Instead, developers can now utilize JavaScript ES6, resulting in faster module loading times and improved efficiency.
2.Incoming Webhooks (“Reactions”)
The concept of Reactions has made it easier and more flexible to configure TYPO3 to react to incoming webhook calls.
Earlier, you might have been using the infamous PSR-15 middleware that allowed developers to intercept requests and execute custom functions. However, with Reactions, you can now take the process to another level that brings simplicity and versatility.
You can find a dedicated backend module to manage the Reactions as well the Incoming Webhooks under a single module. This seamless integration of TYPO3 with low-code environments and deployment/data pipelines makes it an invaluable tool for developers.
With the use of Reactions, Developers can create automated and custom solutions on a vast scale. Here is how you can use Reactions using the backend module without any PHP code.
- Go to Admin Tools and open Reactions.
- Choose to create a new Reaction, such as Create Database Record
- Add the necessary details, such as Page ID, Name, Description, etc.
And that is all you need to do to create Reactions, making the entire process effortless with no coding knowledge whatsoever.
3. New Security Features
One of the most noticeable features added to TYPO3 v12.1 is the ability to generate secure "secrets" within TYPO3 extensions. You might have come across the above feature while creating Reactions; Developers can use the same in their own extensions.
Developers can automatically create strong and random passwords by adding a simple code to their extensions. This saves time and ensures that passwords used within TYPO3 are secure and difficult to guess.
For example, add the code “passwordGenerator” to the password field in a TCA file to generate random passwords. The developers can even define certain rules for this in order to create a specific type of password, such as having uppercase letters, lowercase letters, numbers, special characters, length of the password, and other similar options.
4. Accessing TypoScript Through a Request Attribute
As a TYPO3 Developer, you might have used the TypoScriptFrontendController->tmpl or $GLOBALS['TSFE']->tmpl to access TypoScript. Now, you can access a new API that simplifies the process of loading TypoScript for a page.
You can now use the Request attribute to access the TypoScript data. Some of the methods you can use are getSettingsTree(), getSetupArray(), getFlatSettings(), and getSetupTree().
All of the above methods serve different functions where you can get the TypoScript data as a flat array or simply as a tree structure, depending on which method you are using and for what purpose.
5. Message Bus and Queue
TYPO3 version 12.2 introduces a new feature called the message bus, which is based on the Symfony Messenger component.
To put it simply, the message bus acts as a mediator between different components in TYPO3. When a component wants to send a message, it passes it to the message bus. The message bus then receives the message, stores it in a queue (if needed), and forwards it to the appropriate handler for processing.
The above process has a large number of use cases that can make the job of a Developer easier and simplified. For example, it can be used in the approval of notifications as well as during the file uploading process.
6. CountryProvider API
In TYPO3 version 12.2, developers are empowered with a powerful API that simplifies the handling of internationalization and multi-language support.
You need to constantly generate country lists and retrieve relevant information, such as flags and language associated with those countries. This process has now become automated and simplified with the CountryProvider API.
Developers can seamlessly access a comprehensive list of countries and their related data, and they no longer have to create and maintain country lists manually. This includes localized country names, standardized ISO codes, and even Unicode representations of country flags.
All the data has been extracted and based on the ISO 3166-1 standard, making it updated and factually correct.
7. Multi-level Language Fallback
While creating a TYPO3 website, it is necessary to add support for multiple frontend languages to cater to a diverse audience. When the above is activated, TYPO3 now adds useful features named “fallback chain.”
This feature ensures that the system automatically falls back to content in another language if a particular translation is missing for a specific content element.
The new v12.2 ensures that this feature is available for every content element on your website. This means that the fallback mechanism can now be applied to individual content elements, providing greater flexibility and control over language fallbacks.
8. Other Changes
Another update set in the new v12.2 is to enhance the clarity and organization of the system's files and paths.
The files name “ENABLE_INSTALL_TOOL” has been moved to a new location. Furthermore, you will also find backward compatibility for this file by still checking the old path "typo3conf/ENABLE_INSTALL_TOOL" as a fallback option.
Moving on, go to the System ➜ Configuration backend module, and you will find two new addition to the list of settings, i.e., Sites: TCA configuration and Sites: YAML configuration.
These two allow the admins to access the TCA configuration for sites as well as view the YAML configuration directly.
9. Outgoing Webhooks
TYPO3 v12.3 introduces the Outgoing Webhooks where TYPO3 can send event notifications to other systems by making outgoing HTTP calls. This feature enables TYPO3 to communicate with external systems and trigger actions or send data to them.
To access this feature, you can visit the System ➜ Webhooks module on the TYPO3 backend, where integrators and administrators can easily set up and customize the outgoing webhook requests according to their requirements.
Now, as a Developer, you only need to add a single line of PHP code to register any event as Outgoing Webhooks. This line of code tells TYPO3 that this event can trigger a webhook.
If you need to send custom webhooks programmatically without relying on backend configurations, TYPO3 provides a useful tool called "WebhookInstructionFactory." With this factory, you can create and send webhook instructions directly in your code.
By incorporating outgoing webhooks into your TYPO3 project, you can seamlessly connect with external services or systems, sending notifications or data in a structured and automated manner.
10. Content Security Policy (CSP)
Another important and incredible feature has been added to TYPO3 to address security vulnerabilities. Content Security Policy (CSP) acts as this additional security layer to mitigate and detect these attacks.
The new module is available at Admin Tools ➜ Content Security Policy, where you can view and manage CSP violations. The interface is brilliant and user-friendly, making it easy for the developers as well as Integrators to monitor everything.
11. Default Security Headers for the Backend
Another security-related aspect that has been added to the new TYPO3 v12 is by including common HTTP security headers by default. Here are the default headers that are now sent by the TYPO3 backend:
- Strict-Transport-Security
- X-Content-Type-Options
- Referrer-Policy
While these default security headers provide a good baseline level of protection, you can customize them according to your specific requirements.
12. Extbase Changes- Magic Functions
The TYPO3 v12.3 has introduced significant changes to how developers retrieve data from repository classes using Magic Functions.
These have been used for years to determine methods at runtime based on function calls dynamically. However, there are certain issues with this particular feature which is why there have been greater improvements in the TYPO3 v12.3.
The following functions are now available:
- findBy(array $criteria, ...)
- findOneBy(array $criteria, ...)
- ount(array $criteria, ...):
13. TypoScript and Page TSconfig
With all the improvements and updates on TYPO3 v12, you will also come across a new TypoScript syntax parser that is faster, more reliable, and easier to understand.
These are only minor syntax differences that you may notice once you have updated the site causing no issues whatsoever. The updates TypoScript and Page TSconfig enhance the performance, stability, and overall usability of the system.
Moreover, you might notice changes in the Backend UI related to TypoScript. All the features for the front end are now available in Site Management ➜ TypoScript module. From here, you can choose to access the submodules, i.e., Edit TypoScript Record, Active TypoScript, and Included TypoScript.
Similarly, the same can be found for Page TSconfig under Site Management ➜ Page TSconfig.
14. Extensions outside of document root for Composer-based TYPO3 installations
TYPO3 v12 requires the Composer plugin typo3/cms-composer-installers with v5, which automatically installs extensions into Composer's vendor/ directory, just like any other regular dependency.
However, in order to allow linking and rendering assets in the public web folder, the TYPO3 installation symlinks public folders to a specific location.
15. Introduce New TCA
TCA type=file
A new TCA field type called file has been added to TYPO3 Core. Its main purpose is to simplify the TCA configuration for adding file reference fields to records.
// 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'
],
],
],TCA type=folder
A new TCA type folder has been introduced, which replaces the old combination of type => 'group' together with internal_type => 'folder'. Other than that, there is nothing new about this type.
'columns' => [
'aColumn' => [
'config' => [
'type' => 'folder',
],
],
], TCA type=email
Especially TCA type input has a wide range of use cases, depending on the configured renderType and the eval options. Determination of the semantic meaning is therefore usually quite hard and often leads to duplicated checks and evaluations in custom extension code.
In our effort of introducing dedicated TCA types for all those use cases, the TCA type email has been introduced. It replaces the eval=email option of TCA
// Before
'email_field' => [
'label' => 'Email',
'config' => [
'type' => 'input',
'eval' => 'trim,email',
'max' => 255,
]
]
// After
'email_field' => [
'label' => 'Email',
'config' => [
'type' => 'email',
]
]TCA type=password
TCA password fields will be rendered as input type=password fields. By default, the autocomplete=off attribute will be added to the resulting input field. If autocomplete=true is configured in TCA, a autocomplete=new-fieldname attribute will be added to the element.
// Before
'password_field' => [
'label' => 'Password',
'config' => [
'type' => 'input',
'eval' => 'trim,password,saltedPassword',
]
]
// After
'password_field' => [
'label' => 'Password',
'config' => [
'type' => 'password',
]
]TCA type=link
TYPO3 introduce dedicated TCA types for all those use cases, the TCA type link has been introduced. It replaces the renderType=inputLink of TCA type input.
// Before
'a_link_field' => [
'label' => 'Link',
'config' => [
'type' => 'input',
'renderType' => 'inputLink',
'required' => true,
'nullable' => true,
'size' => 20,
'max' => 1024,
'eval' => 'trim',
'fieldControl' => [
'linkPopup' => [
'disabled' => true,
'options' => [
'title' => 'Browser title',
'allowedExtensions' => 'jpg,png',
'blindLinkFields' => 'class,target,title',
'blindLinkOptions' => 'mail,folder,file,telephone',
],
],
],
'softref' => 'typolink',
],
],
// After
'a_link_field' => [
'label' => 'Link',
'config' => [
'type' => 'link',
'required' => true,
'nullable' => true,
'size' => 20,
'allowedTypes' => ['page', 'url', 'record'],
'appearance' => [
'enableBrowser' => false,
'browserTitle' => 'Browser title',
'allowedFileExtensions' => ['jpg', 'png'],
'allowedOptions' => ['params', 'rel'],
],
]
]TCA type=number
We have dedicated TCA types for all those use cases, the TCA type number has been introduced. It replaces the eval=int and eval=double2 options of TCA type input.
// Before
'int_field' => [
'label' => 'Int field',
'config' => [
'type' => 'input',
'eval' => 'int',
]
]
// After
'int_field' => [
'label' => 'Int field',
'config' => [
'type' => 'number',
]
]TCA type=datetime
One more dedicated TCA types for all those use cases, the TCA type datetime has been introduced. It replaces the renderType=inputDateTime of TCA type input.
// Before
'a_datetime_field' => [
'label' => 'Datetime field',
'config' => [
'type' => 'input',
'renderType' => 'inputDateTime',
'required' => true,
'size' => 20,
'max' => 1024,
'eval' => 'date,int',
'default' => 0,
],
],
// After
'a_datetime_field' => [
'label' => 'Datetime field',
'config' => [
'type' => 'datetime',
'format' => 'date',
'required' => true,
'size' => 20,
'default' => 0,
]
]TCA type=color
A new TCA types for all those use cases, the TCA type color has been introduced. It replaces the renderType=colorpicker of TCA type input.
// Before
'a_color_field' => [
'label' => 'Color field',
'config' => [
'type' => 'input',
'renderType' => 'colorpicker',
'required' => true,
'size' => 20,
'max' => 1024,
'eval' => 'trim',
'valuePicker' => [
'items' => [
['typo3 orange', '#FF8700'],
],
],
],
],
// After
'a_color_field' => [
'label' => 'Color field',
'config' => [
'type' => 'color',
'required' => true,
'size' => 20,
'valuePicker' => [
'items' => [
['typo3 orange', '#FF8700'],
],
],
]
]TCA type=passwordGenerator
A new TCA field control passwordGenerator has been introduced, which can be used in combination with TCA type password. The control renders a button next to the password field allowing the user to generate a random password based on defined rules.
'password_field' => [
'label' => 'Password',
'config' => [
'type' => 'password',
'fieldControl' => [
'passwordGenerator' => [
'renderType' => 'passwordGenerator',
'options' => [
'title' => 'Generate a password',
'allowEdit' => false,
'passwordRules' => [
'length' => 38,
'digitCharacters' => false,
'specialCharacters' => true,
],
],
],
],
],
],TCA type=uuid
A new TCA types for special use cases, a new TCA field type called uuid has been added to TYPO3 Core. Its main purpose is to simplify the TCA configuration when working with fields, containing a UUID.
'identifier' => [
'label' => 'My record identifier',
'config' => [
'type' => 'uuid',
'version' => 6,
],
], 16. New Registration for module functions
Previously, module functions could be added to modules such as Web > Info or Web > Template via the now removed global TBE_MODULES_EXT array.
Since those functions are actually additional - "third-level" - modules, they are now registered as such via the new Module Registration API, in an extension's Configuration/Backend/Modules.php file.
// Before ext_tables.php
ExtensionManagementUtility::addModule(
'web',
'example',
'top',
'',
[
'routeTarget' => MyExampleModuleController::class . '::handleRequest',
'name' => 'web_example',
'access' => 'admin',
'workspaces' => 'online',
'iconIdentifier' => 'module-example',
'labels' => 'LLL:EXT:example/Resources/Private/Language/locallang_mod.xlf',
'navigationComponentId' => 'TYPO3/CMS/Backend/PageTree/PageTreeElement',
]
);
ExtensionUtility::registerModule(
'Extkey',
'web',
'example',
'after:info',
[
MyExtbaseExampleModuleController::class => 'list, detail',
],
[
'access' => 'admin',
'workspaces' => 'online',
'iconIdentifier' => 'module-example',
'labels' => 'LLL:EXT:extkey/Resources/Private/Language/locallang_mod.xlf',
'navigationComponentId' => 'TYPO3/CMS/Backend/PageTree/PageTreeElement',
]
);
// After Configuration/Backend/Modules.php
return [
'web_module' => [
'parent' => 'web',
'position' => ['before' => '*'],
'access' => 'admin',
'workspaces' => 'live',
'path' => '/module/web/example',
'iconIdentifier' => 'module-example',
'navigationComponent' => 'TYPO3/CMS/Backend/PageTree/PageTreeElement',
'labels' => 'LLL:EXT:example/Resources/Private/Language/locallang_mod.xlf',
'routes' => [
'_default' => [
'target' => MyExampleModuleController::class . '::handleRequest',
],
],
],
'web_ExtkeyExample' => [
'parent' => 'web',
'position' => ['after' => 'web_info'],
'access' => 'admin',
'workspaces' => 'live',
'iconIdentifier' => 'module-example',
'path' => '/module/web/ExtkeyExample',
'labels' => 'LLL:EXT:beuser/Resources/Private/Language/locallang_mod.xlf',
'extensionName' => 'Extkey',
'controllerActions' => [
MyExtbaseExampleModuleController::class => [
'list',
'detail'
],
],
],
];17. Infrastructure for JavaScript modules and importmaps
A simple configuration example for an extension that maps the Public/JavaScript folder to an import prefix @vendor/my-extensions:
// EXT:my_extension/Configuration/JavaScriptModules.php
<?php
return [
// required import configurations of other extensions,
// in case a module imports from another package
'dependencies' => ['backend'],
'imports' => [
// recursive definition, all *.js files in this folder are import-mapped
// trailing slash is required per importmap-specification
'@vendor/my-extension/' => 'EXT:my_extension/Resources/Public/JavaScript/',
],
];
// via PageRenderer
$this->packageRenderer->loadJavaScriptModule('@vendor/my-extension/example.js');
// via JavaScriptRenderer
$this->packageRenderer->getJavaScriptRenderer()->addJavaScriptModuleInstruction(
JavaScriptModuleInstruction::create('@vendor/my-extension/example.js')
);
<f:be.pageRenderer
includeJavaScriptModules="{
0: '@vendor/my-extension/example.js'
}"
/>18. Make ExtensionUtility::registerPlugin method return plugin signature
The API method TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerPlugin() is used to register an Extbase plugin. The method is called in the Configuration/TCA/Overrides/tt_content.php file of an extension and often followed by the definition of a FlexForm.
$pluginSignature = ExtensionUtility::registerPlugin(
'indexed_search',
'Pi2',
'Testing'
);
ExtensionManagementUtility::addPiFlexFormValue(
$pluginSignature,
'FILE:EXT:indexed_search/Configuration/FlexForms/Form.xml'
);19. Introduce CLI setup command
To be able to automate the setup process for new TYPO3 installations, a new CLI command setup is introduced as an alternative to the existing GUI based web installer.
// Interactive / guided setup (questions/answers):
./bin/typo3 setup
// Automated setup:
TYPO3_DB_DRIVER=mysqli \
TYPO3_DB_USERNAME=db \
TYPO3_DB_PORT=3306 \
TYPO3_DB_HOST=db \
TYPO3_DB_DBNAME=db \
TYPO3_SETUP_ADMIN_EMAIL=admin@example.com \
TYPO3_SETUP_ADMIN_USERNAME=admin \
TYPO3_SETUP_CREATE_SITE="https://your-typo3-site.com/" \
TYPO3_PROJECT_NAME="Automated Setup" \
./bin/typo3 setup --force20. Change for Developers- TYPO3 v12 LTS
The TYPO3 v12 LTS has introduced significant changes and improvements for Developers. Here are some of them you might like:
1. TYPO3 now requires PHP 8.1 as a minimum requirement, and it also supports the latest PHP release, version 8.2. Apart from exceptional performance, these versions come equipped with type safety, read-only properties, callable syntax, fibers, intersection types, and other enhancements.
2. You will find the updated versions of all third-party libraries and dependent packages. Notably, the Database Abstraction Layer (DBAL) now uses Doctrine DBAL version 3, which brings internal improvements and separation of logic, enhancing database interactions.
3. The new v12 LTS features additional TCA types such as email, password, link, number, datetime, color, file, and passwordGenerator.
4. You will find new methods added to Extbase, i.e., findBy(), findOneBy(), and count(). They provide the same functionality as magic methods while improving IDE support, code analysis, and code consistency.
Conclusion
This is everything you need to know about the improvements, upgrades, and features introduced in TYO3 v12 and all it's further released for Developers.
This guide covers information about Incoming and Outgoing Webhooks, CSP and Multi-level Language Fallback, Extbase Changes, and so many more changes you will see once you walk through each of them.
TYPO3 v12 is a powerful upgrade, and all its features, including astonishing UI improvements, will help you build a stunning website for your business. Do not forget to check out how v12 and its releases have benefited Developers, Integrators, Editors, and Admins on a massive scale.
Post a Comment
A must-read for any TYPO3 enthusiast!- A must-read for any TYPO3 enthusiast!
- Exciting read! TYPO3 v12 seems to offer a compelling array of new features for developers, can't wait to explore them all!
- Exciting read! TYPO3 v12 seems to offer a compelling array of new features for developers, can't wait to explore them all!
Join over 4300+ TYPO3 Subscribers
Sanjay Chauhan
CTO at T3Planet & NITSANSanjay Chauhan, Co-Founder of NITSAN (Award winning TYPO3 agency) and Pioneer of T3Planet (first-ever TYPO3 Store).
A true TYPO3 fanatic since 2010. I bring strong TYPO3 experience in building customer-business…
More From Author