TYPO3 Form Framework in eigenen Extensions

Vortrag über die Erstellung eines Formulars mit dem Form Framework innerhalb einer Extbase Extension in TYPO3 9.5 im Rahmen des TYPO3 Meetups Hamburg am 03.06.2020

Transcript

1. Real Values. Alexander Bohndorf TYPO3 Form Framework in eigenen Extensions
2. Real Values. Ziele • eigene Extension mit extbase/fluid zur Anzeige von Produkten • Detailansicht für jedes Produkt • Kontaktformular auf der Detailansicht (erstellt mit Form Editor) • Versand des Formulars per Mail • Aufnahme des Produktnamens in das Formular
3. Real Values. List View
4. Real Values. Detail View
5. Real Values. Erweiterte Detail View mit Formular
6. Real Values. HTML-Mail nach Klick auf Submit
7. Real Values. • Fluid Template erweitern mit Formular-Viewhelpern • Eine Action im Controller hinzufügen für das Submit • Formularvalidierung erstellen / Fehlerhandling • “Finisher” händisch schreiben zum Versenden einer E-Mail • View anpassen zur Ausgabe einer Versandbestätigung ein einfachstes produktspezifisches Kontaktformular erfordert signifikanten Programmieraufwand Bisheriges Vorgehen: Formular mit extbase/fluid
8. Real Values. Neues Vorgehen • Formular weitestgehend im Form Editor vorbereiten • Formular Validierung im Form Editor konfigurieren • Finisher im Form Editor definieren • Confirm-Page / Message im Form Editor definieren • Serverseitige Logik vom Form-Framework nutzen
9. Real Values. Formular mit Form Framework einbinden
10. Real Values. Configuration/Form/FormSetup.yaml Pfad zu eigenen Form-Konfigurationen anlegen
11. Real Values. Eigene Konfiguration per TYPOSCRIPT einbinden: BE ext_localconf.php
12. Real Values. Formular im Form-Editor erstellen
13. Real Values. Formularinhalte im Form-Editor konfigurieren
14. Real Values. Formular im FE nutzen Configuration/TypoScript/setup.typoscript
15. Real Values. Bei fehlendem TYPOSCRIPT für das FE
16. Real Values. Das Formular rendern in der Show Action Resources/Private/Templates/TestRecord/Show.html
17. Real Values. formvh:render View-Helper
18. Real Values. Absenden des Formulars
19. Real Values. Die Perform Action... Photo by Alberto Gasco on Unsplash
20. Real Values. Zusammenspiel extbase und form Framework extbase plugin show action formvh:render viewhelper form framework magic state handling, validation, finishers
21. Real Values. Aufruf der perform Action extbase plugin show action formvh:render viewhelper form framework magic state handling, validation, finishers extbase plugin perform action formvh:render viewhelper form framework magic state handling, validation, finishers
22. Real Values. Erstellung der `perform` Action im Controller • soll die Validierung machen • soll die Finisher aufrufen • soll die Confirm-Page anzeigen • soll nicht gecached sein • soll innerhalb der show view stattfinden
23. Real Values. Die perform Action typo3conf/ext/test1/Classes/Controller/TestRecordController.php
24. Real Values. Neue Action registrieren im Plugin typo3conf/ext/test1/ext_localconf.php
25. Real Values. Formular erneut absenden
26. Real Values. Argument in der perform Action
27. Real Values. Dem Formular den aktuellen Datensatz mit übergeben Resources/Private/Templates/TestRecord/Show.html
28. Real Values. Formular um Produktfeld erweitern
29. Real Values. Produktfeld: Definition in yaml Datei Resources/Private/Forms/productContactForm.form.yaml
30. Real Values. Vorbelegung eines Feldes im Formular ? ? ?
31. Real Values. Aufbau der Yaml Konfiguration
32. Real Values. Alternative: Benannte Indizes
33. Real Values. Debugging der Formular Konfiguration typo3/sysext/form/Classes/ViewHelpers/RenderViewHelper.php patchen: in die Funktion renderStatic ein debug($overrideConfiguration); in Zeile 90 einfügen
34. Real Values. Debugging Ausgabe
35. Real Values. Syntax-Fehler in der Fluid inline Syntax • Komma hinter letztem Element zu viel • Komma nach einem Element vergessen • Klammern matchen nicht
36. Real Values. Vorteile gegenüber eines Formulars in Extbase/Fluid • Schneller erstellt • Bestehende Formular-Komponenten des Form-Framework werden einheitlich im Projekt verwendet • Validatoren und Finisher vom Form Framework können genutzt werden • (Fast) keine eigene Action, d.h. keine serverseitige Logik erforderlich
37. Real Values. Ausblick und weiterführende Informationen • voll kompatibel mit fluid_components • Formularlabels können mittels sitegeist/translatelabels übersetzt werden • Formulare können auch komplett programmatisch erstellt werden • https://docs.typo3.org/c/typo3/cms-form/9.5/en-us/Concepts/FrontendRendering/Ind ex.html • https://docs.typo3.org/c/typo3/cms-form/9.5/en-us/ApiReference/Index.html#apirefer ence-frontendrendering-programmatically
38. Real Values. Vielen Dank fürs Zuhören und offene Fragen