T3 Campus T3 Campus

Beispielkonfigurationen von Flexform - Feldern

Ich zeige dir Codebeispiele zu diversen FlexForm Feldern, die du so in deinen Projekten als Kopiervorlage einfügen kannst.

Einfache Input Konfiguration für FlexForm

<settings.field1>
  <label>Einfaches Input - Feld</label>
  <config>
    <type>input</type>
  </config>
</settings.field1>

Textarea Konfigurationen für FlexForm

Einfaches Textarea Feld

<settings.field1>
  <label>Einfaches Textarea - Feld</label>
  <config>
    <type>text</type>
    <cols>20</cols>
    <rows>2</rows>
  </config>
</settings.field1>

Textarea als Richtext Editor (RTE)

<settings.field1>
  <label>RTE - Feld</label>
  <config>
    <type>text</type>
    <cols>20</cols>
    <rows>2</rows>
    <enableRichtext>true</enableRichtext>
  </config>
</settings.field1>

SELECT - Felder in FlexForm

Einfaches Auswahlfeld

<settings.field1>
  <label>Einfaches SELECT - Feld</label>
  <config>
    <type>select</type>
    <renderType>selectSingle</renderType>
    <items type="array">
      <numIndex index="0" type="array">
        <numIndex index="0"></numIndex>
      </numIndex>
      <numIndex index="1" type="array">
        <numIndex index="1">Wert 1</numIndex>
        <numIndex index="0">Label 1</numIndex>
      </numIndex>
      <numIndex index="2" type="array">
        <numIndex index="1">Wert 2</numIndex>
        <numIndex index="0">Label 2</numIndex>
      </numIndex>
    </items>
  </config>
</settings.field1>

Checkbox - Feld in FlexForm

Einfache Checkbox

<settings.field1>
  <label>Einfache Checkbox</label>
  <config>
    <type>check</type>
  </config>
</settings.field1>

Checkbox mit 2 Feldern

<settings.field1>
  <label>Einfache Checkbox</label>
  <config>
    <type>check</type>
    <items type="array">
      <numIndex index="0" type="array">
        <numIndex index="0">Label 1</numIndex>
      </numIndex>
      <numIndex index="2" type="array">
        <numIndex index="0">Label 2</numIndex>
      </numIndex>
    </items>
  </config>
</settings.field1>

Bilder (FAL) in FlexForms

Die Bilder bzw. FAL in FlexForms funktionieren nicht in TYPO3 12 Umgebungen die kleiner als 12.2 sind. Dort ist diese Funktion leider fehlerhaft, so dass nach der Speicherung des Bildes bzw. nach der Zuweisung die Anzeige in der FlexForm verschwindet.
Die Speicherung in der Datenbank ist jedoch korrekt und ein Auslesen ist möglich.

<field5>
  <label>Bild</label>
    <config>
      <type>inline</type>
      <maxitems>1</maxitems>
      <foreign_table>sys_file_reference</foreign_table>
      <foreign_table_field>tablenames</foreign_table_field>
      <foreign_label>uid_local</foreign_label>
      <foreign_sortby>sorting_foreign</foreign_sortby>
      <foreign_field>uid_foreign</foreign_field>
      <foreign_selector>uid_local</foreign_selector>
      <foreign_selector_fieldTcaOverride>
        <config>
          <appearance>
            <elementBrowserType>file</elementBrowserType>
            <elementBrowserAllowed>gif,jpg,jpeg,png,svg</elementBrowserAllowed>
          </appearance>
        </config>
      </foreign_selector_fieldTcaOverride>
      <foreign_types type="array">
        <numIndex index="0">
          <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
        </numIndex>
        <numIndex index="2">
          <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
        </numIndex>
      </foreign_types>
      <foreign_match_fields>
        <fieldname>field5</fieldname> <!-- This is the field name -->
      </foreign_match_fields>
      <appearance type="array">
        <newRecordLinkAddTitle>1</newRecordLinkAddTitle>
        <headerThumbnail>
          <field>uid_local</field>
          <height>64</height>
          <width>64</width>
        </headerThumbnail>
        <enabledControls>
          <info>1</info>
          <new>0</new>
          <dragdrop>0</dragdrop>
          <sort>1</sort>
          <hide>0</hide>
          <delete>1</delete>
          <localize>1</localize>
        </enabledControls>
        <createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
      </appearance>
      <behaviour>
        <localizationMode>select</localizationMode>
        <localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
      </behaviour>
      <overrideChildTca>
        <columns type="array">
          <uid_local type="array">
            <config type="array">
            <appearance type="array">
              <elementBrowserType>file</elementBrowserType>
              <elementBrowserAllowed>jpg,png,svg,jpeg,gif</elementBrowserAllowed>
            </appearance>
          </config>
        </uid_local>
      </columns>
      <types type="array">
        <numIndex index="2">
          <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
        </numIndex>
      </types>
    </overrideChildTca>
  </config>
</field5>

Wenn du mehrere Bilder zuweisen möchtest, dann erhöhe den Wert in <maxitems>..</maxitems>.

Da man die FlexForm Bilder nicht in das settings Array schreiben lassen kann, muss man im Controller folgendes ergänzen, um an das Bild zu kommen.

$filesProcessor = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Frontend\DataProcessing\FilesProcessor::class);
$image = $filesProcessor->process(
  $this->configurationManager->getContentObject(),
  [],
  [
    'references.' => [
      'fieldName' => 'field5',
      'table' => 'tt_content',
    ],
    'as' => 'image',
  ],
  []
);

INLINE in FlexForms

Der Begriff INLINE bezeichnet die Inhaltselemente, wo man Datensätze von Datenbanken in einer FlexForm einbinden kann.

Du kennst diese Felder bereits, beispielsweise Bilder werden im Backend als Inline - Elemente eingebunden.

INLINE Beispiel im Form eines Bilduploadfeldes

Ein Feld wo man über ein Button neue Datensatzeinträge machen kann, ist ein INLINE - Feld.

Ein INLINE - Feld in einer FlexForm sieht wie folgt aus:

<field6>
  <label>Field 6 Label</label>                        
  <config>
    <type>inline</type>
    <foreign_table>tt_content</foreign_table>
    <appearance>
      <showSynchronizationLink>1</showSynchronizationLink>
      <showAllLocalizationLink>1</showAllLocalizationLink>
      <showPossibleLocalizationRecords>1</showPossibleLocalizationRecords>
    </appearance>
  </config>
</field6>

Kategorien in FlexForms

Du kannst auch die Systemkategorien als FlexForm Feld einbinden. Das geht wie folgt:

<field7>
  <config>
    <type>category</type>
  </config>
</field7>

Wiederholbare Elemente in FlexForms

Du kannst in FlexForms auch ein Container Element erstellen, dass viele Typen von FlexForm - Feldern wiederholen kann.
Dadurch kannst du diverse Listen - Elemente, wie Accordions und Tabs erstellen.

<settings.list>
  <title>LLL:EXT:t3camp_extensiondev/Resources/Private/Language/locallang_flexforms.xlf:example_sheet_general_list</title>
  <type>array</type>
  <section>1</section>
  <el>
    <item>
      <title>LLL:EXT:t3camp_extensiondev/Resources/Private/Language/locallang_flexforms.xlf:example_sheet_general_list_item</title>
      <type>array</type>
      <el>
        <header>
          <label>LLL:EXT:t3camp_extensiondev/Resources/Private/Language/locallang_flexforms.xlf:example_sheet_general_list_item_header</label>
          <config>
            <type>input</type>
            <eval>trim</eval>
            <required>1</required>
          </config>
        </header>
      </el>
    </item>
  </el>
</settings.list>

Bereit mehr zu lernen?

Dann komme in meine TYPO3 Onlineschule

Als Mitglied des T3 Campus für TYPO3 Schulungen erhältst du eine einzigartige Lernplattform, um professionelle Webseiten mit TYPO3 zu erstellen. Egal, ob du ein Einsteiger, Umsteiger oder bereits erfahren bist – hier findest du die passenden Lernvideos für dich.

Kevin Chileong Lee

Gründer vom T3 Campus, TYPO3 Experte mit 10+ Jahren Erfahrung, TYPO3 Liebhaber.

Ich helfe dir dabei, deine Projekte in TYPO3 umzusetzen.

Insbesondere für TYPO3 Einsteiger biete ich zahlreiche kostenfreie Tutorials und kostenpflichtige Kurse rund um TYPO3 an.
Damit kannst du in wenigen Tagen auch ohne Vorkenntnisse deine erste TYPO3 Webseite erstellen und Erweiterungen programmieren.

Auf meinem YouTube-Kanal findest du viele praktische Beispiele und Videotutorials als auch allgemein Videos zu diversen TYPO3 Themen.

Neber den TYPO3 Tutorials und Kopiervorlagen, schreibe ich auch Artikel auf meinem Blog über diverse Themen und Fragen, die die meisten TYPO3 Einsteiger, haben.

Falls du ein TYPO3 Coaching suchst, dann stehe ich dir in einer 1:1 Trainingssession zur Verfügung.

Wenn du auf dem Laufenden sein möchtest über meine Projekte, dann abonniere den Newsletter.