Consistent UX makes selecting items more intuitive

Improvements to the Element Browser and Link Picker in TYPO3 v11

Benni Mack

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.

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.

TYPO3 v11 Element Browser
TYPO3 v11 Element Browser

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 Link Browser with Keyboard Navigation

… and the cherry on top!

TYPO3 v11 Trees in Record Selector - Anchor
TYPO3 v11 Trees in Record Selector - Anchor

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!

TYPO3 v11 Trees in Record Selector - Anchor
TYPO3 v11 Trees in Record Selector - Anchor

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