EXT:Form - Get layout field from content object data

Question

I'm trying to get the layout field of the content object data inside an ext:form content element, to add a css class if a specific layout has been chosen. But nether the content object data is added to the fluid template (typo3/sysext/form/Classes/Controller/FormFrontendController.php:73) nor the frame container from fluid_styled_content is rendered for this element. My layout field is configured like this:

TCEFORM.tt_content {
    layout {
        types.form_formframework {
            addItems {
                200 = Blue Form
            }

            removeItems = 1,2,3
        }
    }
}

I have also tried to add a new layout field to the form configuration itself:

TYPO3:
  CMS:
    Form:
      ########### FORMEDITOR CONFIGURATION ###########
      prototypes:
        standard:
          ########### DEFAULT FORM ELEMENT DEFINITIONS ###########
          formElementsDefinition:
            Form:
              formEditor:
                editors:
                  9000:
                    identifier: 'layout'
                    group: select
                    templateName: 'Inspector-SingleSelectEditor'
                    label: 'Layout'
                    propertyPath: 'properties.layout'
                    selectOptions:
                      0:
                        value:
                        label: Normal
                      1:
                        value: form--blue
                        label: Blau

This works great in the backend but is leading to an The options "properties" were not allowed error in the frontend as properties for the form element are hardcoded in typo3/sysext/form/Classes/Domain/Model/FormDefinition.php:382.

Any ideas how to add a layout selection here? Best would be on the content element, as this would allow me to use the same form configuration with different layouts instead off making a duplicate form configuration which only distinguish in the layout.

Answer 1

We can add the fluid template layout like this({f:if(condition:'{data.layout}',then:'blue')}), in to default fluid_style_content/Resource/Private/Layouts/default.html (we Can override the fluid template in our site template) - without thinking for override the finisher and Flexform values of form:

<f:if condition="{data.CType} == 'form_formframework'">
    <f:then>
        <section id="c{data.uid}" class="form-section {f:if(condition:'{data.layout}',then:'blue')}">
            <f:if condition="{data._LOCALIZED_UID}">
                <a id="c{data._LOCALIZED_UID}"></a>
            </f:if>
            <f:render section="Before" optional="true">
                <f:render partial="DropIn/Before/All" arguments="{_all}" />
            </f:render>
            <f:render section="Header" optional="true">
                <f:render partial="Header/All" arguments="{_all}" />
            </f:render>
            <f:render section="Main" optional="true" />
            <f:render section="Footer" optional="true">
                <f:render partial="Footer/All" arguments="{_all}" />
            </f:render>
            <f:render section="After" optional="true">
                <f:render partial="DropIn/After/All" arguments="{_all}" />
            </f:render>
        </section>
    </f:then>
    <f:else>
        <div id="c{data.uid}" class="frame frame-{data.frame_class} frame-type-{data.CType} frame-layout-{data.layout}{f:if(condition: data.space_before_class, then: ' frame-space-before-{data.space_before_class}')}{f:if(condition: data.space_after_class, then: ' frame-space-after-{data.space_after_class}')}">
            <f:if condition="{data._LOCALIZED_UID}">
                <a id="c{data._LOCALIZED_UID}"></a>
            </f:if>
            <f:render section="Before" optional="true">
                <f:render partial="DropIn/Before/All" arguments="{_all}" />
            </f:render>
            <f:render section="Header" optional="true">
                <f:render partial="Header/All" arguments="{_all}" />
            </f:render>
            <f:render section="Main" optional="true" />
            <f:render section="Footer" optional="true">
                <f:render partial="Footer/All" arguments="{_all}" />
            </f:render>
            <f:render section="After" optional="true">
                <f:render partial="DropIn/After/All" arguments="{_all}" />
            </f:render>
        </div>
    </f:else>
</f:if>

I hope it helpful to all!

Answer 2

The content object data is available in the Generic-Template from fluid_styled_content. Here you can check if the Ctype is 'form_formframework' and wrapping the form with your css class.

<f:if condition="{content}">
<f:then>
    {content -> f:format.raw()}
</f:then>
<f:else>
    <f:if condition="{data.CType} == 'form_formframework'">
        <f:then>
            <div class="{data.layout}">
                <f:cObject typoscriptObjectPath="tt_content.{data.CType}.20" data="{data}" table="tt_content"/>
            </div>
        </f:then>
        <f:else>
            <f:cObject typoscriptObjectPath="tt_content.{data.CType}.20" data="{data}" table="tt_content"/>
        </f:else>
    </f:if>
</f:else>
</f:if>