Whow! Responsive Frontend-Editing für TYPO3

Dateneingabe im Frontend mit Desktop, Tablet und Smartphone

30.01.17 –

TYPO3 kann jetzt Frontend-Editing: Die neuste Version des Browsers – responsive TYPO3 ohne PHP – bringt ein entsprechendes Plugin mit (ab Version 8.x). Mit dem Plugin können Daten aus jeder x-beliebigen TYPO3-Erweiterung ausgelesen und wieder zurückgeschrieben werden. Das Eingabe-Formular wird mit Powermail erstellt: TYPO3-Redakteure können Formular-Seiten und Felder mit der Maus verschieben, hinzufügen und löschen, Bezeichnungen umbenennen und Eigenschaften ändern.

Die erste Extension mit dem neuen Frontend-Editing: Organiser

Die erste TYPO3-Erweiterung, die mit dem neuen Frontend-Editing ausgeliefert wird, ist der Organiser – responsive TYPO3 für Lobby und Veranstalter. Mit dem Organiser können unter anderem Nachrichten, Personal, Stellenangebote, Veranstaltungsorte und Termine verwaltet werden. Das Frontend-Editing ermöglicht es nun, etwa Veranstaltungen auch von Dritten eintragen zu lassen. So werden Websites mit dem Organiser zum Portal. Der Organiser wird ab Version 8.x mit Frontend-Editing ausgeliefert.

Live-Demo: veröffentliche einen Kalendereintrag!

Zum Frontend-Editing gibt es eine Live-Demo: Du kannst auf typo3-organiser.de Kalendereinträge veröffentlichen. Teste das mal am Desktop und auf dem Handy. Selbst komplexe Daten können auf kleinen Bildschirmen komfortabel und übersichtlich gepflegt werden.

So funktioniert es: TYPO3-Browser steuert Powermail

Das technische Konzept des Frontend-Editings ist einfach. Die Schnittstelle zum Nutzer – das Bearbeitungsformular – wird mit Powermail erstellt. Vor das Powermail-Plugin wird das Frontend-Editing-Plugin des Browsers geschaltet. Das Frontend-Editing-Plugin "belauscht" das Powermail-Plugin, holt bei Bedarf Daten aus der Datenbank und schreibt diese ins Powermail-Formular oder schreibt Daten aus dem Formular in die Datenbank.

Damit das Frontend-Editing-Plugin "Bescheid weiß", ob seine Dienste gefragt sind, müssen die Powermail-Marker in einem bestimmten Format bezeichnet werden. Heißt ein Marker etwa "tt_news__title", weiß das Frontend-Editing-Modul, dass es Daten aus der Tabelle "tt_news" und dort aus dem Feld "title" lesen bzw. dort hin schreiben soll.

Für das Frontend-Editing musste die Erweiterung Powermail nicht verändert werden. Das Browser-Plugin belauscht nur den Datenverkehr und verändert diesen gegebenenfalls. Das Plugin greift nicht in den Programmablauf der TYPO3-API oder in den von Powermail ein. Das Frontend-Editing-Plugin ist also eine ziemlich unabhängige Angelegenheit und sollte damit in Zukunft mit wenig Aufwand gewartet werden können.

Download für Entwickler

Der TYPO3-Browser in Version 8 und der Organiser in Version 8 stehen derzeit nur als Entwicklerversion zur Verfügung. Der Grund ist im Wesentlichen: Die Dokumentation ist veraltet.

Beide (und andere) Erweiterungen stehen jedem in meinem GIT-Repository zur Verfügung. Eine kleine Hilfe zum Frontend-Editing gibt es im ChangeLog beider Erweiterungen.

Browser 8.x und Organiser 8.x will ich in absehbarer Zeit im TYPO3-Repository veröffentlichen. Bislang konnte ich in etwa für ein Zehntel des Aufwands für die Entwicklung des Frontend-Editings Aufträge gewinnen. Über Sponsoring würde ich mich also sehr freuen.

Dirk Wildt, Die Netzmacher

Links