Top 8 Enhancements in TYPO3 v12 for Integrators

Discover the game-changing enhancements in TYPO3 v12 that empower integrators. From advanced customization options to seamless third-party integrations, explore the top 8 features revolutionizing TYPO3 development.

Top 8 Enhancements in TYPO3 v12 for Integrators

In this next part of our series, we will be conversing some of the major features of TYPO3 v12 for Integrators. Earlier, we learned about the changes and benefits of TYPO3 v12 for admin users. While working on TYPO3. As an Integrator, not only do you have access to better backend UX, but you also have improved Backend Search functions and so much more.

TYPO3 is one of the most popular CMS, making it perfect for both small-scale websites and large-scale organizations. Currently, the new v12 and its LTS version, released back in April 2023, offer security updates for at least three years.

The year 2023 has been nothing short of a series of milestones released by the community itself for the TYPO3 developers and enthusiasts. Being an TYPO3 Integrator, you will see some significant changes to the system and make your work more efficient in the process.

Here is all you need to know about what is new for Integrators in this TYPO3 v12.

What’s the Role of TYPO3 Integrator

As a TYPO3 Integrator, your job is to ensure that the website functions effectively and meets the desired specifications to give you the best performance. They serve to be a bridge between the designers and the TYPO3 developers.

Suppose you are an TYPO3 Integrator or someone looking forward to becoming one. In that case, your job is to ensure the designs fully align with the TYPO3 specifications and configure the backend to tailor it to the project's specific requirements. This isn’t everything. Here are a few of the major roles of being a TYPO3 Integrator.

  • Performance Optimization
  • Backend Configuration
  • Theme and Extensions Integration
  • Troubleshooting and Bug Fixing

Above all, TYPO3 Integrators also collaborate with TYPO3 Developers, TYPO3 Editors, and Graphics Designers to set up and maintain the system for optimal results while setting up the website and keeping it up-to-date.

New Features and Improvement for Integrators in TYPO3 v12:

Some of the major features and improvements released in TYPO3 v12 for Integrators as mentioned below. Let’s explore everything this version has to offer.

Better and Improved UI

TYPO3 v12 has brought significant changes and improvements in their Backend UI, allowing Integrators to have an exceptional experience while configuring the website. 
Go to Web ➜ Page; the content structure and layout are well-optimized, giving you a cleaner UI. All this has been made possible with the SCI or the Structure Content Initiative, where the goal is to allow Integrators to work on different content types easily without any foundation of a particular template or style.

Now, open the Settings page from the Admin panel. Here, you can check the box beside “Ignore start and end time,” which allows you to view all content records, regardless of any start or stop timestamps that may be set. Furthermore, you can click on the “Open page in backend” option below to directly open the page in the backend.

As a TYPO3 Integrator, you are responsible for managing the TYPO3 system and occasionally need to review the system logs. In the new v12, the backend module now has an important addition to System ➜ Log. You can now use the advanced filter to filter out the log entries of the activities or any changes made on a page.

Another added feature that you will find under the System >Configuration module is the overview and list of all registered Symfony expression language providers. You can refer to the image below of the variable and functions under the default, typoscript, site, and form categories.

Filelist with Primary Actions

Under the User TSconfig, you can now customize the different options to be shown under the Control column. The below image shows the default options that you may find under this column, i.e., the “edit icon,” “show/eye icon,” and “trash” icons.

However, you can make changes to this and either remove all of the icons or add some more to this. Simply use the TSconfig option options.file_list.primaryActions to make these changes.

The below image shows all the Primary Actions have been removed from Filelist. While the other part of the image shows additional options, i.e., “cut” and “copy.”

Improved Backend Search

The new and improved Backend Search option allows Integrators to directly click on the magnifying glass to open the search function. This isn’t all; you can do the same by using shortcuts from your keyboard, i.e., CTRL + K or Command + K.

This ensures a more user-friendly approach when it comes to handling massive websites, and you need to access certain pages or data quicker than usual. Similarly, with the use of certain filters, you can limit your search to a particular page while searching for some specific set of data.

More Details About Redirect Records

The bigger the site you have, the number of Redirects grows with it. To manage them all efficiently, TYPO3 has added a significant set of features to this module.

Firstly, you can now give short descriptions to the Redirects, such as “Content XYZ” or anything else to briefly describe the URL. This will allow you to access them if and when needed by checking out the description.

Another feature added to this is that TYPO3 creates auto redirects. If there is any change in the page's Slug or URL, TYPO3 automatically creates a path from the old url to the new one to avoid any errors when any user tries to access it.

Configuring File Mounts and Backend User Permissions Simplified

One of the major aspects of an Integrator is managing and configuring the website for maximum output. In TYPO3, the developers and Integrators can give access to remote and local storage and assign them certain filemounts.

To make the above process easier, v12.1 introduces a submodule under the System ➜ Backend Users module and choose Filemounts. You can check the list of all the available filemounts and grab all the data to know more about each of them.

This allows Integrators and Developers to manage the filemounts and configure them easily by having them all in a single place.

Accessing TypoScript Through a Request Attribute

TYPO3 v12 features a new API that simplifies the process of retrieving TypoScript data by offering a set of methods that can be accessed through a "Request" attribute.

Instead of using the earlier methods such as TypoScriptFrontendController->tmpl or $GLOBALS['TSFE']->tmpl. You can now make use of the following:

  • getSettingsTree()
  • getFlatSettings()
  • getSetupTree()
  • getSetupArray()

Furthermore, the API simplifies the code required to access TypoScript and offers a more organized and standardized way of working with TypoScript settings and setup.

Internationalization

TYPO3 is one of the most popular CMS worldwide. Considering there are hundreds of languages spoken around the world, it can get challenging for the Integrators to handle the requirements when it comes to adopting these measures.

However, with TYPO3’s multilingual capabilities, you can easily adapt to these language requirements and reach people in their native languages.

CountryProvider API
In the process of adapting to the multi-language support on the TYPO3 website, developers and Integrators need to create a list of the countries, flags, languages, and everything else.

The new CountryProvider API makes the above process easier and more automated. You are given a list of the country names, ISO codes, flags, and more info. This info is based on the ISO 3166-1 standard that is up-to-date as per needed.

Multi-level Language Fallback
The language fallback feature is introduced in TYPO3 12.2, offering a convenient way to handle translations when specific language versions of content are missing.

This feature ensures a smoother user experience by providing fallback options for displaying content in the user's preferred language, even when translations for that language are not available.

Retention Period for Deleted Records

While managing and setting up the website, you might often delete certain records, logs, or even pages from the backend into the bin. However, the data isn’t permanently removed from the database, and you can retrieve it from the Web > Recycler module on your backend.

But you wouldn’t want to keep that data stored forever and take up all the space on your database. For this, a new "--min-age" option to the "cleanup:deletedrecords" CLI command in TYPO3 12.3 has been brought into effect. This brings significant benefits for administrators and helps meet data retention policies more effectively.

This enhancement allows administrators to define a minimum age, specifying the days to retain deleted records before being permanently deleted from the database.

TypoScript and Page TSconfig

TYPO3 v12 has introduced significant changes and improvement in the way TypoScript and Page TSconfig works in TYPO3.

The core team has worked relentlessly and created a new system that reads and understands TypoScript code much faster, making it more efficient. This is known as the TypoScript syntax parser, is much easier to understand.

Now, you can get access to this system once you update your system to the new v12. Visit the Site Management ➜ TypoScript module and all its submodules to get familiar with the changes made to the UI.

  • Edit TypoScript Record 
  • Active TypoScript
  • Included TypoScript

You can also find another new module under Site Management ➜ Page TSconfig and its submodules as given below. These modules have better aligned and configured to help Integrators to manage the UI efficiently.

New Technical Features in TYPO3 v12

Improved TypoScript Template Analyzer

The backend "Template" module "Template Analyzer" got a major overhaul and displays much more information than before:

The rendering separates "constant" and "setup" includes and renders both in own panels.
@import and <INCLUDE_TYPOSCRIPT: are now resolved and shown as nodes within the include tree.

TypoScript conditions are reflected in the include tree and can be toggled to simulate frontend condition verdicts.

Clicking an include node displays this section of the include tree as source tree with appropriate comments for import statements.

TypoScript syntax improvements
TYPO3 v12 comes with a new TypoScript syntax parser that is more performant, more robust and allows better tooling in the Backend.

The new parser is more forgiving in many places, this documentation lists the new capabilities.

Improved comment parsing

 

foo # This is a comment to an invalid line

foo < bar // This is a comment
foo < bar /* This is a valid comment, too */

foo > # Another valid comment

foo := addToList(1) # Yes, a comment

[foo = bar] # Much comment. Much wow.

<INCLUDE_TYPOSCRIPT: source="..."> /* A comment */

foo (
  # This is NOT a comment but part of the value assignment!
  bar = barValue
) # This is a comment

foo = bar // This is NOT a comment but part of the value assignment!

@import in conditions
Placing an @import keyword within a condition is now supported, the example below works. Note that this obsoletes the clumsy <INCLUDE_TYPOSCRIPT: syntax, and integrators are encouraged to fully switch to @import.

 

[frontend.user.isLoggedIn]
  @import 'EXT:my_extension/Configuration/TypoScript/LoggedInUser.typoscript
[ELSE]
  @import 'EXT:my_extension/Configuration/TypoScript/NotLoggedInUser.typoscript
[END]

Nesting conditions is partially supported

 

[frontend.user.isLoggedIn]
  @import 'EXT:my_extension/Configuration/TypoScript/LoggedInUser.typoscript
[applicationContext == "Development"]
  @import 'EXT:my_extension/Configuration/TypoScript/Development.typoscript
[END]

[frontend.user.isLoggedIn]
  @import 'EXT:my_extension/Configuration/TypoScript/LoggedInUser.typoscript
[END]

# File LoggedInUser.typoscript:
[applicationContext == "Development"]
  @import 'EXT:my_extension/Configuration/TypoScript/LoggedInUserDevelopment.typoscript
[END]

Support of language direction in ckeditor
The configuration contentsLangDirection of the ckeditor is used to define the direction of the content. It is now filled by the direction defined in the site language of the current element.
As fallback the page TSconfig configuration RTE.config.contentsLanguageDirection = rtl can be used.

TypoScript Option "showWebsiteTitle"
A new TypoScript option config.showWebsiteTitle has been added.The option allows to define whether the website title, which is defined in the site configuration, should be added to the page title, which is e.g. used for the <title> tag.

CKEditor 5
TYPO3 v12 ships with CKEditor 5, a Rich-Text Editor to edit fields where custom formatting for text with styling or links, or table formatting can be achieved. Read more

Override backend templates with TSconfig

 

# Pattern: templates."composer-name"."something-unique" = "overriding-extension-composer-name":"entry-path"
templates.typo3/cms-linkvalidator.1643293191 = my-vendor/my-extension:Resources/Private/TemplateOverrides

templates.typo3/cms-linkvalidator.23 = other-vendor/other-extension:Resources/Private/TemplateOverrides/Linkvalidator
templates.typo3/cms-linkvalidator.2300 = my-vendor/my-extension:Resources/Private/MyOverrideIsBigger

Automatic inclusion of page TSconfig of extensions
Extension authors can now put a file named Configuration/page.tsconfig in their extension folder.

This file is then recognized to load the contents as global page TSconfig for the whole TYPO3 installation during build-time.

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.

 

./bin/typo3 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 --force

Allow generation of absolute URLs completely
A new TypoScript option config.forceAbsoluteUrls = 1 has been added.

Additional attributes for includeJS, includeCSS and all other page.include**
The PageRenderer supports additional tag attributes for CSS and JavaScript files. These data attributes can be configured using a key/value list via TypoScript.

 

page = PAGE
page {
  includeCSSLibs {
    someIncludeFile = fileadmin/someIncludeFile1
    someIncludeFile.data-foo = includeCSSLibs
  }
  includeCSS {
    someIncludeFile = fileadmin/someIncludeFile2
    someIncludeFile.data-foo = includeCSS
  }
  includeJSLibs {
    someIncludeFile = fileadmin/someIncludeFile3
    someIncludeFile.data-consent-type = marketing
  }
  includeJS {
    someIncludeFile = fileadmin/someIncludeFile4
    someIncludeFile.data-consent-type = essential
  }
  includeJSFooterlibs {
    someIncludeFile = fileadmin/someIncludeFile5
    someIncludeFile.data-my-attribute = foo
  }
  includeJSFooter {
    someIncludeFile = fileadmin/someIncludeFile6
    someIncludeFile.data-foo = includeJSFooter
  }
}

Allow glob patterns in yaml imports
You can now use glob() syntax when importing configuration files in YAML.

 

imports:
  - { resource: "./**/*.yaml", glob: true }
  - { resource: "EXT:core/Tests/**/Configuration/**/SiteConfigs/*.yaml", glob: true }

New file location for ENABLE_INSTALL_TOOL
To access the standalone Install Tool, the file typo3conf/ENABLE_INSTALL_TOOL needed to be created. With TYPO3 v12, the location of this file has been changed.

 

// For Composer-based installations the following file paths are checked:
var/transient/ENABLE_INSTALL_TOOL
config/ENABLE_INSTALL_TOOL

// For legacy installations the following file paths are checked:
typo3temp/var/transient/ENABLE_INSTALL_TOOL
typo3conf/ENABLE_INSTALL_TOOL

Conclusion

TYPO3 v12 has a lot to offer in terms of better UI, along with a multitude of features for Integrators. This guide will help you understand all the aspects you need to know on the things you need to look forward to before you update your site to v12.

Some of the key features we found included Improved Backend Search, Multi-level Language Fallback, and significant changes in the UI on multiple levels. But this isn’t everything; make sure to go through each of the features mentioned in this guide and learn how TYPO3 Integrators can leverage these new aspects to increase their efficiency.

Post a Comment

×
  • user
    Tom Baumgartner 2023-09-05 at 2:41 pm
    I've been eagerly awaiting TYPO3 v12, and this post highlights all the key aspects an integrator needs to know. Thank You for this article !
  • user
    Robert Vogel 2023-08-08 at 9:33 am
    Just stumbled upon this TYPO3 Blog ! Great job on this insightful piece!