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.

A field with a simple, one-field flex form

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

'columns' => [
    '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',
            ],
        ],
    ],
]

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

'columns' => [
    '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',
            ],
        ],
    ],
]

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:

../../../_images/PluginFlexFormConfigurationCheck.png

Checking the TCA configuration for the newly added Flexform

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:

A field with a simple, one-field flex form

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

'columns' => [
    '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>
                    ',
            ],
        ],
    ],
]

Notice how the data of the two sheets are separated.

A flex form field with two flex section containers

A flex form with two sheets and descriptions

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

'columns' => [
    '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: Rich Text Editor in FlexForms

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

EXT:styleguide/Configuration/TCA/tx_styleguide_elements_rte.php
<rte_1>
   <TCEforms>
       <label>rte_1</label>
       <config>
           <type>text</type>
           <enableRichtext>1</enableRichtext>
       </config>
   </TCEforms>
</rte_1>