TYPO3 v14: Records-Modul mit visuellen Ansichtsmodi erweitern

Mehr Übersicht im TYPO3-Backend: Unsere Open-Source-Extension erweitert das Records-Modul um Grid-, Compact- und Teaser-Ansichten mit Drag & Drop.

Wer mit umfangreichen TYPO3-Installationen arbeitet, kennt die Situation: Das Records-Modul zeigt Datensätze als Tabelle – funktional, aber bei hunderten News-Artikeln oder Produkten wenig übersichtlich. Die Extension Records List Types schafft Abhilfe: Drei zusätzliche Ansichtsmodi mit Thumbnails und Drag & Drop machen die tägliche Arbeit spürbar effizienter.


Warum eine neue Listenansicht? 

Das Standard-Listenmodul in TYPO3 ist solide, aber auf eine Darstellungsform beschränkt. Bei bildlastigen Inhalten wie News, Produkten oder Galerien fehlt die visuelle Orientierung. Die Extension erweitert das Modul um Grid, Compact und Teaser-Ansichten – Redakteur:innen wählen selbst, was zu ihrem Workflow passt.


Ansichtsmodi 

Card-Layout mit Thumbnails 

Die Grid-Ansicht zeigt Datensätze als Karten mit Vorschaubildern. Geeignet für:

  • News-Artikel mit Teaserbildern
  • Produkte im E-Commerce-Kontext
  • Medien-Assets wie Bildergalerien

Drag & Drop Sortierung

Ein echtes Produktivitäts-Feature: Datensätze lassen sich per Drag & Drop umsortieren – ohne Umweg über Sortierungsfelder oder manuelle Positionswerte. Die neue Reihenfolge wird sofort in der Datenbank gespeichert. Besonders bei Bildergalerien oder Produktlisten spart das spürbar Zeit.

typoscript
mod.web_list.gridView.table.tx_news_domain_model_news {
    titleField = title
    descriptionField = teaser
    imageField = fal_media
    preview = 1
}

Features im Überblick 

Grid View

Visuelle Karten mit Thumbnails und Drag & Drop Sortierung.

Compact View

Mehr Datensätze pro Seite – ideal für große Listen.

Teaser View

Card-Format mit Titel, Datum und Beschreibung für redaktionelle Inhalte.

Custom Views

Eigene View-Typen via PSR-14 Events oder TSconfig registrieren.

User Preferences

Die bevorzugte Ansicht wird pro Account gespeichert und beim nächsten Login automatisch wiederhergestellt.

Dark Mode

Vollständige Kompatibilität mit TYPO3's Dark Mode.

Per-Table Config

Felder pro Tabelle individuell per TSconfig konfigurieren.

Sofort einsatzbereit

Funktioniert direkt nach der Installation – Feintuning optional.

Sicherheit

Input Validation, CSRF Protection, Access Control.


Installation 

Systemvoraussetzungen
  • TYPO3 v14.0+
  • PHP 8.3+
Bash
# Installation via Composer
composer require webconsulting/records-list-types

# Extension aktivieren
./vendor/bin/typo3 extension:activate records_list_types

Nach der Aktivierung erscheinen die View-Mode-Buttons im Header des Records-Moduls.


Konfiguration per TSconfig 

Felder pro Tabelle definieren 

Welche Felder in der Grid- oder Teaser-Ansicht erscheinen, steuern Sie granular per TSconfig:

typoscript
mod.web_list.gridView.table.tx_news_domain_model_news {
    titleField = title
    descriptionField = teaser
    imageField = fal_media
    preview = 1
}

Standard-Ansicht festlegen 

typoscript
mod.web_list.viewMode.default = grid
User Preferences

Die gewählte Ansicht wird pro Benutzer:in gespeichert. Beim nächsten Login ist automatisch die bevorzugte Darstellung aktiv.


Eigene View-Typen entwickeln 

Die Extension ist bewusst erweiterbar konzipiert. Drei Komponenten bilden einen Custom View:

PHP
<?php
namespace Vendor\Extension\EventListener;

use Webconsulting\RecordsListTypes\Event\RegisterViewModesEvent;

final class CustomViewModeListener
{
    public function __invoke(RegisterViewModesEvent $event): void
    {
        $event->addViewMode(
            identifier: 'kanban',
            label: 'Kanban Board',
            icon: 'actions-view-tiles',
            template: 'EXT:my_extension/Resources/Private/Templates/Kanban.html'
        );
    }
}

Architektur-Übersicht 

Architektur: View Mode Switching Flow

Sicherheit 

Die Extension folgt den TYPO3 Security Guidelines:

  • Input Validation: Benutzereingaben werden validiert und sanitized
  • SQL Injection Prevention: Verwendung von TYPO3's QueryBuilder mit parametrisierten Queries
  • CSRF Protection: AJAX-Endpoints nutzen TYPO3's Token-Handling
  • Access Control: Einhaltung der Backend-Benutzerberechtigungen

Dokumentation & Ressourcen 

DokumentBeschreibung
README.mdVollständige Dokumentation mit Screenshots
Architecture.mdTechnische Architektur und Komponentendiagramme
Configuration.mdKomplette TSconfig-Referenz
CustomViewTypes.mdEigene View-Typen erstellen
Extending.mdExtension Points und PSR-14 Events

Zusammenfassung 

Records List Types macht das TYPO3-Backend flexibler. Drei Ansichtsmodi, Drag & Drop und persistente User Preferences verbessern den Redaktionsalltag – ohne Konfigurationsaufwand nach der Installation.

Was Sie bekommen:

  • Drei vorkonfigurierte Ansichtsmodi: Grid, Compact, Teaser
  • Drag & Drop Sortierung in der Grid-Ansicht
  • Erweiterbar durch eigene View-Typen (PSR-14 / TSconfig)
  • Persistente User Preferences und Dark Mode
Open Source

Die Extension steht unter der GPL-2.0-Lizenz und ist frei verfügbar. Wir freuen uns über Feedback und Contributions.

Kontaktieren Sie uns für ein unverbindliches Gespräch.

E-Mail: office@webconsulting.at

Lassen Sie uns über Ihr Projekt sprechen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.