Neuerungen am Form Framework in TYPO3 v9
TYPO3 Form Framework /Im Oktober 2018 erscheint TYPO3 9 LTS. Das TYPO3 Update lohnt sich schon allein aufgrund der großartigen neuen Funktionen, die unser Team in das TYPO3 Form Framework integriert hat ;) Im folgenden Beitrag möchte Dir Björn - Team Lead der TYPO3 Form Initiative - diese Neuerungen vorstellen und Dir einen Ausblick auf mögliche Features in TYPO3 v10 geben.
Conditional Variants
Die wohl herausragendste und umfangreichste Neuerung ist die Einführung der sog. "Conditional Variants" oder kurz "Variants" bzw. "Varianten". Sie erlauben Dir, auf Basis von Bedingungen die Eigenschaften von Formularelementen zu verändern. So kannst Du in Abhängigkeit von anderen Formularelementen insbesondere:
- Validatoren hinzufügen oder entfernen,
- Formularelemente oder komplette Formularschritte ein- oder ausblenden und
- Optionen von Finishern beeinflussen.
Für das Translation Handling können ebenso Varianten genutzt werden. So besteht die Möglichkeit, Labels oder Werte von Formularelementen in Abhängigkeit von der aktuellen Sprache im Frontend anzuzeigen. Wie bereits oben erwähnt, sind wir in TYPO3 v9 in der Lage, die Sichtbarkeit von Formularelementen in den verschiedenen Ansichten zu steuern (Formular, Bestätigungsseite, Finisher). Dies geschieht mit Hilfe der Eigenschaft "enabled". Sonderlösungen, wie sie in TYPO3 8 LTS für das hidden Element oder die Einbindung von Inhaltselementen existieren, gehören damit der Vergangenheit an.
In TYPO3 v8 können Bedingungen nur eingeschränkt mittels der PHP API des TYPO3 Form Frameworks umgesetzt werden. Mit der Einführung von "Varianten" ist dies rein über eine relativ leicht verständliche YAML Konfiguration möglich. Technische Grundlage hierfür bildet die Symfony Expression Language, die in TYPO3 v9 zentral im Core zur Verfügung steht. Richtig cool ist, dass Du im Handumdrehen zusätzlich eigene Bedingungen und Vergleichsoperatoren definieren kannst.
Im folgenden Beispiel konfiguriere ich ein Formular mit einem Feld für die E-Mail Adresse und einer Checkbox für das Abonnement unseres Newsletters. Wenn der Nutzer die Checkbox aktiviert, dann muss er eine valide E-Mail Adresse zwingend eingeben. Die Auswertung des Ganzen geschieht beim Absenden des Formulars.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
type: Form
identifier: contact-us
label: Contact us
prototypeName: standard
renderables:
-
type: Page
identifier: contact-data
label: Contact data
renderables:
-
defaultValue: ''
type: Text
identifier: email-address
label: 'Email address'
variants:
-
identifier: variant-1
condition: 'formValues["subscribe-newsletter"] == 1'
properties:
fluidAdditionalAttributes:
required: 'required'
validators:
-
identifier: NotEmpty
-
identifier: EmailAddress
-
type: Checkbox
identifier: subscribe-newsletter
label: 'Subscribe to our newsletter'Das kurze Video zeigt dir die obige Form Definition in Aktion.
Mittlerweile wird diese Komponente auch für TypoScript Conditions verwendet und soll in kommenden TYPO3 Versionen in anderen Bereichen des TYPO3 Cores - wie bspw. für die TCA Display Conditions - integriert werden. Weitere Informationen zu den Conditional Variants findest du in der Dokumentation des TYPO3 Form Frameworks.
Bessere HTML5 Unterstützung
Wir alle lieben HTML5 und freuen uns, dass die Browserkompatibilität hinsichtlich spezieller Formulareigenschaften immer besser wird. In TYPO3 9 LTS unterstützen wir nun neben den Input Types "email", "tel", "url" und "number" auch "date". Weiterhin ist das "Date picker" Element noch vorhanden. Dieses benötigt allerdings für eine optimale Integration jQuery und jQuery UI, was in schlanken Frontends durchaus einen unnötigen Overhead darstellt.
Darüber hinaus können bei der Konfiguration eines Formularelements neuerdings auch Werte für "minlength", "maxlength", "min" und "max" gesetzt werden. Ferner unterstützen wir das "pattern" Attribut. Zusätzlich haben wir einen neuen Validator für die Überprüfung der Dateigröße bei Uploadelementen eingeführt.
Verbesserungen an der UX und UI
Neben den technischen Neuerungen haben wir während der TYPO3 UX Week im April und einem Form Sprint im Mai an der Verbesserung der UX und UI gearbeitet. So haben wir den Formular Manager visuell und inhaltlich an andere Module angeglichen.
Benji Kott hat mit viel Liebe und Geduld sämtliche Icons des TYPO3 Form Framework ins korrekte Licht gerückt und dabei die Bildsprache angepasst und für Konsistenz innerhalb der verschiedenen Ansichten gesorgt.
Im Formular Editor haben wir den Element Tree an den TYPO3 Page Tree angepasst und damit erheblich vergeilert. Darüber hinaus haben wir an zahlreichen Stellen an Abständen gedreht und diese vereinheitlicht sowie Benachrichtigungen und Hilfetexte hübsch gemacht. Während unserer Arbeit an TYPO3 9 LTS haben wir ein Problem mit der Ladegeschwindigkeit des Seiten- und Formular Moduls festgestellt und dieses durch ein intelligentes Caching um Faktor 10 beschleunigt.
Mikrooptimierungen
Mit TYPO3 9 LTS ist es im Formular Editor möglich, für jeden Validator eine individuelle Fehlermeldung zu pflegen.
Zur Freude zahlreicher Nutzer steht ein Finisher für die Pflege einer Bestätigungsnachricht - der sog. "Confirmation Finisher" - im Formular Editor zur Verfügung. Redakteure können entweder ein Inhaltselement anzeigen oder einen statischen Text ohne besondere Formatierung pflegen.
Bisher traten Probleme auf, wenn man versucht hat, ein Formular mehrfach auf einer Webseite einzubinden. Dieses Problem haben wir in TYPO3 9 LTS dadurch gelöst, dass wir die ID des Inhaltselements, welches das entsprechende Formular im Frontend einbindet, als Suffix für den Identifier des Formulars genutzt wird.
Eine weitere, wichtige Mikrooptimierung ist die Änderung des vom Formular Editor standardmäßig genutzten Verzeichnisses. In TYPO3 v8 werden Formulare suboptimalerweise im Verzeichnis "/user_uploads" gespeichert. Mit TYPO3 9 LTS haben wir dieses Missstand beseitigt und speichern Formulare im Verzeichnis "/form_definitions". Falls bereits Formulare im Verzeichnis "/user_uploads" existieren, werden diese nach wie vor im Frontend und Backend angezeigt. Sie können aber erst wieder bearbeitet werden, wenn sie manuell in das Verzeichnis "/form_definitions" verschoben wurden.
Ausblick auf TYPO3 v10
Mit der TYPO3-weiten Integration der Symfony Expression Language und den damit möglichen Conditional Variants haben wir eine sehr wichtige Grundlage für TYPO3 v10 geschaffen. Es ist nun möglich, den Formular Editor um entsprechende UI Komponenten zu erweitern, die es dem Redakteur erlauben:
- Übersetzungen von Formulareigenschaften direkt am Element zu pflegen und
- komplexe Bedingungen mit wenigen Klicks zu erzeugen.
Wenn wir diesen Meilenstein hinter uns gebracht haben, werden wir uns einigen kleineren Verbesserungen widmen:
- Wir wollen den CKEditor als neuen "Inspector-Editor" integrieren. Damit können Redakteure Labels und andere Textfelder bequem mit Markup anreichern, um so bspw. Texte zu formatieren oder Links einzufügen.
- Wir möchten den Redakteur in die Lage versetzen, das Template des Mail Finishers direkt im Formular Editor bearbeiten, erweitern und betrachten zu können.
- Wir wollen dem Redakteur ermöglichen, beliebig viele Empfänger dem Mail Finisher hinzufügen zu können.
Du kannst die Entwicklung des TYPO3 Form Frameworks auf unserem Board auf Forger verfolgen und bist herzlich eingeladen, Patches zu reviewen ;) Ich freue mich auf Dein Feedback und vielleicht lesen wir uns im #ext-form Channel auf Slack oder sehen uns beim Core Sprint im Dezember in Jena.
