Typo3 Backend-Form meets AJAX

Wer hat heute noch nicht davon gehört? AJAX ist momentan in aller Munde und reiht sich perfekt in die Buzzwords des Web 2.0 ein. Google macht es vor und viele viele weitere ziehen mit.

Über die letzten Wochen und Monate hin weg wurden so schon etliche von neuen Anwendungen bekannt, die viele mit ihren Möglichkeiten überzeugten. Web-Entwickler, die JavaScript bisher schon aus Prinzip nicht oder nur im Notfall verwendeten (zu denen ich mich auch selbst zähle), betrachten JavaScript in einem ganz „neuen“ Licht. Und so werden inzwischen an allen Ecken und Enden Daten nachgeladen, Daten während der Eingabe verarbeitet und HTML-Elemente hin und her gedragged und gedropped.

Obwohl das Ganze im Prinzip nichts Neues ist, fördert der Hype um AJAX die zahlreichen JavaScript Frameworks die zur Zeit bekannt sind. Diese nehmen Entwicklern die Schwierigkeiten JavaScript Cross-Browser fähig zu machen und bieten Möglichkeiten um sehr schnell die oben genannten Aktionen einzubinden und mit ihnen zu arbeiten.

Kaum hat man die ersten Tests mit AJAX gemeistert, stellt sich für einen Typo3-Infizierten wie mich natürlich sofort die Frage, wie man AJAX in Typo3 integrieren kann.

Für das Projekt an dem ich gerade arbeite, musste ich eine Kursplan-Extension entwickeln. Hierbei werden von einem Redakteur verschiedene Kurse angelegt und diesen Zeiten, Tage und Trainer zugeteilt. Im Front-End wird dies anschließend in einer Tabelle dargestellt.

Als erstes überlegte ich mir, ob ich diese Tabelle einfach “hardcodiere” und anschließend über die htmlarea bearbeiten lasse. Dies wäre definitiv der geringste Aufwand, bringt allerdings das Problem mit sich, dass die einzelnen Kurse nicht in einer Datenbank gespeichert werden.

„And thats where a little AJAX comes in handy my hard rockin amigo!“

AJAX war an dieser Stelle für mich genau das Richtige, denn so konnte ich die Vorteile beider Seiten verwenden. Kurse die in einer Datenbank stehen und weitere Informationen haben können, sowie eine Tabelle die sich sehr schnell und einfach von einem Redakteur bearbeiten lässt.

Zusätzlich implementierte ich eine Drag ‘n Drop Funktionalität, die es dem Redakteur ermöglicht, einen Kurs von einem Feld in ein anderes zu ziehen sowie die Möglichkeit bei einem Klick auf ein Feld, ohne Kurs, an dieser Stelle einen neuen Kurs hinzuzufügen.

Doch wie kommt das ganze nun in mein Backend-Formular?

Mein Ziel war es, die Tabelle direkt über das Frontend-Plugin, ähnlich wie bei Flexform, zu bearbeiten. Hierzu waren ein paar Änderungen an der ext_tables.php meiner Extension fällig:

Als Erstes definierte ich ein temporäres Feld, welches meine Tabelle beinhaltet:

$tempColumns = Array (
  "hv_kursplan_kursplan" => Array(
    'label' => 'Kursplan',
    'config' => Array(
      'type' => 'user',
      'userFunc' => 'tx_kursplan_tcaform->show',
    )
  ),
);

Dieses Feld wird anschließend folgendermaßen eingebunden:

t3lib_div::loadTCA("tt_content");
t3lib_extMgm::addTCAcolumns("tt_content",  $tempColumns,1);
$TCA['tt_content']['types'][$_EXTKEY.'_pi1']
    ['showitem'] = 'hv_kursplan_kursplan;;;; 1-1-1';

Hiermit haben wir auch schon den größten Teil erledigt. Wie jetzt aber vielleicht schon einige bemerkt haben, rufe ich bei dem temporären Feld die User-Funktion „show“ der Klasse „tx_kursplan_tcaform“ auf. Diese Funktion gibt mir als Rückgabewert die HTML-Datei meiner AJAX-Tabelle und erweitert darin zusätzlich alle Pfade auf den Pfad zur Extension.

Und wieder mal wird klar: Typo3 kennt einfach keine Grenzen ;)