[FEATURE] Render fieldset labels in form templates 89/62389/8
authorMathias Brodala <mbrodala@pagemachine.de>
Fri, 22 Nov 2019 18:00:56 +0000 (19:00 +0100)
committerDaniel Goerz <daniel.goerz@posteo.de>
Sat, 23 Nov 2019 15:13:07 +0000 (16:13 +0100)
This adds fieldset labels as separators on the summary page and mails.

Resolves: #82706
Releases: master
Change-Id: I09ab461cf7efa49a7658b950b30a7a5f3b73282d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/62389
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Susanne Moog <look@susi.dev>
Tested-by: Daniel Goerz <daniel.goerz@posteo.de>
Reviewed-by: Susanne Moog <look@susi.dev>
Reviewed-by: Daniel Goerz <daniel.goerz@posteo.de>
typo3/sysext/core/Documentation/Changelog/master/Feature-82706-RenderFieldsetLabelsInFormTemplates.rst [new file with mode: 0644]
typo3/sysext/form/Classes/ViewHelpers/RenderAllFormValuesViewHelper.php
typo3/sysext/form/Configuration/Yaml/FormElements/Fieldset.yaml
typo3/sysext/form/Resources/Private/Frontend/Partials/SummaryPage.html
typo3/sysext/form/Resources/Private/Frontend/Templates/Finishers/Email/Html.html
typo3/sysext/form/Resources/Private/Frontend/Templates/Finishers/Email/Plaintext.html

diff --git a/typo3/sysext/core/Documentation/Changelog/master/Feature-82706-RenderFieldsetLabelsInFormTemplates.rst b/typo3/sysext/core/Documentation/Changelog/master/Feature-82706-RenderFieldsetLabelsInFormTemplates.rst
new file mode 100644 (file)
index 0000000..29fa64c
--- /dev/null
@@ -0,0 +1,26 @@
+.. include:: ../../Includes.txt
+
+==========================================================
+Feature: #82706 - Render fieldset labels in form templates
+==========================================================
+
+See :issue:`82706`
+
+Description
+===========
+
+The section element :yaml:`Fieldset` is now accessible in templates of the "form" extension and can be used to add more structure.
+
+By default this affects the :yaml:`SummaryPage` form element as well as the :yaml:`EmailToReceiver` / :yaml:`EmailToSender` finishers.
+
+A common use case are two fieldsets for a delivery and a billing address where the fields within the fieldset are usually named the same. Till now, the default mail sent by the "form" extension would e.g. show "Street" twice without giving a hint about the context. Now the fieldset label is rendered in between to separate those fields.
+
+
+Impact
+======
+
+The summary page of the "form" extension and mails now show fieldset labels as separators.
+
+Custom templates have access to the fieldset element for rendering.
+
+.. index:: Frontend, ext:form
index c5f0d3f..f6505a4 100644 (file)
@@ -84,24 +84,28 @@ class RenderAllFormValuesViewHelper extends AbstractViewHelper
         foreach ($elements as $element) {
             $renderingOptions = $element->getRenderingOptions();
 
-            if (
-                !$element instanceof FormElementInterface
-                || (isset($renderingOptions['_isCompositeFormElement']) && (bool)$renderingOptions['_isCompositeFormElement'] === true)
-                || !$element->isEnabled()
-                || self::hasDisabledParent($element)
-            ) {
+            if (!$element instanceof FormElementInterface || !$element->isEnabled() || self::hasDisabledParent($element)) {
                 continue;
             }
 
-            $value = $formRuntime[$element->getIdentifier()];
+            if ($renderingOptions['_isSection'] ?? false) {
+                $data = [
+                    'element' => $element,
+                    'isSection' => true,
+                ];
+            } elseif ($renderingOptions['_isCompositeFormElement'] ?? false) {
+                continue;
+            } else {
+                $value = $formRuntime[$element->getIdentifier()];
+                $data = [
+                    'element' => $element,
+                    'value' => $value,
+                    'processedValue' => self::processElementValue($element, $value, $renderChildrenClosure, $renderingContext),
+                    'isMultiValue' => is_array($value) || $value instanceof \Iterator
+                ];
+            }
 
-            $formValue = [
-                'element' => $element,
-                'value' => $value,
-                'processedValue' => self::processElementValue($element, $value, $renderChildrenClosure, $renderingContext),
-                'isMultiValue' => is_array($value) || $value instanceof \Iterator
-            ];
-            $renderingContext->getVariableProvider()->add($as, $formValue);
+            $renderingContext->getVariableProvider()->add($as, $data);
             $output .= $renderChildrenClosure();
             $renderingContext->getVariableProvider()->remove($as);
         }
index 96b53f7..f4b33ee 100644 (file)
@@ -53,6 +53,7 @@ TYPO3:
                 elementErrorClassAttribute: error
               renderingOptions:
                 _isCompositeFormElement: true
+                _isSection: true
           formEditor:
             formEditorPartials:
               FormElement-Fieldset: Stage/Fieldset
index cb7954d..41d5149 100644 (file)
@@ -8,35 +8,42 @@
             <table class="table">
                 <formvh:renderAllFormValues renderable="{page.rootForm}" as="formValue">
                     <tr>
-                        <td class="summary-table-first-col">{formvh:translateElementProperty(element: formValue.element, property: 'label')}</td>
-                        <td>
-                            <f:if condition="{formValue.value}">
-                                <f:then>
-                                    <f:if condition="{0: formValue.element.type} == {0: 'ImageUpload'}">
+                        <f:if condition="{formValue.isSection}">
+                            <f:then>
+                                <td colspan="2"><b>{formvh:translateElementProperty(element: formValue.element, property: 'label')}</b></td>
+                            </f:then>
+                            <f:else>
+                                <td class="summary-table-first-col">{formvh:translateElementProperty(element: formValue.element, property: 'label')}</td>
+                                <td>
+                                    <f:if condition="{formValue.value}">
                                         <f:then>
-                                            <f:image image="{formValue.value}" maxWidth="{formValue.element.properties.imageMaxWidth}" maxHeight="{formValue.element.properties.imageMaxHeight}" alt="{formvh:translateElementProperty(element: formValue.element, property: 'altText')}" />
-                                        </f:then>
-                                        <f:else>
-                                            <f:if condition="{formValue.isMultiValue}">
+                                            <f:if condition="{0: formValue.element.type} == {0: 'ImageUpload'}">
                                                 <f:then>
-                                                    <ul>
-                                                        <f:for each="{formValue.processedValue}" as="value">
-                                                            <li>{value}</li>
-                                                        </f:for>
-                                                    </ul>
+                                                    <f:image image="{formValue.value}" maxWidth="{formValue.element.properties.imageMaxWidth}" maxHeight="{formValue.element.properties.imageMaxHeight}" alt="{formvh:translateElementProperty(element: formValue.element, property: 'altText')}" />
                                                 </f:then>
                                                 <f:else>
-                                                    <f:format.nl2br>{formValue.processedValue}</f:format.nl2br>
+                                                    <f:if condition="{formValue.isMultiValue}">
+                                                        <f:then>
+                                                            <ul>
+                                                                <f:for each="{formValue.processedValue}" as="value">
+                                                                    <li>{value}</li>
+                                                                </f:for>
+                                                            </ul>
+                                                        </f:then>
+                                                        <f:else>
+                                                            <f:format.nl2br>{formValue.processedValue}</f:format.nl2br>
+                                                        </f:else>
+                                                    </f:if>
                                                 </f:else>
                                             </f:if>
+                                        </f:then>
+                                        <f:else>
+                                            -
                                         </f:else>
                                     </f:if>
-                                </f:then>
-                                <f:else>
-                                    -
-                                </f:else>
-                            </f:if>
-                        </td>
+                                </td>
+                            </f:else>
+                        </f:if>
                     </tr>
                 </formvh:renderAllFormValues>
             </table>
index 8471453..71bba07 100644 (file)
     <table width="600" cellpadding="0" cellspacing="0" border="0">
         <formvh:renderAllFormValues renderable="{form.formDefinition}" as="formValue">
             <tr>
-                <td width="600" valign="top" align="left">{formvh:translateElementProperty(element: formValue.element, property: 'label')}</td>
-                <td width="600" valign="top" align="left">
-                    <f:if condition="{formValue.value}">
-                        <f:then>
-                            <f:if condition="{formValue.isMultiValue}">
+                <f:if condition="{formValue.isSection}">
+                    <f:then>
+                        <td colspan="2"><b>{formvh:translateElementProperty(element: formValue.element, property: 'label')}</b></td>
+                    </f:then>
+                    <f:else>
+                        <td width="600" valign="top" align="left">{formvh:translateElementProperty(element: formValue.element, property: 'label')}</td>
+                        <td width="600" valign="top" align="left">
+                            <f:if condition="{formValue.value}">
                                 <f:then>
-                                    <table cellspacing="0" border="0">
-                                        <f:for each="{formValue.processedValue}" as="value">
-                                            <tr>
-                                                <td>{value}</td>
-                                            </tr>
-                                        </f:for>
-                                    </table>
+                                    <f:if condition="{formValue.isMultiValue}">
+                                        <f:then>
+                                            <table cellspacing="0" border="0">
+                                                <f:for each="{formValue.processedValue}" as="value">
+                                                    <tr>
+                                                        <td>{value}</td>
+                                                    </tr>
+                                                </f:for>
+                                            </table>
+                                        </f:then>
+                                        <f:else>
+                                            <table cellspacing="0" border="0">
+                                                <tr>
+                                                    <td><f:format.nl2br>{formValue.processedValue}</f:format.nl2br></td>
+                                                </tr>
+                                            </table>
+                                        </f:else>
+                                    </f:if>
                                 </f:then>
                                 <f:else>
-                                    <table cellspacing="0" border="0">
-                                        <tr>
-                                            <td><f:format.nl2br>{formValue.processedValue}</f:format.nl2br></td>
-                                        </tr>
-                                    </table>
+                                    -
                                 </f:else>
                             </f:if>
-                        </f:then>
-                        <f:else>
-                            -
-                        </f:else>
-                    </f:if>
-                </td>
+                        </td>
+                    </f:else>
+                </f:if>
             </tr>
         </formvh:renderAllFormValues>
     </table>
index f02ea18..3e80628 100644 (file)
@@ -2,13 +2,12 @@
 <formvh:renderAllFormValues renderable="{form.formDefinition}" as="formValue"><f:spaceless>
     <f:if condition="{formValue.isMultiValue}">
         <f:then>
-<formvh:translateElementProperty element="{formValue.element}" property="label" />:
-    <f:for each="{formValue.processedValue}" as="singleValue">- {singleValue}
-    </f:for>
+            <f:if condition="{formValue.isSection}"><f:then>*** <formvh:translateElementProperty element="{formValue.element}" property="label" /> ***</f:then><f:else><formvh:translateElementProperty element="{formValue.element}" property="label" />: <f:for each="{formValue.processedValue}" as="singleValue">- {singleValue}
+            </f:for></f:else></f:if>
         </f:then>
         <f:else>
-<formvh:translateElementProperty element="{formValue.element}" property="label" />: <f:if condition="{formValue.processedValue}"><f:then>{formValue.processedValue -> f:format.raw()}</f:then><f:else>-</f:else></f:if>
-</f:else>
+            <f:if condition="{formValue.isSection}"><f:then>*** <formvh:translateElementProperty element="{formValue.element}" property="label" /> ***</f:then><f:else><formvh:translateElementProperty element="{formValue.element}" property="label" />: <f:if condition="{formValue.processedValue}"><f:then>{formValue.processedValue -> f:format.raw()}</f:then><f:else>-</f:else></f:if></f:else></f:if>
+        </f:else>
     </f:if>
 </f:spaceless>
 </formvh:renderAllFormValues>