Consistent UX makes selecting items more intuitive

Improvements to the Element Browser and Link Picker in TYPO3 v11

Benni Mack

20 July 2022

Abstract graphic featuring various user interface elements, including lists, checkboxes, and icons representing links and actions, set against a gradient background of orange and green.

Previously in this series, we covered the improvements TYPO3 v11 brought to the Page Tree in the post, Resizable Navigation Area in TYPO3.

There is one feature in particular that deserves its own shiny spot in our list of new features in TYPO3 v11, and that is the tree functionality within the Element Browser and the Link Picker.

This post is part of our TYPO3 Version 11 Series. We’re shining a spotlight on some of the really useful features in version 11 and why you should upgrade.

What is the Element Browser?

The Element Browser lets you choose one or more files or records to embed on a page. Since TYPO3 can handle millions of records, they are grouped on pages—thus, the page tree is the natural first-level filter.

The Link Picker is used to link to a page, an asset, an email, or an external URL. Typically, the Link Picker is used within a Content Type when you link a text snippet or an image to point to a page, file or external URL.

Both features open a modal window with the page tree (or folder tree) on the left hand side. Page tree improvements made in previous versions of TYPO3 did not extend to this representation of the tree. As an editor working with lots of content, or many pages or folders, it was clear that these components also needed to be updated.

Everything new…

With TYPO3 v11, whenever you encounter a tree (including in the Link Picker and Element Browser), you can be confident that all the features you have come to know and love are supported:

SVG-based icon rendering—means rendering within the browser is super-fast
Keyboard navigation
Resizable navigation areas - which can also be collapsed completely
Dynamic loading of tree subpages
Stored state—the open/closed state of parts of the pagetree are shared across the main page tree and the opened tree
Filtering and searching
Display of the Page ID or the navigation title on a page

TYPO3 v11 Link Browser with Keyboard Navigation

TYPO3 v11 Trees in Record Selector - Anchor

… and the cherry on top!

Bonus! There are two new features that aren’t available in the main page tree.

The Link Picker now uses an “anchor” icon to link to a folder or file directly. Thus, you can now hover over a page when linking on a page, and select the icon within the tree to link to a page, or click on the page title to link to a content element directly.

In the Element Browser, when you select a page and the modal box reloads, the page frame is now kept and only the content frame is reloaded. This is a time-saver for TYPO3 installations with a large tree structure. The overall performance improvements in TYPO3 v11 mean that the available items of a page within the Element Browser are shown instantly!

See for yourself

Try out the Link Picker and Element Browser live in the TYPO3 Demo project at demo.typo3.org.

Want to try out the new feature?

If you’re as excited about these improvements as we are, get in touch and we’ll help you update to TYPO3 v11.

Let’s Connect

Written by:

b13 co-founder and TYPO3 CMS Core Development Lead, Benni Mack, heads our technical practices, setup and maintenance of our technical infrastructure, and coordinates our open-source contribution. His essential tool: TYPO3

Benni Mack CTO