In case you find yourself repeating a set of FlexForm fields in multiple FCEs or page templates here's a nice 'hack' to share them across templates.

Say we have different page templates and all of them include a slider which would typically look a little something like this:

[...]
<flux:flexform.section name="headimages">
    <flux:flexform.object name="headimage">
    <flux:flexform.field.input name="title"/>
    <flux:flexform.field.file name="image" allowed="jpg" uploadFolder="uploads/tx_myext"/>
    </flux:flexform.object>
</flux:flexform.section>
[...]

Unfortunately it is not possible to render a partial directly in the configuration section of a template but Denys Koch came up with a way. It is possible to render sections inside the configuration section and <f:render section /> accepts the argument partial. There we go! We can create a partial for shared FlexForm fields with according sections and render those in our templates.

myext/Resources/Partials/FlexForms.html:

{namespace flux:Tx_Flux_ViewHelpers}
<f:section name="HeadImages">
    <flux:flexform.section name="headimages">
        <flux:flexform.object name="headimage">
        <flux:flexform.field.input name="title"/>
        <flux:flexform.field.file name="image" allowed="jpg" uploadFolder="uploads/tx_myext"/>
        </flux:flexform.object>
    </flux:flexform.section>
</f:section>

myext/Resources/Templates/Page/Default.html:

{namespace flux=Tx_Flux_ViewHelpers}
{namespace v=Tx_Vhs_ViewHelpers}

<?xml version="1.0" encoding="UTF-8" ?>
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
      xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
      xmlns:v="http://fedext.net/ns/vhs/ViewHelpers">

<f:layout name="Default"/>

<f:section name="Configuration">
    <flux:flexform id="defaultpage">
        <f:render section="HeadImages" partial="FlexForms" arguments="{_all}"/>
        <flux:flexform.grid>
            <flux:flexform.grid.row>
                <flux:flexform.grid.column colPos="0" name="Content"/>
            </flux:flexform.grid.row>
        </flux:flexform.grid>
    </flux:flexform>
</f:section>

<f:section name="Content">
    <v:page.content.render column="0"/>
</f:section>

</div>

Nice. This approach allows us to define multiple sections in our FlexForms.html partial for each shared form part to save us some loc. Thanks again to Denys for sharing this trick.

comments powered by Disqus