Typo3 tx_mask um eigenen renderType erweitern

Die schöne Typo3-Extension „mask“ erlaubt das komfortable Anlegen eigener Inhaltselemente im Backend. Per Drag & Drop können die Formularfelder des Inhaltselementes definiert werden und die Extension generiert automatisch das passende TCA. Leider erlaubt die Extension aber nicht, einen eigenen renderType anzugeben, um z.B. ein eigenes Icon-Selector im Backend darzustellen.

Da mask technisch gesehen nichts anderes macht, als die tt_content-Tabelle um neue Spalten/Felder zu erweitern und das TCA für tt_content zu generieren, lässt sich der eigene renderType relativ leicht angeben.

Für Suchmaschinen: Eigenen renderType für TCA Typo3. Mask mit eigenem Formularelement erstellen. Custom form element für mask typo3. Backend TCA custom element mask.


1. Custom renderType registrieren

Zunächst wird in einer eigenen Extension der neue renderType registriert.
Die Zahl „1534412490“ ist ein eindeutiger Key – hier verwenden wir meistens den aktuellen UNIX-Timestamp.

ext_localconf.php

// Einen neuen renderType registrieren für FlexForm / TCA
$GLOBALS['TYPO3_CONF_VARS']['SYS']['formEngine']['nodeRegistry'][1534412490] = array(
	'nodeName' => 'nnsiteIconCollection',
	'priority' => '80',
	'class' => \Nng\Nnsite\Form\IconCollectionElement::class,
);

2. Hook zum Rendern des custom formelement / renderType

Unter EXT:nnsite/Classes/Form/IconCollectionElement folgt dann der Hook zum Rendern des neuen Formularelement-Typs:

<?php
namespace Nng\Nnsite\Form;
 
class IconCollectionElement {
 
 
	public function render() {
 
        $resultArray = $this->initializeResultArray();
 
        $fieldWizardResult = $this->renderFieldWizard();
        $fieldWizardHtml = $fieldWizardResult['html'];
        $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldWizardResult, false);
 
	// Hilfreiche Variablen...
	$PA = $this->data['parameterArray'];
	$config = $PA['fieldConf']['config'];
 
	// JS und CSS Dateien einbinden?
	$resultArray['requireJsModules'][] = $this->getRelExtPath().'Resources/Backend/TCA/IconCollection/script.js';
	$resultArray['stylesheetFiles'][] = $this->getRelExtPath().'Resources/Backend/TCA/IconCollection/style.css';
 
	// Hier die eigentliche Logik für das Generieren des Formular-Elementes
        $resultArray['html'] = '<input type="text" name="'.$PA['itemFormElName'].'" value="'.$PA['itemFormElValue'].'" />';
 
        return $resultArray;
    }
 
}

3. Beispiel Einbindung eigene JS-Datei mit requireJS Typo3 Backend

Ein Beispiel, wie die JS-Datei unter Berücksichtigung von requireJS aussehen kann:
EXT:nnsite/Resources/Backend/TCA/IconCollection/script.js

/**
* Module: Nng/Nnsite/IconCollection
*
*/
define(['jquery'], function ($) {
 
	var Main = {};
	Main.init = function () {
 
	     // Hier geht es los!
 
	};
 
	$(function() {
		Main.init();
	});
});

4. Erweitern / Überschreiben der Konfiguration für die tx_mask Spalte in tt_content

Dann der Teil, der das Feld in tt_content überschreibt und den renderType für die von mask erstellte Spalte festlegt:
EXT:nnsite/Configuration/TCA/Overrides/tt_content.php

<?php
 
# MASK hat die Tabelle tt_content um die Spalte 'tx_mask_iconcollection' erweitert.
# Hier möchten wir, dass das Formularelement mit unserem neuen renderType gerendert wird:
$GLOBALS['TCA']['tt_content']['columns']['tx_mask_iconcollection']['config']['renderType'] = 'nnsiteIconCollection';