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
   

   View Slide

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
   

   View Slide

3. Real Values.
   List View
   

   View Slide

4. Real Values.
   Detail View
   

   View Slide

5. Real Values.
   Erweiterte Detail View mit Formular
   

   View Slide

6. Real Values.
   HTML-Mail nach Klick auf Submit
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. Real Values.
   Formular mit Form Framework einbinden
   

   View Slide

10. Real Values.
    Configuration/Form/FormSetup.yaml
    Pfad zu eigenen Form-Konfigurationen anlegen
    

    View Slide

11. Real Values.
    Eigene Konfiguration per TYPOSCRIPT einbinden: BE
    ext_localconf.php
    

    View Slide

12. Real Values.
    Formular im Form-Editor erstellen
    

    View Slide

13. Real Values.
    Formularinhalte im Form-Editor konfigurieren
    

    View Slide

14. Real Values.
    Formular im FE nutzen
    Configuration/TypoScript/setup.typoscript
    

    View Slide

15. Real Values.
    Bei fehlendem TYPOSCRIPT für das FE
    

    View Slide

16. Real Values.
    Das Formular rendern in der Show Action
    Resources/Private/Templates/TestRecord/Show.html
    

    View Slide

17. Real Values.
    formvh:render View-Helper
    

    View Slide

18. Real Values.
    Absenden des Formulars
    

    View Slide

19. Real Values.
    Die Perform Action...
    Photo by Alberto Gasco on Unsplash
    

    View Slide

20. Real Values.
    Zusammenspiel extbase und form Framework
    extbase plugin
    show action
    formvh:render viewhelper
    form framework magic
    state handling, validation, finishers
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Real Values.
    Die perform Action
    typo3conf/ext/test1/Classes/Controller/TestRecordController.php
    

    View Slide

24. Real Values.
    Neue Action registrieren im Plugin
    typo3conf/ext/test1/ext_localconf.php
    

    View Slide

25. Real Values.
    Formular erneut absenden
    

    View Slide

26. Real Values.
    Argument in der perform Action
    

    View Slide

27. Real Values.
    Dem Formular den aktuellen Datensatz mit übergeben
    Resources/Private/Templates/TestRecord/Show.html
    

    View Slide

28. Real Values.
    Formular um Produktfeld erweitern
    

    View Slide

29. Real Values.
    Produktfeld: Definition in yaml Datei
    Resources/Private/Forms/productContactForm.form.yaml
    

    View Slide

30. Real Values.
    Vorbelegung eines Feldes im Formular
    ?
    ? ?
    

    View Slide

31. Real Values.
    Aufbau der Yaml Konfiguration
    

    View Slide

32. Real Values.
    Alternative: Benannte Indizes
    

    View Slide

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
    

    View Slide

34. Real Values.
    Debugging Ausgabe
    

    View Slide

35. Real Values.
    Syntax-Fehler in der Fluid inline Syntax
    ● Komma hinter letztem Element zu viel
    ● Komma nach einem Element vergessen
    ● Klammern matchen nicht
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. Real Values.
    Vielen Dank fürs Zuhören und offene Fragen
    

    View Slide