Beispielkonfigurationen von Flexform - Feldern (TYPO3 11)

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>
  <TCEforms>
    <label>Einfaches Input - Feld</label>
    <config>
      <type>input</type>
    </config>
  </TCEforms>
</settings.field1>

Textarea Konfigurationen für FlexForm

Einfaches Textarea Feld

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

Textarea als Richtext Editor (RTE)

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

SELECT - Felder in FlexForm

Einfaches Auswahlfeld

<settings.field1>
  <TCEforms>
    <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>
  </TCEforms>
</settings.field1>

Checkbox - Feld in FlexForm

Einfache Checkbox

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

Checkbox mit 2 Feldern

<settings.field1>
  <TCEforms>
    <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>
  </TCEforms>
</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>
  <TCEforms>
    <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>
  </TCEforms>
</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.

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>
  <TCEforms>
    <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>
  </TCEforms>
</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>
          <TCEforms>
            <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>
          </TCEforms>
        </header>
      </el>
    </item>
  </el>
</settings.list>