Was sind FlexForms in TYPO3?

Eine FlexForm in TYPO3 ist eine XML-Struktur. Sie wird genutzt, um Formulare zu definieren und mit ihren Werten zu speichern. Die Speicherung findet in einer Datenbankspalte, in der Regel pi_flexform, statt.

Dadurch lassen sich beliebig viele Felder definieren, ohne komplexe Datenbankstrukturen zu erstellen oder die Notwendigkeit zu haben, viele einzelne Datenbankspalten zu erstellen. 

Dadurch reduziert man die Anzahl der Spalten vor allem in der tt_content - Tabelle. Diese neigt oft durch die Installation von Extensions immer breiter zu werden.

Wo werden FlexForms genutzt?

Die FlexForms werden vor allen in Frontend Plugins genutzt, können aber auch bei anderen Inhaltselementtypen (CType) zum Einsatz kommen.

In der Welt der Frontend-Plugins ist das die einzige Möglichkeit, Felder zu erstellen. Diese Felder und die zugewiesenen Werte in diesen Feldern wird dann als XML String in der Datenbankspalte pi_flexform abgelegt.

Die Felder werden dann unter dem Reiter: Plugin bei den Frontend-Plugins als Plugin Options angezeigt.

Hier ein Beispiel aus der TYPO3 Extension News:

Alle Felder unterhalb der Plugin Options stammen aus der FlexForm Konfiguration, welche wie gesagt eine XML-Struktur ist.

Diese wird in einer separaten Datei definiert. Das sieht dann ungefähr so aus:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
    <sheets>
        <sDEF>
            <ROOT>
                <TCEforms>
                    <sheetTitle>LLL:EXT:t3templates_base/Resources/Private/Language/locallang_pricecard.xlf:flexform.tab.general</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el>                    
                    <currency>
                        <TCEforms>
                            <label>LLL:EXT:t3templates_base/Resources/Private/Language/locallang_pricecard.xlf:flexform.tab.general.currency</label>
                            <required>1</required>
                            <config>
                                <type>input</type>
                                <size>1</size>
                            </config>
                        </TCEforms>
                    </currency>
                </el>
            </ROOT>
        </sDEF>
    </sheets>
</T3DataStructure>

Die XML-Struktur ist eine T3DataStructure. Diese besteht aus Reitern (sheets). Jeder Reiter (hier: sDEF) besteht aus einer TCEforms, welche wiederum ein Titel und ein oder mehrere Elemente hat. Ein Element ist quasi ein Feld.

In dem obigen Beispiel gibt es 1 Reiter mit dem Namen: sDEF. Der Name ist kein Zufall mit sDEF wird der Defaultreiter bezeichnet. Mittlerweile kann er auch den Namen: main haben. Es ist notwendig, dass der erste Reiter sDEF oder main heisst.

Ein Reiter besitzt dann einen Titel (sheetTitle) der, in diesem Fall, aus einer Sprachdatei geladen wird. Alternativ ist es ebenfalls möglich, den Titel hier direkt einzutragen, wenn er nicht übersetzbar sein soll.

Die obere FlexForm hat ein Element mit dem Namen: currency, welches ein normales Eingabefeld (input) ist. Alle Elemente kommen in den Container: <el>.

Wenn dann das Frontend Plugin gespeichert wird, dann sieht die gespeicherte XML-Struktur in der tt_content Tabelle in der Datenbankspalte: pi_flexform wie folgt aus:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3FlexForms>
    <data>
        <sheet index="sDEF">
            <language index="lDEF">
                <field index="currency">
                    <value index="vDEF">€</value>
                </field>
            </language>
        </sheet>
    </data>
</T3FlexForms>

Bei der Benennung der Elemente kann man für Frontend Plugins einen Trick anwenden. Wenn man die Namen der Elemente: settings. vorran stellt, also im oberen Beispiel wäre es: settings.currency, dann werden diese automatisch dem Controller und der View übergeben.

Der Zugriff innerhalb einer Controller - Klasse ist dann:

$this->settings['currency']

und in der View, also innerhalb der Templatedateien, wäre er:

{$settings.currency}

Das besondere ist, dass man die Elemente dann nicht explizit vom Controller in die View mit $this->view->assign(...) übergeben muss. Man muss auch die Variable: $settings nicht manuell in die Partial - Dateien übergeben. Das geschieht voll automatisch.

Falls man sich jedoch entscheidet nicht diesen Trick zu benutzen. Dann gibt es ab TYPO3 12 einen FlexFormProcessor der ohne viel Konfiguration die XML-Struktur in ein assoziatives Array umwandeln und der View bereitstellen kann.

Im Falle eines Frontend Plugins muss der DataProcessor dann dem CType: list zugeordnet werden. Das sieht dann ungefähr so aus:

tt_content.list.dataProcessing {
  10 = \TYPO3\CMS\Frontend\DataProcessing\FlexFormProcesso
  10 {
   fieldName = pi_flexform
    as = flexForm
  }
}

Dann stehen alle Elemente aus dieser FlexForm der Fluidvariable: flexForm zur Verfügung. Der Name der Viewvariable bei as ist frei vergebbar.

Welche FlexForms Felder gibt es?

Es gibt im Prinzip alle Felder als FlexForm, die du im TYPO3 Backend findest. Diese korrespondieren auch mit dem HTML Formularfelder.

Es gibt einzeilige und mehrzeilige Eingabefelder, RTE Felder, Auswahlfelder, Checkboxen, Kategoriebäume oder Felder für Bilder bzw. Medien im Allgemeinen.

Unter den Code Snippets im T3 Campus findest du Codebeispiele als Kopiervorlagen zu diversen FlexForm Feldern in dem Artikel: Beispielkonfiguration von FlexForm - Feldern. 

Probiere diese am besten einmal aus. Praxis ist die effektivste Art zu Lernen.