Authoring Experience

Introduced in version 9.2

TYPO3 would not be so successful as it is today, if we only concentrated our efforts on improvements  for integrators, developers and administrators. Backend users, e.g. editors, have always been in our focus. Two notable new features in TYPO3 v9.2 especially for this target audience prove this again.

A content element on a page can often be used as a template for other, very similar elements. This could be a text/image for example, where most of the individual settings, e.g. the headline, visual appearance, access restrictions, etc. should be exactly the same or only need minor adjustments. In these cases, it makes sense to clone the existing element, which has been possible already by using “WEB → List” and copy/paste functions. However, this process requires a number of steps and clicks.

A new button “Duplicate” has been added, which appears when adding or editing a content element in the backend. With one click, backend users can clone a content element, which simplifies the process significantly.

The second improvement directly impacts the backend user interface (UI) and affects editors, as well as developers and designers alike. A set of so-called “toggle switches” have been introduced in TYPO3 version 9.2, which do not only look nice, but are also a useful tool to allow backend users to switch between two states easily.

The render types “checkboxToggle” and “checkboxLabeledToggle” can now be used for the checkboxes. On top of that, checkboxes are now displayed with icons provided by the IconFactory.

Documentation

Introduced in version 9.0

Content elements, which are not assigned to any column are shown in an additional column named “Unused” at the end of the page. This makes sure, that these elements do not get lost when switching from one backend layout to another with different columns. 

Even if the layout is switched back to the original one, the elements nicely fall back into their original position.

Introduced in version 9.0

Performance optimization and the leverage of modern web technologies has always been on our agenda. We are proud to present a re-worked page tree in the backend of TYPO3 v9, which is based on SVGs and features superfast rendering times.

The new page tree enables us to finally remove ExtJS from TYPO3 completely. A goal we aimed for, for a very long time - no ExtJS in the TYPO3 backend anymore!

Documentation

Introduced in version 9.0

Editor and integrators will experience that modal boxes will appear more often in the backend of TYPO3. A first step in this direction has been made by moving the wizard for the creation of new content elements into such a box. This helps users not to loose the focus of the context where new content is created.

Further implementation of this concept will follow in subsequent releases of TYPO3 v9.

Documentation

Introduced in version 9.0

Websites are accessed using a wide range of devices and screen sizes today. The need for editors to check the appearance of a page is obvious and the view module allows backend users to do exactly this. 

The view module received a modern and streamlined look and feel in TYPO3 v9. The introduction of named and categorized device presets makes it even easier for editors to view a page and to get a better idea of what the page looks like on a specific device. Even the device orientation can be changed without selecting a di

Documentation

Introduced in version 7.6

An image manipulation functionality allows editors to crop images in the backend. This way you can cut out a certain area of an image that appears in the frontend of your website, without changing the original file – it remains intact and can be used later on. No additional software needs to be installed for this: this feature is part of the TYPO3 CMS backend now!

The image cropping functionality is also available to integrators to be used in custom content elements and extensions as well.

Introduced in version 7.3

If a file upload would overwrite an existing file, editors can choose an action (e.g. replace, rename or skip) conveniently in a modal popup. And if that wasn't enough: this feature works for multiple files, too! Mass­ update has never been so easy!

Introduced in version 7.1

In our continuous efforts to bring the basis of the TYPO3 CMS Backend closer to the responsive functionality brought by Twitter Bootstrap, one of the key areas, the Backend FormEngine, is now fully responsive. Also, a new DatePicker has been introduced which integrates nicer in the new look & feel of the TYPO3 system.

The UI of the recycler module was also rewritten and is completely based on a responsive layout.

There is still much to do, but through the agile process of the releases it is easier to split up certain tasks into smaller finishable jobs that contributors pick up.

Introduced in version 11.1

Space travelers around the galaxy know how important a user-friendly control panel is. It can save your life if you detect meteor showers early during your journey. As a TYPO3 backend user, your life usually doesn’t depend on it. Still, the option to adjust the backend view to your individual needs makes your day-to-day work easier and more pleasant.

The navigation area has had a fixed width since TYPO3 version 8. This area is the second column from the left in the backend, which shows the page tree (when modules under the “Web” section are accessed) or the file list (section “File”). Sometimes, the fixed width caused problems. In TYPO3 instances with long page titles and page trees with many levels, the contents in this area were cut off.

We reworked this component and reintroduced a resizable navigation area in TYPO3 version 11.1. We also got rid of a lot of JavaScript code.

We moved the icon to collapse and reopen the navigation area inside the panel. This location is now a better place from a usability perspective. You don’t need to readjust the navigation area’s width every time you re-login to the backend. TYPO3 remembers the last setting and restores the previous state on the next login.

By using CSS/Flexbox scaffolding, browsers now load the TYPO3 backend faster. Also, less data is transferred between TYPO3 and the client, which improves performance.

Documentation

Introduced in version 10.3

This biggest and probably the most exciting new feature that has been eagerly awaited by the community made it into the TYPO3 core in time: dashboards.

The dashboard  provides backend users with a quick overview of important system information and statuses. At-a-glance information is displayed in widgets, and a wide range of types and styles are available out-of-the-box. Some standard widgets are included in the TYPO3 core, for example a “call-to-action button”, the Getting Started Tutorial, the TYPO3 news as a RSS feed, and some basic information about the current TYPO3 instance.

Flexibility and expandability were important factors during the concept phase and development of dashboards. Developers can create their own widgets and backend users can not only configure multiple dashboards (and easily switch between them), but also add, remove, and even rearrange widgets to their heart’s content.

To learn more about dashboards, read the article “An Update About the Dashboards” by Richard Haeser (Initiative Lead).

Documentation