TYPO3: Backendvorschau für eigene Inhaltselemente mit Flexform und Fluid

Lange habe ich wieder nach einer Anleitung zur Erstellung einer Backendvorschau eines eigenen Inhaltselementes für TYPO3 7.6.x gesucht. Da mein einziger Fund nur wenig aussagekräftig war, entschied ich mich selber einen Weg dafür zu suchen.

Registrieren des Hooks

Um unseren neuen Hook zu registrieren, öffnet ihr die „ext_localconf.php“-Datei einer dafür benötigten Mini-Extension.
Dort fügt ihr dann – am Besten ganz unten – folgende Zeile ein.
„meinCType“ ist hierbei der CType des Inhaltselementes und „PageLayoutViewDrawItemHook“ der Name eurer neuen Klasse, die ihr im zweiten Schritt benötigt.
Ich habe das Array mal untereinander aufgeteilt, damit es übersichtlicher für euch wird:

$GLOBALS['TYPO3_CONF_VARS']
        ['SC_OPTIONS']
        ['cms/layout/class.tx_cms_layout.php']
        ['tt_content_drawItem']
        ['meinCType'] = 'Mein\\Extension\\Namepace\\Hooks\\PageLayoutViewDrawItemHook';

Hinweis: Sollte die Exception „$hookObject must implement interface TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface“ auftreten, einfach die Extension de- und danach neuinstallieren.

Überschreiben des Rendering der Vorschau

Als Nächstes benötigt ihr die Flexform-Einstellungen um im Fluid darauf zugreifen zu können. Dazu erweitert ihr eure leere, neu erstellte Klasse um folgenden Code:

<?php

namespace Mein\Extension\Namespace\Hooks;

use TYPO3\CMS\Backend\View\PageLayoutView;
use TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface;
use TYPO3\CMS\Core\Utility\GeneralUtility;

/**
 * Hook to render preview widget of custom content elements in page module
 * @see \TYPO3\CMS\Backend\View\PageLayoutView::tt_content_drawItem()
 */
class PageLayoutViewDrawItemHook implements PageLayoutViewDrawItemHookInterface {

	/**
	 * Rendering for custom content elements
	 *
	 * @param PageLayoutView $parentObject
	 * @param bool $drawItem
	 * @param string $headerContent
	 * @param string $itemContent
	 * @param array $row
	 */
	public function preProcess(PageLayoutView &$parentObject, &$drawItem, &$headerContent, &$itemContent, array &$row) {
		if($row['CType'] !== 'meinCType') return;

		$drawItem = false;
		$headerContent = '<strong>' . htmlspecialchars($row['header']) . '</strong><br />';

		// Sammelt die Flexform-Einstellungen und entfernt bestimmte Array-Keys ("data", "sDEF", "lDEF", "vDEF") zur besseren Nutzung in Fluid
		$flexform = $this->cleanUpArray(GeneralUtility::xml2array($row['pi_flexform']), array('data', 'sDEF', 'lDEF', 'vDEF'));

		// Festlegen der Template-Datei
		/** @var \TYPO3\CMS\Fluid\View\StandaloneView $fluidTemplate */
		$fluidTmplFilePath = GeneralUtility::getFileAbsFileName('typo3conf/ext/meineExtension/Resources/Private/Templates/MeinBackendTemplate.html');
		$fluidTmpl = GeneralUtility::makeInstance('TYPO3\CMS\Fluid\View\StandaloneView');
		$fluidTmpl->setTemplatePathAndFilename($fluidTmplFilePath);
		$fluidTmpl->assign('flex', $flexform);

		// Rendern
		$itemContent = $parentObject->linkEditContent($fluidTmpl->render(), $row);
	}

    /**
	 * @param array $cleanUpArray
	 * @param array $notAllowed
	 * @return array|mixed
	 */
	public function cleanUpArray(array $cleanUpArray, array $notAllowed) {
		$cleanArray = array();
		foreach ($cleanUpArray as $key => $value) {
			if(in_array($key, $notAllowed)) {
				return is_array($value) ? $this->cleanUpArray($value, $notAllowed) : $value;
			} else if(is_array($value)) {
				$cleanArray[$key] = $this->cleanUpArray($value, $notAllowed);
			}
		}
		return $cleanArray;
	}
}

Die Methode „cleanUpArray“ dient der leichteren Nutzung von Flexform-Settings in Fluid und entfernt Array-Keys wie „data“, „sDEF“, „lDEF“ und „vDEF“, sodass aus bspw. {data.meinFlexformTab.lDEF.settingName.vDEF.settingValue} die vereinfachte Schreibweise {meinFlexformTab.settingName.settingValue} wird.

Bearbeiten des Templates

Schlussendlich fehlt euch noch das wichtigste – die Backendvorschau.
Dazu benötigt ihr weder den html-, noch den body-Tag. Ein Beispiel wäre:

<h4 style="text-align: center; text-decoration: underline; color: #0066FF;">Vorschauansicht</h4>
<ul>
	<li><strong>visible: </strong>{flex.meinFlexformTab.visibleInFrontend}</li>
	<li><strong>... </strong></li>
</ul>

Ja, das war’s schon und im Backend sieht es nach meinem Beispiel so aus:
Backendvorschau

4 Kommentare

  • TYPO3 hat die möglichkeit, dass man nur auf den content klickt und zum bearbeiten des inhaltes kommt.

    dafür die zeile mit

    $itemContent = $fluidTmpl->render();

    gegen

    $itemContent = $parentObject->linkEditContent($fluidTmpl->render(), $row);

    ersetzen und der redakteur freut sich.

  • Vielen Dank!
    Hat mir sehr geholfen.

  • Hi, super Anleitung!!

    Möchte gerne in der preProcess() auf mein Domain Model zugreifen zB.
    $uidausflexform = 319;
    $var = $this->meinRepository->findByUid(uidausflexform);
    $fluidTmpl->assign(‚meinevar‘, $var);

    Geht das an der Stelle überhaupt, bin da nicht so der Experte 🙂

    Für den Redakteur ist jedenfalls die Zahl aus dem Flexform zu wenig. Muss irgendwie den Titel des Elements auslesen.

    Irgendwelche Ideen?
    Habe das Repository injected aber ich glaube ich mache da grobe Fehler 🙂

    ps. Wie bekommst du den Element Titel hin, bei mir wird der Titel des Elementes (bei dir „Name des Inhaltselements“)

    Danke für den Beitrag!

Schreibe einen Kommentar zu andreas Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.