TYPO3-Backend radikal vereinfachen

In diesem Blogpost beschreiben wir, wie man die große Anzahl der Möglichkeiten in TYPO3 radikal reduzieren kann.
    • Das Backend wird dadurch übersichtlich und verständlich.
    • TYPO3 behält seine umfassenden Fähigkeiten.
    • Jegliche Komplexität wird in den Hintergrund verlagert.

Hilfe, TYPO3 hat zu viele Einstellmöglichkeiten!

Das rufen vermutlich manche Redakteure, wenn sie aus Bequemlichkeit zum Admin gemacht worden sind und zum ersten Mal auf die Einsteller in der News-Extension treffen.

Hier lassen sich Dinge einstellen wie Kategorien, Startpunkt im Seitenbaum, Rekursions-Eigenschaften, Zeitlimits und vieles mehr. Im Bild ist sogar nur einer von drei Reitern zu sehen: Die Möglichkeiten sind sogar noch viel größer

Doch gerade weil sie so viele Konfigurationsmöglichkeiten bietet, nehmen wir die News-Extension hier als Beispiel: Hier lohnt sich das Vereinfachen besonders.

Aber alles in diesem Blog gilt für alle TYPO3-Plugins! Auf dem hier gezeigten Weg lassen sich alle Extensions für die Redakteure „entschärfen“.

Eigenes Plugin ersetzt die Fremd-Extension

Der Grundgedanke ist einfach: Wir legen ein eigenes Plugin an, das nur die notwendigen Einsteller enthält.

Es heißt hier NewsByCategory, und ist quasi ein reduziertes News-Plugin. Dem Redakteur gegenüber verhält es sich wie ein normales Inhalts-Element. Er kann es an beliebiger Stelle seiner Webseite einbauen. Aber, und das ist wichtig: Er kann darin nur noch die Kategorien einstellen!

News By Category ist das reduzierte Plugin. Das normale News-Plugin kann parallel weiter bestehen, aber man wird es in den meisten Fällen vermutlich vor dem Redakteur verbergen wollen.

Vereinfachte Konfiguration

Für den Redakteur ist Konfiguration nun so einfach, wie sie nur sein kann: Er wählt die Kategorie der anzuzeigenden News aus – und fertig.

Alles, was sowieso fest steht, wurde vom Integrator der Seite im Vorhinein fest gelegt: Wo die News zu finden sind, welches Ausgabetemplate gewählt wird, wie der Fall von mehreren angeklickten Kategorien zu behandeln ist und eben alles weitere, was die News-Extension bietet.

Viele weitere Varianten sind denkbar: Nach demselben Schema könnte man eine Event-Liste zeigen, die News von einem anderen Startpunkt bündelt. Oder es ließe sich ein Plugin ergänzen, das eine händisch ausgewählte Liste einzelner News aufnimmt, die als Teaser auf der Webseite angezeigt werden sollen.

So lassen sich einfache Lösungen für jeden Anwendungsfall erstellen.

Für den Redakteur ist die Arbeit anschließend selbsterklärend: Er findet im BE genau jene Plugins vor, die er verwenden möchte und genau jene Einsteller, die für ihn relevant sind.


Die Umsetzung

Der folgende Abschnitt ist gedacht für Integratoren und Entwickler, die diese Lösung bei den von ihnen betreuten Webseiten umsetzen wollen. Von jetzt an wird es technisch und wir setzen einiges an Vorwissen voraus.

1. Plugin definieren

\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
  'News',
  'Newsbycategory',
  [\GeorgRinger\News\Controller\NewsController::class => 'list'],
  [],
  \TYPO3\CMS\Extbase\Utility\ExtensionUtility::PLUGIN_TYPE_CONTENT_ELEMENT
);

$icons = [
  'content-news-by-category' => 'EXT:news/Resources/Public/Icons/Extension.svg',
];
$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconRegistry::class);
foreach ($icons as $identifier => $path) {
    $iconRegistry->registerIcon(
      $identifier,
      \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
      ['source' => $path]
    );
}
ext_localconf.php

Der eigene Name unseres Plugins ist in diesem Fall „Newsbycategory“. Er kann willkürlich gewählt werden.

Die Registrierung erfolgt hier der Syntax, die ab TYPO3 11 gültig ist. In früheren Versionen wird configurePlugin etwas anders angesprochen.

Optional können wir im gleichen File ein eigenes Icon ("content-news-by-category") für unser Plugin registrieren. Hier haben wir beispielhaft dasselbe Icon wie die News-Extension verwendet.

2. TCA definieren

<?php
(function ($tablename = 'tt_content', $contentType = 'news_newsbycategory') {
    \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA'][$tablename], [
      'ctrl' => [
        'typeicon_classes' => [
          $contentType => 'content-news-by-category',
        ],
      ],
      'types' => [
        $contentType => [
          'showitem' => implode(',', [
            '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general',
                '--palette--;;general',
                'pi_flexform',
            '--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,--palette--;;frames,--palette--;;appearanceLinks,',
            '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language,--palette--;;language,',
            '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
              --palette--;;hidden,
              --palette--;;access,
            --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes,
                 rowDescription,
            --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,'
          ]),
        ],
      ],
      'columns' => [
        'pi_flexform' => [
          'config' => [
            'ds' => [
              '*,' . $contentType => 'FILE:EXT:sitepackage/Configuration/Flexforms/ContentElement/NewsByCategory.xml',
            ],
          ],
        ],
      ],
    ]);

    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
      $tablename,
      'CType',
      [
        'LLL:EXT:sitepackage/Resources/Private/Language/locallang_backend.xlf:tt_content.news_newsbycategory.title',
        $contentType,
        'content-news-by-category',
      ],
      'textpic',
      'after'
    );
})();
Configuration/TCA/Overrides/tt_content.php

Wichtig zu beachten:

  • $contentType = news_newsbycategory -> der Name setzt sich zusammen aus dem Namen der Extension + Name des Plugins.
    Hier bitte aufpassen: Wenn der Name nicht stimmt, findet das Frontend die Rendering-Informationen nicht und wirft einen Fehler!
  • typeicon_classes -> die Definition eines Icons ist optional
  • pi_flexform -> eine Flexform ist prinzipiell auch optional, wird hier aber natürlich benötigt, weil dort die Formularfelder definiert werden, die dem Redakteur noch bleiben.

3. Typoscript erstellen

plugin.tx_news_newsbycategory {
    settings {
        orderBy = datetime
        orderDirection = desc
        categoryConjunction = 'or'
    }
    view {
        pluginNamespace = news_newsbycategory
    }
}

Das neue Plugin muss im Typoscript definiert werden (irgendwo im Setup). In unserem Fall stehen im Abschnitt alle Settings, die beim Einbau des Plugins fix definiert sein sollen - das können natürlich noch viel mehr sein. Im wesentlichen ist alles möglich, was tx_news erlaubt.

Im Abschnitt view werden die normalerweise die Template-Verzeichnisse definiert. Das haben wir uns in diesem Fall gespart, weil die gleichen Pfade wie für die anderen News-Plugins verwendet werden.

4. Flexform festlegen

<T3DataStructure>
    <sheets>
        <sDEF>
            <ROOT>
                <TCEforms>
                    <sheetTitle>LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:flexforms_tab.settings</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el>
                    <!-- Category -->
                    <settings.categories>
                        <TCEforms>
                            <label>LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:flexforms_general.categories</label>
                            <config>
                                <type>select</type>
                                <renderMode>tree</renderMode>
                                <renderType>selectTree</renderType>
                                <treeConfig>
                                    <!--<dataProvider>GeorgRinger\News\TreeProvider\DatabaseTreeDataProvider</dataProvider>-->
                                    <parentField>parent</parentField>
                                    <appearance>
                                        <maxLevels>99</maxLevels>
                                        <expandAll>TRUE</expandAll>
                                        <showHeader>TRUE</showHeader>
                                    </appearance>
                                </treeConfig>
                                <foreign_table>sys_category</foreign_table>
                                <foreign_table_where>AND (sys_category.sys_language_uid = 0 OR sys_category.l10n_parent = 0) ORDER BY sys_category.sorting</foreign_table_where>
                                <size>15</size>
                                <minitems>0</minitems>
                                <maxitems>99</maxitems>
                            </config>
                        </TCEforms>
                    </settings.categories>
                </el>
            </ROOT>
        </sDEF>
    </sheets>
</T3DataStructure>
Configuration/Flexforms/ContentElement/NewsByCategory.xml

Weiter muss die Flexform definiert werden, an dem Ort, zu dem oben im TCA verlinkt wird (siehe Schritt 2).

Die Flexform enthält einzelne Elemente aus der Flexform von tx_news - allerdings nur die, welche die Redakteure für dieses Plugins benötigt. In unserem Fall ist das die Auswahl der Kategorien.

Es ist auch möglich, den <config>-Abschnitt zu ändern. Die Namen (hier: settings.categories) müssen aber bleiben, da die Extension news natürlich wissen muss, was es mit den Daten anfangen soll.

5. NewContentElementWizard definieren

mod.wizards.newContentElement.wizardItems.plugins {
    elements {
        news_newsbycategory {
            iconIdentifier = content-news-by-category
            title = LLL:EXT:sitepackage/Resources/Private/Language/locallang_backend.xlf:tt_content.news_newsbycategory.title
            description = LLL:EXT:sitepackage/Resources/Private/Language/locallang_backend.xlf:tt_content.news_newsbycategory.description
            tt_content_defValues {
                CType = news_newsbycategory
            }
        }
    }
    show := addToList(news_newsbycategory)
}
mod.web_layout.tt_content.preview.news_newsbycategory = EXT:sitepackage/Resources/Private/Templates/ContentElementsPreview/NewsByCategory.html
Configuration/TSconfig/Page/Mod/Wizards/newContentElement.tsconfig

Die Ergänzung des newContentElement-Wizards ist im Prinzip optional - aber zwingend, wenn man das Backend wirklich gut bedienbar machen möchte.

Hier wird auch definiert, wo sich die Render-Definition der Backend-Preview für das Conent-Element befindet.

6. Backend-Preview gestalten

Presseteaser der Kategorie: {pi_flexform_transformed.settings.categories}
Resources/Private/Templates/ContentElementsPreview/NewsByCategory.html

Im Backend-Template haben wir hier beispielhaft nur die id der gewählten Kategorie eingeblendet. Das kann man natürlich verbessern, wenn man über einen eigenen Viewhelper die Namen der gewählten Kategorien ermittelt und anzeigt.