Examples

Simple FlexForm

The extension styleguide provides some sample FlexForms. The “simple FlexForm” field provides a very basic configuration with just a select-type field to choose a page from the table pages.

The corresponding TCA column loads the DataStructure (ds) form an external XML file:

      'flex_file_1' => [ 
         'exclude' => 1,
         'label' => 'flex_file_1 simple flexform in external file',
         'description' => 'field description',
         'config' => [ 
            'type' => 'flex',
            'ds' => [ 
               'default' => 'FILE:EXT:styleguide/Configuration/FlexForms/Simple.xml',
            ],
         ],
      ],
      // Example from extension "styleguide", table "tx_styleguide_flex"

The DataStructure used to render this field is found in the file “Simple.xml” inside the styleguide extension. Notice the <TCEforms> tags:

<T3DataStructure>
    <meta>
        <langDisable>1</langDisable>
    </meta>
    <sheets>
        <sDEF>
            <ROOT>
                <TCEforms>
                    <sheetTitle>Sheet Title</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el>
                    <pageSelector>
                        <TCEforms>
                            <label>Page selector title</label>
                            <config>
                                <type>select</type>
                                <renderType>selectSingle</renderType>
                                <items type="array">
                                    <numIndex index="0" type="array">
                                        <numIndex index="0">Choose Page</numIndex>
                                        <numIndex index="1">0</numIndex>
                                    </numIndex>
                                </items>
                                <foreign_table>pages</foreign_table>
                                <foreign_table_where>ORDER BY title</foreign_table_where>
                                <minitems>0</minitems>
                                <maxitems>1</maxitems>
                            </config>
                        </TCEforms>
                    </pageSelector>
                </el>
            </ROOT>
        </sDEF>
    </sheets>
</T3DataStructure>

It’s clear that the contents of <TCEforms> is a direct reflection of the field configurations we normally set up in the $GLOBALS['TCA'] array.

FlexForm in a plugin

The Data Structure for a FlexForm can also be loaded in the “pi_flexform” field of the “tt_content” table by adding the following to the ext_tables.php file of the extension:

$GLOBALS['TCA']['tt_content']['types']['list']['subtypes_addlist']['examples_pi1']
     = 'pi_flexform';
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
   'examples_pi1',
   'FILE:EXT:examples/Configuration/FlexForms/Main.xml');

In the first line the tt_content field “pi_flexform” is added to the display of fields when the plugin type is selected and set to “examples_pi1”. In the second line the DS xml file is configured to be the source of the FlexForm DS used.

If we browse the definition for the “pi_flexform” field in “tt_content” below “columns” using the Admin > Configuration module for “$GLOBALS[‘TCA’] (Table configuration array)”, we can see the following:

The type selector of a content elements

The type selector of a content elements

As you can see there are quite a few extensions that have added pointers to their Data Structures. Towards the bottom we can find the one we have just been looking at.

Example: FlexForm with two sheets

This example provides a FlexForm field with two “sheets”. Each sheet can contain a separate FlexForm structure. Each sheet can also have a sheet descriptions:

In this example the FlexForm data structure is saved directly into the TCA field:

      'flex_1' => [ 
         'exclude' => 1,
         'label' => 'flex_1 sheet description',
         'description' => 'field description',
         'config' => [ 
            'type' => 'flex',
            'ds' => [ 
               'default' => '
                        <T3DataStructure>
                            <sheets>
                                <sSheetdescription_1>
                                    <ROOT>
                                        <TCEforms>
                                            <sheetTitle>sheet description 1</sheetTitle>
                                            <sheetDescription>
                                                sheetDescription: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                Nam id ante ornare, iaculis elit a, malesuada augue. Etiam neque odio,
                                                condimentum sed dolor vitae, sollicitudin varius lacus. Pellentesque sit amet aliquam arcu.
                                                Phasellus ut euismod felis. Fusce at tempor turpis.

                                                Nam eu arcu id lorem vestibulum tristique vel in erat. Phasellus maximus, arcu nec
                                                condimentum venenatis, mauris nisl venenatis tellus, eget suscipit arcu nunc et purus.
                                                Nunc luctus congue vulputate. Donec placerat, lorem vitae rhoncus euismod, ipsum ligula
                                                tempor sapien, ac sodales metus mauris et lacus. Donec in ante a lectus semper rutrum nec
                                                ut orci. Quisque id mi ultrices lacus fermentum consequat quis sed odio. Sed quis turpis
                                                rutrum, convallis sem vitae, cursus enim. Maecenas sit amet sem nisi.
                                            </sheetDescription>
                                            <sheetShortDescr>
                                                sheetShortDescr: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                Nam id ante ornare, iaculis elit a, malesuada augue. Etiam neque odio,
                                                condimentum sed dolor vitae, sollicitudin varius lacus. Pellentesque sit amet aliquam arcu.
                                                Phasellus ut euismod felis. Fusce at tempor turpis.
                                            </sheetShortDescr>
                                        </TCEforms>
                                        <type>array</type>
                                        <el>
                                            <input_1>
                                                <TCEforms>
                                                    <label>input_1</label>
                                                    <config>
                                                        <type>input</type>
                                                    </config>
                                                </TCEforms>
                                            </input_1>
                                        </el>
                                    </ROOT>
                                </sSheetdescription_1>
                                <sSheetdescription_2>
                                    <ROOT>
                                        <TCEforms>
                                            <sheetTitle>sheet description 2</sheetTitle>
                                            <sheetDescription>
                                                foo
                                            </sheetDescription>
                                            <sheetShortDescr>
                                                bar
                                           </sheetShortDescr>
                                        </TCEforms>
                                        <type>array</type>
                                        <el>
                                            <input_2>
                                                <TCEforms>
                                                    <label>input_2</label>
                                                    <config>
                                                        <type>input</type>
                                                    </config>
                                                </TCEforms>
                                            </input_2>
                                        </el>
                                    </ROOT>
                                </sSheetdescription_2>
                            </sheets>
                        </T3DataStructure>
                    ',
            ],
         ],
      ],
      // Example from extension "styleguide", table "tx_styleguide_flex"

Notice how the data of the two sheets are separated.

A flex form field with two flex section containers

In this example the FlexForm data structure is saved directly into the TCA field:

      'flex_2' => [ 
         'exclude' => 1,
         'label' => 'flex_2 section container',
         'config' => [ 
            'type' => 'flex',
            'ds' => [ 
               'default' => '
                        <T3DataStructure>
                            <sheets>
                                <sSection>
                                    <ROOT>
                                        <TCEforms>
                                            <sheetTitle>section</sheetTitle>
                                        </TCEforms>
                                        <type>array</type>
                                        <el>
                                            <section_1>
                                                <title>section_1</title>
                                                <type>array</type>
                                                <section>1</section>
                                                <el>
                                                    <container_1>
                                                        <type>array</type>
                                                        <title>container_1</title>
                                                        <el>
                                                            <input_1>
                                                                <TCEforms>
                                                                    <label>input_1 description</label>
                                                                    <description>field description</description>
                                                                    <config>
                                                                        <type>input</type>
                                                                    </config>
                                                                </TCEforms>
                                                            </input_1>
                                                            <input_2>
                                                                <TCEforms>
                                                                    <label>input_2 renderType=colorpicker</label>
                                                                    <config>
                                                                        <type>input</type>
                                                                        <renderType>colorpicker</renderType>
                                                                        <size>10</size>
                                                                    </config>
                                                                </TCEforms>
                                                            </input_2>
                                                        </el>
                                                    </container_1>
                                                    <container_2>
                                                        <type>array</type>
                                                        <title>container_2</title>
                                                        <el>
                                                            <text_1>
                                                                <TCEforms>
                                                                    <label>text_1 default "foo"</label>
                                                                    <config>
                                                                        <type>text</type>
                                                                        <default>foo</default>
                                                                    </config>
                                                                </TCEforms>
                                                            </text_1>
                                                        </el>
                                                    </container_2>
                                                </el>
                                            </section_1>
                                        </el>
                                    </ROOT>
                                </sSection>
                            </sheets>
                        </T3DataStructure>
                    ',
            ],
         ],
      ],
      // Example from extension "styleguide", table "tx_styleguide_flex"

Example: Rich Text Editor in FlexForms

Creating a RTE in FlexForms is done by enabling “enableRichtext” content to the <TCEforms> tag:

                                            <rte_1>
                                                <TCEforms>
                                                    <label>rte_1</label>
                                                    <config>
                                                        <type>text</type>
                                                        <enableRichtext>1</enableRichtext>
                                                    </config>
                                                </TCEforms>
                                            </rte_1>