[TASK] Synchronize the form documentation 83/56683/4
authorBjörn Jacob <bjoern.jacob@tritum.de>
Mon, 16 Apr 2018 12:15:35 +0000 (14:15 +0200)
committerSusanne Moog <susanne.moog@typo3.org>
Mon, 16 Apr 2018 20:12:20 +0000 (22:12 +0200)
Manual backport of #84457.

Resolves: #84745
Releases: 8.7
Change-Id: Iec81b41352744ab35ad70a828da013dce5149ed4
Reviewed-on: https://review.typo3.org/56683
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Frans Saris <franssaris@gmail.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
Tested-by: Susanne Moog <susanne.moog@typo3.org>
57 files changed:
typo3/sysext/form/Documentation/ApiReference/AbstractRenderable/getRootForm.rst
typo3/sysext/form/Documentation/ApiReference/AbstractRenderable/setIdentifier.rst
typo3/sysext/form/Documentation/ApiReference/AbstractRenderable/setLabel.rst
typo3/sysext/form/Documentation/ApiReference/AbstractRenderable/setOptions.rst
typo3/sysext/form/Documentation/ApiReference/AbstractSection/addElement.rst
typo3/sysext/form/Documentation/ApiReference/AbstractSection/getElements.rst
typo3/sysext/form/Documentation/ApiReference/AbstractSection/getElementsRecursively.rst
typo3/sysext/form/Documentation/ApiReference/AbstractSection/moveElementAfter.rst
typo3/sysext/form/Documentation/ApiReference/AbstractSection/moveElementBefore.rst
typo3/sysext/form/Documentation/ApiReference/AbstractSection/removeElement.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/addValidator.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/createValidator.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/getDefaultValue.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/getProperties.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/getUniqueIdentifier.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/initializeFormElement.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/isRequired.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/setDataType.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/setDefaultValue.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/setProperty.rst
typo3/sysext/form/Documentation/ApiReference/FormElementInterface/setRenderingOption.rst
typo3/sysext/form/Documentation/ApiReference/Index.rst
typo3/sysext/form/Documentation/ApiReference/RenderableInterface/getParentRenderable.rst
typo3/sysext/form/Documentation/ApiReference/RenderableInterface/getTemplateName.rst
typo3/sysext/form/Documentation/ApiReference/RenderableInterface/setParentRenderable.rst
typo3/sysext/form/Documentation/ApiReference/RootRenderableInterface/getIdentifier.rst
typo3/sysext/form/Documentation/ApiReference/RootRenderableInterface/getLabel.rst
typo3/sysext/form/Documentation/ApiReference/RootRenderableInterface/getRendererClassName.rst
typo3/sysext/form/Documentation/ApiReference/RootRenderableInterface/getRenderingOptions.rst
typo3/sysext/form/Documentation/ApiReference/RootRenderableInterface/getType.rst
typo3/sysext/form/Documentation/Concepts/Configuration/Index.rst
typo3/sysext/form/Documentation/Concepts/Finishers/Index.rst
typo3/sysext/form/Documentation/Concepts/FormConfigurationFormDefinition/Index.rst
typo3/sysext/form/Documentation/Concepts/FormEditor/Index.rst
typo3/sysext/form/Documentation/Concepts/FormFileStorages/Index.rst
typo3/sysext/form/Documentation/Concepts/FormManager/Index.rst
typo3/sysext/form/Documentation/Concepts/FormPlugin/Index.rst
typo3/sysext/form/Documentation/Concepts/FrontendRendering/Index.rst
typo3/sysext/form/Documentation/Concepts/Index.rst
typo3/sysext/form/Documentation/Concepts/TargetGroupsAndMainPrinciples/Index.rst
typo3/sysext/form/Documentation/Config/proto/finishersDefinition/finishers/EmailToReceiver.rst
typo3/sysext/form/Documentation/Config/proto/finishersDefinition/finishers/EmailToSender.rst
typo3/sysext/form/Documentation/Config/proto/finishersDefinition/finishers/SaveToDatabase.rst
typo3/sysext/form/Documentation/Config/proto/formElements/Index.rst
typo3/sysext/form/Documentation/Config/proto/formElements/formElementTypes/FileUpload/formEditor/editors/400.rst
typo3/sysext/form/Documentation/Config/proto/formElements/formElementTypes/FileUpload/formEditor/editors/700.rst
typo3/sysext/form/Documentation/Config/proto/formElements/formElementTypes/FileUpload/formEditor/editors/800.rst
typo3/sysext/form/Documentation/Config/proto/formElements/formElementTypes/FileUpload/formEditor/editors/9999.rst
typo3/sysext/form/Documentation/Config/proto/formElements/formElementTypes/Text/formEditor/propertyCollections/validators/70/identifier.rst
typo3/sysext/form/Documentation/FAQ/Index.rst
typo3/sysext/form/Documentation/Includes.txt
typo3/sysext/form/Documentation/Index.rst
typo3/sysext/form/Documentation/Introduction/Index.rst
typo3/sysext/form/Documentation/QuickStart/Index.rst [new file with mode: 0644]
typo3/sysext/form/Documentation/Settings.cfg
typo3/sysext/form/Documentation/Sitemap/Index.rst [new file with mode: 0644]
typo3/sysext/form/Documentation/Targets.rst [new file with mode: 0644]

index be1a280..ba5a6ec 100644 (file)
@@ -3,8 +3,6 @@ getRootForm()
 
 Get the root form the element belongs to.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getRootForm(): FormDefinition
+   public function getRootForm(): FormDefinition
index 5e17071..6324f56 100644 (file)
@@ -3,8 +3,6 @@ setIdentifier()
 
 Set the identifier of the form element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function setIdentifier(string $identifier);
+   public function setIdentifier(string $identifier);
index 63fd6d1..8cc18a4 100644 (file)
@@ -3,8 +3,6 @@ setLabel()
 
 Set the label for the form element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function setLabel(string $label);
+   public function setLabel(string $label);
index c2c2c9a..c2e4948 100644 (file)
@@ -4,8 +4,6 @@ setOptions()
 Set multiple properties of this object at once.
 Every property which has a corresponding set* method can be set using the passed $options array.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function setOptions(array $options);
+   public function setOptions(array $options);
index 178397d..358a829 100644 (file)
@@ -4,8 +4,6 @@ addElement()
 Add a new form element at the end.
 Instead of this method, you should use ``createElement`` instead.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function addElement(FormElementInterface $formElement);
+   public function addElement(FormElementInterface $formElement);
index c8ac607..df2f3f6 100644 (file)
@@ -3,8 +3,6 @@ getElements()
 
 Get the child form elements.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getElements(): array;
+   public function getElements(): array;
index c3af97e..054e195 100644 (file)
@@ -3,8 +3,6 @@ getElementsRecursively()
 
 Returns all RenderableInterface instances of this composite renderable recursively.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getElementsRecursively(): array;
+   public function getElementsRecursively(): array;
index 2c8cb92..4b1c695 100644 (file)
@@ -4,8 +4,6 @@ moveElementAfter()
 Move FormElement $elementToMove after $referenceElement.
 Both $elementToMove and $referenceElement must be direct descendants of this Section/Page.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function moveElementAfter(FormElementInterface $elementToMove, FormElementInterface $referenceElement);
+   public function moveElementAfter(FormElementInterface $elementToMove, FormElementInterface $referenceElement);
index ee7ad5d..d03775f 100644 (file)
@@ -4,8 +4,6 @@ moveElementBefore()
 Move FormElement $elementToMove before $referenceElement.
 Both $elementToMove and $referenceElement must be direct descendants of this Section/Page.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function moveElementBefore(FormElementInterface $elementToMove, FormElementInterface $referenceElement);
+   public function moveElementBefore(FormElementInterface $elementToMove, FormElementInterface $referenceElement);
index 841eed7..32781bd 100644 (file)
@@ -3,8 +3,6 @@ removeElement()
 
 Remove $elementToRemove from this Section/Page.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function removeElement(FormElementInterface $elementToRemove);
+   public function removeElement(FormElementInterface $elementToRemove);
index 86e5814..4e05720 100644 (file)
@@ -3,8 +3,6 @@ addValidator()
 
 Registers a validator for the form element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function addValidator(ValidatorInterface $validator);
+   public function addValidator(ValidatorInterface $validator);
index fa8f027..1a2b53c 100644 (file)
@@ -3,8 +3,6 @@ createValidator()
 
 Create a validator for the element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function createValidator(string $validatorIdentifier, array $options = []);
\ No newline at end of file
+   public function createValidator(string $validatorIdentifier, array $options = []);
index 013224a..f2e2847 100644 (file)
@@ -3,8 +3,6 @@ getDefaultValue()
 
 Get the default value with which the form element should be initialized during display.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getDefaultValue();
+   public function getDefaultValue();
index 2480349..fe18fdf 100644 (file)
@@ -3,8 +3,6 @@ getProperties()
 
 Get all element-specific configuration properties.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getProperties(): array;
+   public function getProperties(): array;
index 90353bb..fc2e0df 100644 (file)
@@ -4,36 +4,34 @@ getUniqueIdentifier()
 Returns a unique identifier of the element. While element identifiers are only unique within one form,
 this identifier includes also the identifier of the form itself, and therefore making it "globally" unique.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getUniqueIdentifier(): string;
+   public function getUniqueIdentifier(): string;
 
 Example:
 
 .. code-block:: yaml
 
-    identifier: exampleForm
-    label: 'Simple Contact Form'
-    prototype: standard
-    type: Form
-
-    renderables:
-      -
-        identifier: page-1
-        label: 'Contact Form'
-        type: Page
-
-        renderables:
-          -
-            identifier: name
-            label: 'Name'
-            type: Text
-            defaultValue: ''
-
-.. code-block:: php
-
-    // $formElement->getIdentifier() == 'name'
-    $uniqueIdentifier = $formElement->getUniqueIdentifier();
-    // $uniqueIdentifier == 'exampleForm-name'
+   identifier: exampleForm
+   label: 'Simple Contact Form'
+   prototype: standard
+   type: Form
+
+   renderables:
+     -
+       identifier: page-1
+       label: 'Contact Form'
+       type: Page
+
+       renderables:
+         -
+           identifier: name
+           label: 'Name'
+           type: Text
+           defaultValue: ''
+
+::
+
+   // $formElement->getIdentifier() == 'name'
+   $uniqueIdentifier = $formElement->getUniqueIdentifier();
+   // $uniqueIdentifier == 'exampleForm-name'
index 03eb877..d8c9c58 100644 (file)
@@ -3,8 +3,6 @@ initializeFormElement()
 
 Will be called as soon as the element is (tried to be) added to a form.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function initializeFormElement();
+   public function initializeFormElement();
index 233fee3..92afaff 100644 (file)
@@ -4,8 +4,6 @@ isRequired()
 Whether or not the element is required.
 An element is required if the ``TYPO3\CMS\Extbase\Validation\Validator\NotEmptyValidator`` is attached to the element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function isRequired(): bool;
+   public function isRequired(): bool;
index 2495c16..c96d638 100644 (file)
@@ -2,19 +2,15 @@ setDataType()
 '''''''''''''
 
 The target data type the data should be converted through the property mapper.
-Signature:
 
-.. code-block:: php
+Signature::
 
-    public function setDataType(string $dataType);
+   public function setDataType(string $dataType);
 
-Example:
+Example::
 
-.. code-block:: php
-
-    public function initializeFormElement()
-    {
-        $this->setDataType('TYPO3\CMS\Extbase\Domain\Model\FileReference');
-        parent::initializeFormElement();
-    }
\ No newline at end of file
+   public function initializeFormElement()
+   {
+       $this->setDataType('TYPO3\CMS\Extbase\Domain\Model\FileReference');
+       parent::initializeFormElement();
+   }
index 4695d01..a7a8bbf 100644 (file)
@@ -3,8 +3,6 @@ setDefaultValue()
 
 Set the default value with which the form element should be initialized during display.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function setDefaultValue($defaultValue);
+   public function setDefaultValue($defaultValue);
index b66dbd2..f99158d 100644 (file)
@@ -3,8 +3,6 @@ setProperty()
 
 Set an element-specific configuration property.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function setProperty(string $key, $value);
+   public function setProperty(string $key, $value);
index 2179809..94ea5a0 100644 (file)
@@ -3,8 +3,6 @@ setRenderingOption()
 
 Set a rendering option.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function setRenderingOption(string $key, $value);
+   public function setRenderingOption(string $key, $value);
index fd636bc..a1e1dc5 100644 (file)
@@ -53,16 +53,16 @@ Only the root element (``FormDefinition``) has to be a template file. All child
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                Form:
-                  renderingOptions:
-                    templateRootPaths:
-                      10: 'EXT:form/Resources/Private/Frontend/Templates/'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               Form:
+                 renderingOptions:
+                   templateRootPaths:
+                     10: 'EXT:form/Resources/Private/Frontend/Templates/'
 
 
 .. _apireference-frontendrendering-fluidformrenderer-options-layoutrootpaths:
@@ -75,16 +75,16 @@ The first folder where the desired layout is found, is used. If the array keys a
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                Form:
-                  renderingOptions:
-                    layoutRootPaths:
-                      10: 'EXT:form/Resources/Private/Frontend/Layouts/'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               Form:
+                 renderingOptions:
+                   layoutRootPaths:
+                     10: 'EXT:form/Resources/Private/Frontend/Layouts/'
 
 
 .. _apireference-frontendrendering-fluidformrenderer-options-partialrootpaths:
@@ -107,16 +107,16 @@ There is a setting available to set a custom partial name. Please read the secti
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                Form:
-                  renderingOptions:
-                    partialRootPaths:
-                      10: 'EXT:form/Resources/Private/Frontend/Partials/'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               Form:
+                 renderingOptions:
+                   partialRootPaths:
+                     10: 'EXT:form/Resources/Private/Frontend/Partials/'
 
 
 .. _apireference-frontendrendering-fluidformrenderer-options-templatename:
@@ -142,15 +142,15 @@ Expected partial file: EXT:form/Resources/Private/Frontend/Partials/Text.html
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                Foo:
-                  renderingOptions:
-                    templateName: 'Text'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               Foo:
+                 renderingOptions:
+                   templateName: 'Text'
 
 
 .. _apireference-frontendrendering-renderviewHelper:
@@ -158,10 +158,12 @@ Expected partial file: EXT:form/Resources/Private/Frontend/Partials/Text.html
 "render" viewHelper
 -------------------
 
+
 .. _apireference-frontendrendering-renderviewHelper-arguments:
 
-Argumentes
-^^^^^^^^^^
+Arguments
+^^^^^^^^^
+
 
 .. _apireference-frontendrendering-renderviewHelper-factoryclass:
 
@@ -177,7 +179,7 @@ This then renders the form.
 
 .. code-block:: html
 
-    <formvh:render factoryClass="VENDOR\MySitePackage\Domain\Factory\CustomFormFactory" />
+   <formvh:render factoryClass="VENDOR\MySitePackage\Domain\Factory\CustomFormFactory" />
 
 
 .. _apireference-frontendrendering-renderviewHelper-persistenceidentifier:
@@ -191,7 +193,7 @@ In this case, the ``factoryClass`` will be given an empty configuration array (i
 
 .. code-block:: html
 
-    <formvh:render persistenceIdentifier="EXT:my_site_package/Resources/Private/Forms/SimpleContactForm.yaml" />
+   <formvh:render persistenceIdentifier="EXT:my_site_package/Resources/Private/Forms/SimpleContactForm.yaml" />
 
 
 .. _apireference-frontendrendering-renderviewHelper-overrideconfiguration:
@@ -216,76 +218,73 @@ If nothing is specified, the configuration (``form definition`` or ``overrideCon
 If no specification exists, the standard prototype ``standard`` is used.
 
 
-
 .. _apireference-frontendrendering-programmatically:
 
 Build forms programmatically
 ----------------------------
 
-Implement a ``FormFactory`` and build the form.
-
-.. code-block:: php
-
-    <?php
-    declare(strict_types = 1);
-    namespace VENDOR\MySitePackage\Domain\Factory;
-
-    use TYPO3\CMS\Core\Utility\GeneralUtility;
-    use TYPO3\CMS\Extbase\Object\ObjectManager;
-    use TYPO3\CMS\Extbase\Validation\Validator\NotEmptyValidator;
-    use TYPO3\CMS\Extbase\Validation\Validator\StringLengthValidator;
-    use TYPO3\CMS\Form\Domain\Configuration\ConfigurationService;
-    use TYPO3\CMS\Form\Domain\Factory\AbstractFormFactory;
-    use TYPO3\CMS\Form\Domain\Model\FormDefinition;
-
-    class CustomFormFactory extends AbstractFormFactory
-    {
-
-        /**
-         * Build a FormDefinition.
-         * This example build a FormDefinition manually,
-         * so $configuration and $prototypeName are unused.
-         *
-         * @param array $configuration
-         * @param string $prototypeName
-         * @return FormDefinition
-         */
-        public function build(array $configuration, string $prototypeName = null): FormDefinition
-        {
-            $prototypeName = 'standard';
-            $configurationService = GeneralUtility::makeInstance(ObjectManager::class)->get(ConfigurationService::class);
-            $prototypeConfiguration = $configurationService->getPrototypeConfiguration($prototypeName);
-
-            $form = GeneralUtility::makeInstance(ObjectManager::class)->get(FormDefinition::class, 'MyCustomForm', $prototypeConfiguration);
-            $form->setRenderingOption('controllerAction', 'index');
-
-            $page1 = $form->createPage('page1');
-            $name = $page1->createElement('name', 'Text');
-            $name->setLabel('Name');
-            $name->addValidator(GeneralUtility::makeInstance(ObjectManager::class)->get(NotEmptyValidator::class));
-
-            $page2 = $form->createPage('page2');
-            $message = $page2->createElement('message', 'Textarea');
-            $message->setLabel('Message');
-            $message->addValidator(GeneralUtility::makeInstance(ObjectManager::class)->get(StringLengthValidator::class, ['minimum' => 5, 'maximum' => 20]));
-
-            $form->createFinisher('EmailToSender', [
-                'subject' => 'Hello',
-                'recipientAddress' => 'foo@example.com',
-                'senderAddress' => 'bar@example.com',
-            ]);
-
-            $this->triggerFormBuildingFinished($form);
-            return $form;
-        }
-    }
+Implement a ``FormFactory`` and build the form::
+
+   <?php
+   declare(strict_types = 1);
+   namespace VENDOR\MySitePackage\Domain\Factory;
+
+   use TYPO3\CMS\Core\Utility\GeneralUtility;
+   use TYPO3\CMS\Extbase\Object\ObjectManager;
+   use TYPO3\CMS\Extbase\Validation\Validator\NotEmptyValidator;
+   use TYPO3\CMS\Extbase\Validation\Validator\StringLengthValidator;
+   use TYPO3\CMS\Form\Domain\Configuration\ConfigurationService;
+   use TYPO3\CMS\Form\Domain\Factory\AbstractFormFactory;
+   use TYPO3\CMS\Form\Domain\Model\FormDefinition;
+
+   class CustomFormFactory extends AbstractFormFactory
+   {
+
+       /**
+        * Build a FormDefinition.
+        * This example build a FormDefinition manually,
+        * so $configuration and $prototypeName are unused.
+        *
+        * @param array $configuration
+        * @param string $prototypeName
+        * @return FormDefinition
+        */
+       public function build(array $configuration, string $prototypeName = null): FormDefinition
+       {
+           $prototypeName = 'standard';
+           $configurationService = GeneralUtility::makeInstance(ObjectManager::class)->get(ConfigurationService::class);
+           $prototypeConfiguration = $configurationService->getPrototypeConfiguration($prototypeName);
+
+           $form = GeneralUtility::makeInstance(ObjectManager::class)->get(FormDefinition::class, 'MyCustomForm', $prototypeConfiguration);
+           $form->setRenderingOption('controllerAction', 'index');
+
+           $page1 = $form->createPage('page1');
+           $name = $page1->createElement('name', 'Text');
+           $name->setLabel('Name');
+           $name->addValidator(GeneralUtility::makeInstance(ObjectManager::class)->get(NotEmptyValidator::class));
+
+           $page2 = $form->createPage('page2');
+           $message = $page2->createElement('message', 'Textarea');
+           $message->setLabel('Message');
+           $message->addValidator(GeneralUtility::makeInstance(ObjectManager::class)->get(StringLengthValidator::class, ['minimum' => 5, 'maximum' => 20]));
+
+           $form->createFinisher('EmailToSender', [
+               'subject' => 'Hello',
+               'recipientAddress' => 'foo@example.com',
+               'senderAddress' => 'bar@example.com',
+           ]);
+
+           $this->triggerFormBuildingFinished($form);
+           return $form;
+       }
+   }
 
 
 Use this form within your fluid template.
 
 .. code-block:: html
 
-    <formvh:render factoryClass="VENDOR\MySitePackage\Domain\Factory\CustomFormFactory" />
+   <formvh:render factoryClass="VENDOR\MySitePackage\Domain\Factory\CustomFormFactory" />
 
 
 .. _apireference-frontendrendering-programmatically-commonapimethods:
@@ -306,11 +305,9 @@ Create a page with the given $identifier and attach this page to the form.
 - attach Page object to this form
 - return the newly created Page object
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function createPage(string $identifier, string $typeName = 'Page'): Page;
+   public function createPage(string $identifier, string $typeName = 'Page'): Page;
 
 
 .. _apireference-frontendrendering-programmatically-commonapimethods-createfinisher:
@@ -320,11 +317,9 @@ TYPO3\\CMS\\Form\\Domain\\Model\\FormDefinition::createFinisher()
 
 Create a finisher with the given $identifier and given $options and attach this finisher to the form.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function createFinisher(string $finisherIdentifier, array $options = []): FinisherInterface;
+   public function createFinisher(string $finisherIdentifier, array $options = []): FinisherInterface;
 
 
 .. _apireference-frontendrendering-programmatically-commonapimethods-page-createelement:
@@ -339,11 +334,9 @@ Create a form element with the given $identifier and attach it to the page.
 - attach Form Element to the Page
 - return the newly created Form Element object
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function createElement(string $identifier, string $typeName): FormElementInterface;
+   public function createElement(string $identifier, string $typeName): FormElementInterface;
 
 
 .. _apireference-frontendrendering-programmatically-commonapimethods-section-createelement:
@@ -358,11 +351,9 @@ Create a form element with the given $identifier and attach it to the section.
 - attach Form Element to the Section
 - return the newly created Form Element object
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function createElement(string $identifier, string $typeName): FormElementInterface;
+   public function createElement(string $identifier, string $typeName): FormElementInterface;
 
 
 .. _apireference-frontendrendering-programmatically-commonapimethods-abstractrenderable-createvalidator:
@@ -378,11 +369,9 @@ Mainly possible for
 - TYPO3\\CMS\\Form\\Domain\\Model\\FormElements\\DatePicker
 - TYPO3\\CMS\\Form\\Domain\\Model\\FormElements\\FileUpload
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function createValidator(string $validatorIdentifier, array $options = []);
+   public function createValidator(string $validatorIdentifier, array $options = []);
 
 
 .. _apireference-frontendrendering-programmatically-commonapimethods-initializeformelement:
@@ -399,35 +388,31 @@ Possible for
 - TYPO3\\CMS\\Form\\Domain\\Model\\FormElements\\DatePicker
 - TYPO3\\CMS\\Form\\Domain\\Model\\FormElements\\FileUpload
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function initializeFormElement();
+   public function initializeFormElement();
 
 
 You can use this method to prefill form element data for example from database tables.
 All the classes you can see above extends from the ``TYPO3\CMS\Form\Domain\Model\FormElement\AbstractFormElement``.
-``AbstractFormElement`` implements this method like this
-
-.. code-block:: php
-
-    public function initializeFormElement()
-    {
-        if (
-            isset($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'])
-            && is_array($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'])
-        ) {
-            foreach ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'] as $className) {
-                $hookObj = GeneralUtility::makeInstance($className);
-                if (method_exists($hookObj, 'initializeFormElement')) {
-                    $hookObj->initializeFormElement(
-                        $this
-                    );
-                }
-            }
-        }
-    }
+``AbstractFormElement`` implements this method like this::
+
+   public function initializeFormElement()
+   {
+       if (
+           isset($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'])
+           && is_array($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'])
+       ) {
+           foreach ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'] as $className) {
+               $hookObj = GeneralUtility::makeInstance($className);
+               if (method_exists($hookObj, 'initializeFormElement')) {
+                   $hookObj->initializeFormElement(
+                       $this
+                   );
+               }
+           }
+       }
+   }
 
 If you extend you custom implementation from ``AbstractFormElement`` (and you should do this),
 it enables you to override the 'initializeFormElement' method within your custom implementation class.
@@ -459,18 +444,14 @@ Override the current page taken from the request, rendering the page with index
 This is typically not needed in production code.
 You might prefer the hook :ref:`afterInitializeCurrentPage <apireference-frontendrendering-runtimemanipulation-hooks-afterinitializecurrentpage>`
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function overrideCurrentPage(int $pageIndex);
-
-Example:
+   public function overrideCurrentPage(int $pageIndex);
 
-.. code-block:: php
+Example::
 
-    $form = $formDefinition->bind($this->request, $this->response);
-    $form->overrideCurrentPage($pageIndex);
+   $form = $formDefinition->bind($this->request, $this->response);
+   $form->overrideCurrentPage($pageIndex);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-render:
@@ -480,11 +461,9 @@ render()
 
 Render the form.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function render();
+   public function render();
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-getidentifier:
@@ -498,11 +477,9 @@ getRequest()
 Get the request this object is bound to.
 This is mostly relevant inside Finishers, where you f.e. want to redirect the user to another page.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function getRequest(): Request;
+   public function getRequest(): Request;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-getresponse:
@@ -513,11 +490,9 @@ getResponse()
 Get the response this object is bound to.
 This is mostly relevant inside Finishers, where you f.e. want to set response headers or output content.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getResponse(): Response;
+   public function getResponse(): Response;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-getcurrentpage:
@@ -527,11 +502,9 @@ getCurrentPage()
 
 Returns the currently selected page.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function getCurrentPage(): Page;
+   public function getCurrentPage(): Page;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-getpreviouspage:
@@ -541,11 +514,9 @@ getPreviousPage()
 
 Returns the previous page of the currently selected one or NULL if there is no previous page.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getPreviousPage();
+   public function getPreviousPage();
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-getnextpage:
@@ -555,11 +526,9 @@ getNextPage()
 
 Returns the next page of the currently selected one or NULL if there is no next page.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function getNextPage();
+   public function getNextPage();
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-gettype:
@@ -573,11 +542,9 @@ getElementValue()
 
 Returns the value of the specified element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getElementValue(string $identifier);
+   public function getElementValue(string $identifier);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-getpages:
@@ -587,11 +554,9 @@ getPages()
 
 Return the form's pages in the correct order.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function getPages(): array;
+   public function getPages(): array;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-getrenderingoptions:
@@ -600,7 +565,6 @@ Signature:
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-getrendererclassname:
 .. include:: RootRenderableInterface/getRendererClassName.rst
 
-
 .. _apireference-frontendrendering-programmatically-apimethods-formruntime-getlabel:
 .. include:: RootRenderableInterface/getLabel.rst
 
@@ -614,11 +578,9 @@ getFormDefinition()
 
 Get the underlying form definition from the runtime.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function getFormDefinition(): FormDefinition;
+   public function getFormDefinition(): FormDefinition;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition:
@@ -634,11 +596,9 @@ addPage()
 Add a new page at the end of the form.
 Instead of this method, you should use ``createPage`` instead.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function addPage(Page $page);
+   public function addPage(Page $page);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-createpage:
@@ -653,11 +613,9 @@ Create a page with the given $identifier and attach this page to the form.
 - attach Page object to this form
 - return the newly created Page object
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function createPage(string $identifier, string $typeName = 'Page'): Page;
+   public function createPage(string $identifier, string $typeName = 'Page'): Page;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-getpages:
@@ -667,11 +625,9 @@ getPages()
 
 Return the form's pages in the correct order.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getPages(): array;
+   public function getPages(): array;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-haspagewithindex:
@@ -681,11 +637,9 @@ hasPageWithIndex()
 
 Check whether a page with the given $index exists.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function hasPageWithIndex(int $index): bool;
+   public function hasPageWithIndex(int $index): bool;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-getpagebyindex:
@@ -696,11 +650,9 @@ getPageByIndex()
 Get the page with the passed index. The first page has index zero.
 If page at $index does not exist, an exception is thrown.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getPageByIndex(int $index);
+   public function getPageByIndex(int $index);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-addfinisher:
@@ -711,11 +663,9 @@ addFinisher()
 Adds the specified finisher to the form.
 Instead of this method, you should use ``createFinisher`` instead.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function addFinisher(FinisherInterface $finisher);
+   public function addFinisher(FinisherInterface $finisher);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-createfinisher:
@@ -725,11 +675,10 @@ createFinisher()
 
 Create a finisher with the given $identifier and given $options and attach this finisher to the form.
 
-Signature:
+Signature::
 
-.. code-block:: php
+   public function createFinisher(string $finisherIdentifier, array $options = []): FinisherInterface;
 
-    public function createFinisher(string $finisherIdentifier, array $options = []): FinisherInterface;
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-getfinishers:
 
@@ -738,11 +687,9 @@ getFinishers()
 
 Gets all finishers of the form.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getFinishers(): array;
+   public function getFinishers(): array;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-getelementbyidentifier:
@@ -753,11 +700,9 @@ getElementByIdentifier()
 Get a form element by its identifier.
 If identifier does not exist, returns NULL.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function getElementByIdentifier(string $elementIdentifier);
+   public function getElementByIdentifier(string $elementIdentifier);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-movepageafter:
@@ -767,11 +712,9 @@ movePageAfter()
 
 Move $pageToMove after $referencePage.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function movePageAfter(Page $pageToMove, Page $referencePage);
+   public function movePageAfter(Page $pageToMove, Page $referencePage);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-removepage:
@@ -781,11 +724,9 @@ removePage()
 
 Remove $pageToRemove from the form.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function removePage(Page $pageToRemove);
+   public function removePage(Page $pageToRemove);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-bind:
@@ -795,11 +736,9 @@ bind()
 
 Bind the current request and response to this form instance, effectively creating a new "instance" of the Form.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function bind(Request $request, Response $response): FormRuntime;
+   public function bind(Request $request, Response $response): FormRuntime;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-getprocessingrule:
@@ -809,11 +748,9 @@ getProcessingRule()
 
 Get the processing rule which contains information for property mappings and validations.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function getProcessingRule(string $propertyPath): ProcessingRule;
+   public function getProcessingRule(string $propertyPath): ProcessingRule;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-gettype:
@@ -844,11 +781,9 @@ setRendererClassName()
 
 Set the renderer class name.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function setRendererClassName(string $rendererClassName);
+   public function setRendererClassName(string $rendererClassName);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formdefinition-getrenderingoptions:
@@ -902,11 +837,9 @@ Create a form element with the given $identifier and attach it to the page.
 - attach Form Element to the Page
 - return the newly created Form Element object
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function createElement(string $identifier, string $typeName): FormElementInterface;
+   public function createElement(string $identifier, string $typeName): FormElementInterface;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-page-moveelementbefore:
@@ -1008,11 +941,9 @@ Create a form element with the given $identifier and attach it to the section.
 - attach Form Element to the Section
 - return the newly created Form Element object
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function createElement(string $identifier, string $typeName): FormElementInterface;
+   public function createElement(string $identifier, string $typeName): FormElementInterface;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-section-moveelementbefore:
@@ -1180,11 +1111,9 @@ execute()
 Executes the finisher. ``AbstractFinisher::execute()`` call ``$this->executeInternal()`` at the end. Own finisher
 implementations which extends from  ``AbstractFinisher:`` must start their own logic within ``executeInternal()``.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function execute(FinisherContext $finisherContext);
+   public function execute(FinisherContext $finisherContext);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-abstractfinisher-setoptions:
@@ -1194,11 +1123,9 @@ setOptions()
 
 Set the finisher options. Instead of directly accessing them, you should rather use ``parseOption()``.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function setOptions(array $options);
+   public function setOptions(array $options);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-abstractfinisher-setoption:
@@ -1208,11 +1135,9 @@ setOption()
 
 Sets a single finisher option.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function setOption(string $optionName, $optionValue);
+   public function setOption(string $optionName, $optionValue);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-abstractfinisher-parseoption:
@@ -1222,11 +1147,9 @@ parseOption()
 
 Please read :ref:`Accessing finisher options<concepts-frontendrendering-codecomponents-customfinisherimplementations-accessingoptions>`
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    protected function parseOption(string $optionName);
+   protected function parseOption(string $optionName);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-finishercontext:
@@ -1241,11 +1164,9 @@ cancel()
 
 Cancels the finisher invocation after the current finisher.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function cancel();
+   public function cancel();
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-finishercontext-getformruntime:
@@ -1255,11 +1176,9 @@ getFormRuntime()
 
 The Form Runtime that is associated with the current finisher.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getFormRuntime(): FormRuntime;
+   public function getFormRuntime(): FormRuntime;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-finishercontext-getformvalues:
@@ -1269,11 +1188,9 @@ getFormValues()
 
 The values of the submitted form (after validation and property mapping).
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function getFormValues(): array;
+   public function getFormValues(): array;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-finishercontext-getcontrollercontext:
@@ -1283,11 +1200,9 @@ getControllerContext()
 
 Returns the current ControllerContext.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getControllerContext(): ControllerContext;
+   public function getControllerContext(): ControllerContext;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-finishercontext-getfinishervariableprovider:
@@ -1297,11 +1212,9 @@ getFinisherVariableProvider()
 
 Returns the current FinisherVariableProvider.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function getFinisherVariableProvider(): FinisherVariableProvider;
+   public function getFinisherVariableProvider(): FinisherVariableProvider;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-finishervariableprovider:
@@ -1319,11 +1232,9 @@ add()
 Add a variable to the finisher variable provider.
 In case the value is already inside, it is silently overridden.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function add(string $finisherIdentifier, string $key, $value);
+   public function add(string $finisherIdentifier, string $key, $value);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-finishervariableprovider-get:
@@ -1333,11 +1244,9 @@ get()
 
 Gets a variable from the finisher variable provider.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function get(string $finisherIdentifier, string $key, $default = null);
+   public function get(string $finisherIdentifier, string $key, $default = null);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-finishervariableprovider-exists:
@@ -1347,11 +1256,9 @@ exists()
 
 Determine whether there is a variable stored for the given key.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function exists($finisherIdentifier, $key): bool;
+   public function exists($finisherIdentifier, $key): bool;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-finishervariableprovider-remove:
@@ -1361,11 +1268,9 @@ remove()
 
 Remove a value from the finisher variable provider.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    public function remove(string $finisherIdentifier, string $key);
+   public function remove(string $finisherIdentifier, string $key);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-configurationservice:
@@ -1380,11 +1285,9 @@ getPrototypeConfiguration()
 
 Get the configuration for a given $prototypeName
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getPrototypeConfiguration(string $prototypeName): array;
+   public function getPrototypeConfiguration(string $prototypeName): array;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-abstractformfactory:
@@ -1400,11 +1303,9 @@ triggerFormBuildingFinished()
 Helper to be called by every ``FormFactory`` which extends from ``AbstractFormFactory`` after
 everything has been built to call the "afterBuildingFinished" hook on all form elements.
 
-Signature:
-
-.. code-block:: php
+Signature::
 
-    protected function triggerFormBuildingFinished(FormDefinition $form);
+   protected function triggerFormBuildingFinished(FormDefinition $form);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-formfactoryinterface:
@@ -1419,11 +1320,9 @@ build()
 
 Build a form definition, depending on some configuration.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function build(array $configuration, string $prototypeName = null): FormDefinition;
+   public function build(array $configuration, string $prototypeName = null): FormDefinition;
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-rendererinterface:
@@ -1436,11 +1335,9 @@ TYPO3\\CMS\\Form\\Domain\\Renderer\\RendererInterface
 setControllerContext()
 ''''''''''''''''''''''
 
-Set the controller context which should be used
-
-.. code-block:: php
+Set the controller context which should be used::
 
-    public function setControllerContext(ControllerContext $controllerContext);
+   public function setControllerContext(ControllerContext $controllerContext);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-rendererinterface-render:
@@ -1448,9 +1345,7 @@ Set the controller context which should be used
 render()
 ''''''''
 
-Renders the FormDefinition. This method is expected to call the ``beforeRendering`` hook on each form element.
-
-.. code-block:: php
+Renders the FormDefinition. This method is expected to call the ``beforeRendering`` hook on each form element::
 
     public function render(): string;
 
@@ -1460,11 +1355,9 @@ Renders the FormDefinition. This method is expected to call the ``beforeRenderin
 setFormRuntime()
 ''''''''''''''''
 
-Set the current ``FormRuntime``.
-
-.. code-block:: php
+Set the current ``FormRuntime``::
 
-    public function setFormRuntime(FormRuntime $formRuntime);
+   public function setFormRuntime(FormRuntime $formRuntime);
 
 
 .. _apireference-frontendrendering-programmatically-apimethods-rendererinterface-getformruntime:
@@ -1472,12 +1365,9 @@ Set the current ``FormRuntime``.
 getFormRuntime()
 ''''''''''''''''
 
-Get the current ``FormRuntime``.
-
-.. code-block:: php
-
-    public function getFormRuntime(): FormRuntime;
+Get the current ``FormRuntime``::
 
+   public function getFormRuntime(): FormRuntime;
 
 
 .. _apireference-frontendrendering-runtimemanipulation:
@@ -1496,17 +1386,21 @@ Hooks
 initializeFormElement
 +++++++++++++++++++++
 
-You can connect to the hook and initialize a form elements without defining a custom implementaion to access the element's ``initializeFormElement`` method.
-You only need a class which connects to this hook. Then detect the form element you wish to initialize.
-You can use this hook to prefill form element data for example from database tables.
-Note that this hook will be called **after** all properties from the prototype configuration are set in the form element but **before** the properties from
-the form definition are set in the form element.
-If you want to prefill form element data after the complete form element is configured you should use the :ref:`afterBuildingFinished<apireference-frontendrendering-runtimemanipulation-hooks-afterbuildingfinished>` hook.
-
+You can connect to the hook and initialize a form elements without defining a
+custom implementaion to access the element's ``initializeFormElement`` method.
+You only need a class which connects to this hook. Then detect the form
+element you wish to initialize. You can use this hook to prefill form element
+data for example from database tables. Note that this hook will be called
+**after** all properties from the prototype configuration are set in the form
+element but **before** the properties from the form definition are set in the
+form element. If you want to prefill form element data after the complete form
+element is configured you should use the
+:ref:`afterBuildingFinished<apireference-frontendrendering-runtimemanipulation-hooks-afterbuildingfinished>` hook.
 
-This hook is invoked by the methods ``TYPO3\CMS\Form\Domain\Model\FormElements\Page::createElement()`` and ``TYPO3\CMS\Form\Domain\Model\FormElements\Section::createElement()``.
-That means the hook will **not** be triggered for ``Pages``.
-At this point you don't have access to submitted form element values.
+The initializeFormElement hook is invoked by the methods ``TYPO3\CMS\Form\Domain\Model\FormElements\Page::createElement()``
+and ``TYPO3\CMS\Form\Domain\Model\FormElements\Section::createElement()``.
+That means the hook will **not** be triggered for ``Pages``. At this point
+you do not have access to submitted form element values.
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-initializeformelement-connect:
@@ -1514,10 +1408,16 @@ At this point you don't have access to submitted form element values.
 Connect to the hook
 '''''''''''''''''''
 
-.. code-block:: php
+::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
+
+.. note::
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-initializeformelement-use:
@@ -1525,18 +1425,48 @@ Connect to the hook
 Use the hook
 ''''''''''''
 
-.. code-block:: php
+::
 
-    /**
-     * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable
-     * @return void
-     */
-    public function initializeFormElement(\TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable)
-    {
-        if ($renderable->getUniqueIdentifier() === 'contactForm-text-1') {
-            $renderable->setDefaultValue('foo');
-        }
-    }
+   /**
+    * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable
+    * @return void
+    */
+   public function initializeFormElement(\TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable)
+   {
+       if ($renderable->getUniqueIdentifier() === 'contactForm-text-1') {
+           $renderable->setDefaultValue('foo');
+       }
+   }
+
+
+.. _useATimestampAsKeyPlease:
+
+What does <useATimestampAsKeyPlease> mean?
+++++++++++++++++++++++++++++++++++++++++++
+
+Timestamps are recommended for hooks such as those of the form framework, as
+seen in the following example::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
+
+Leaving the section ``<useATimestampAsKeyPlease>`` as is is not recommended.
+It does nothing except cause the extension to fail and an error message to be
+delivered. Nor should it be replaced with a function like time(), as the key
+should be unalterable. Instead, replace this section with the current UNIX
+timestamp the moment you are implementing the hook. Check out the following
+example::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement'][1507018413]
+       = \VENDOR\YourNamespace\YourClass::class;
+
+
+The purpose of timestamps is to prevent conflicts that arise when two or more
+extensions within one TYPO3 installation use identical keys (e.g.
+``$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['initializeFormElement']['foo'])``.
+When timestamps are used, even a one-second difference in the time different
+hooks were connected ensures that one hook does not override the other.
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-beforeremovefromparentrenderable:
@@ -1553,10 +1483,16 @@ and ``TYPO3\CMS\Form\Domain\Model\FormElements\Section::removeElement()``
 Connect to the hook
 '''''''''''''''''''
 
-.. code-block:: php
+::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeRemoveFromParentRenderable'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeRemoveFromParentRenderable'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+.. note::
+
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-beforeremovefromparentrenderable-use:
@@ -1564,15 +1500,15 @@ Connect to the hook
 Use the hook
 ''''''''''''
 
-.. code-block:: php
+::
 
-    /**
-     * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable
-     * @return void
-     */
-    public function beforeRemoveFromParentRenderable(\TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable)
-    {
-    }
+   /**
+    * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable
+    * @return void
+    */
+   public function beforeRemoveFromParentRenderable(\TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable)
+   {
+   }
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-afterbuildingfinished:
@@ -1595,10 +1531,16 @@ the property-mapper configuration for ``FileUpload`` elements.
 Connect to the hook
 '''''''''''''''''''
 
-.. code-block:: php
+::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['afterBuildingFinished'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
+
+.. note::
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['afterBuildingFinished'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-afterbuildingfinished-use:
@@ -1606,15 +1548,15 @@ Connect to the hook
 Use the hook
 ''''''''''''
 
-.. code-block:: php
+::
 
-    /**
-     * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable
-     * @return void
-     */
-    public function afterBuildingFinished(\TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable)
-    {
-    }
+   /**
+    * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable
+    * @return void
+    */
+   public function afterBuildingFinished(\TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable)
+   {
+   }
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-afterinitializecurrentpage:
@@ -1633,10 +1575,16 @@ other form elements have specific values.
 Connect to the hook
 '''''''''''''''''''
 
-.. code-block:: php
+::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['afterInitializeCurrentPage'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
+
+.. note::
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['afterInitializeCurrentPage'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-afterinitializecurrentpage-use:
@@ -1644,19 +1592,19 @@ Connect to the hook
 Use the hook
 ''''''''''''
 
-.. code-block:: php
+::
 
-    /**
-     * @param \TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime
-     * @param \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface $currentPage
-     * @param null|\TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface $lastPage
-     * @param mixed $elementValue submitted value of the element *before post processing*
-     * @return \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface
-     */
-    public function afterInitializeCurrentPage(\TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime, \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface $currentPage, \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface $lastPage = null, array $requestArguments = []): \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface
-    {
-        return $currentPage;
-    }
+   /**
+    * @param \TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime
+    * @param \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface $currentPage
+    * @param null|\TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface $lastPage
+    * @param mixed $elementValue submitted value of the element *before post processing*
+    * @return \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface
+    */
+   public function afterInitializeCurrentPage(\TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime, \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface $currentPage, \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface $lastPage = null, array $requestArguments = []): \TYPO3\CMS\Form\Domain\Model\Renderable\CompositeRenderableInterface
+   {
+       return $currentPage;
+   }
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-aftersubmit:
@@ -1676,10 +1624,16 @@ EXT:form itself uses this hook to dynamically add validation errors for ``Advanc
 Connect to the hook
 '''''''''''''''''''
 
-.. code-block:: php
+::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['afterSubmit'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['afterSubmit'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+.. note::
+
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-aftersubmit-use:
@@ -1687,19 +1641,19 @@ Connect to the hook
 Use the hook
 ''''''''''''
 
-.. code-block:: php
+::
 
-    /**
-     * @param \TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime
-     * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable
-     * @param mixed $elementValue submitted value of the element *before post processing*
-     * @param array $requestArguments submitted raw request values
-     * @return void
-     */
-    public function afterSubmit(\TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime, \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable, $elementValue, array $requestArguments = [])
-    {
-        return $elementValue;
-    }
+   /**
+    * @param \TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime
+    * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable
+    * @param mixed $elementValue submitted value of the element *before post processing*
+    * @param array $requestArguments submitted raw request values
+    * @return void
+    */
+   public function afterSubmit(\TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime, \TYPO3\CMS\Form\Domain\Model\Renderable\RenderableInterface $renderable, $elementValue, array $requestArguments = [])
+   {
+       return $elementValue;
+   }
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-beforerendering:
@@ -1716,10 +1670,16 @@ This hook is called after all validations and property mappings are done.
 Connect to the hook
 '''''''''''''''''''
 
-.. code-block:: php
+::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeRendering'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
+
+.. note::
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeRendering'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-frontendrendering-runtimemanipulation-hooks-beforerendering-use:
@@ -1727,16 +1687,16 @@ Connect to the hook
 Use the hook
 ''''''''''''
 
-.. code-block:: php
+::
 
-    /**
-     * @param \TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime
-     * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RootRenderableInterface $renderable
-     * @return void
-     */
-    public function beforeRendering(\TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime, \TYPO3\CMS\Form\Domain\Model\Renderable\RootRenderableInterface $renderable)
-    {
-    }
+   /**
+    * @param \TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime
+    * @param \TYPO3\CMS\Form\Domain\Model\Renderable\RootRenderableInterface $renderable
+    * @return void
+    */
+   public function beforeRendering(\TYPO3\CMS\Form\Domain\Runtime\FormRuntime $formRuntime, \TYPO3\CMS\Form\Domain\Model\Renderable\RootRenderableInterface $renderable)
+   {
+   }
 
 
 .. _apireference-finisheroptions:
@@ -1753,16 +1713,14 @@ This finisher can only be used in programmatically-created forms. It makes it
 possible to execute one's own finisher code without having to implement/
 declare this finisher.
 
-Usage through code:
+Usage through code::
 
-.. code-block:: php
-
-    $closureFinisher = $this->objectManager->get(ClosureFinisher::class);
-    $closureFinisher->setOption('closure', function($finisherContext) {
-        $formRuntime = $finisherContext->getFormRuntime();
-        // ...
-    });
-    $formDefinition->addFinisher($closureFinisher);
+   $closureFinisher = $this->objectManager->get(ClosureFinisher::class);
+   $closureFinisher->setOption('closure', function($finisherContext) {
+       $formRuntime = $finisherContext->getFormRuntime();
+       // ...
+   });
+   $formDefinition->addFinisher($closureFinisher);
 
 
 .. _apireference-finisheroptions-closurefinisher-options:
@@ -1796,35 +1754,31 @@ Usage within form definition
 
 .. code-block:: yaml
 
-    identifier: example-form
-    label: 'example'
-    type: Form
-
-    finishers:
-      -
-        identifier: Confirmation
-        options:
-          message: 'Thx for using TYPO3'
-    ...
-
+   identifier: example-form
+   label: 'example'
+   type: Form
 
-Usage through code:
+   finishers:
+     -
+       identifier: Confirmation
+       options:
+         message: 'Thx for using TYPO3'
+   ...
 
-.. code-block:: php
 
-    $formDefinition->createFinisher('Confirmation', [
-        'message' => 'foo',
-    ]);
+Usage through code::
 
-or create manually (not preferred)
+   $formDefinition->createFinisher('Confirmation', [
+       'message' => 'foo',
+   ]);
 
-.. code-block:: php
+or create manually (not preferred)::
 
-    $confirmationFinisher = $this->objectManager->get(ConfirmationFinisher::class);
-    $confirmationFinisher->setOptions([
-        'message' => 'foo',
-    ]);
-    $formDefinition->addFinisher($confirmationFinisher);
+   $confirmationFinisher = $this->objectManager->get(ConfirmationFinisher::class);
+   $confirmationFinisher->setOptions([
+       'message' => 'foo',
+   ]);
+   $formDefinition->addFinisher($confirmationFinisher);
 
 
 .. _apireference-finisheroptions-confirmationfinisher-options:
@@ -1860,28 +1814,24 @@ Usage within form definition
 
 .. code-block:: yaml
 
-    identifier: example-form
-    label: 'example'
-    type: Form
+   identifier: example-form
+   label: 'example'
+   type: Form
 
-    finishers:
-      -
-        identifier: DeleteUploads
-    ...
+   finishers:
+     -
+       identifier: DeleteUploads
+   ...
 
 
-Usage through code:
+Usage through code::
 
-.. code-block:: php
+   $formDefinition->createFinisher('DeleteUploads');
 
-    $formDefinition->createFinisher('DeleteUploads');
+or create manually (not preferred)::
 
-or create manually (not preferred)
-
-.. code-block:: php
-
-    $deleteUploadsFinisher = $this->objectManager->get(DeleteUploadsFinisher::class);
-    $formDefinition->addFinisher($deleteUploadsFinisher);
+   $deleteUploadsFinisher = $this->objectManager->get(DeleteUploadsFinisher::class);
+   $formDefinition->addFinisher($deleteUploadsFinisher);
 
 
 .. _apireference-finisheroptions-emailfinisher:
@@ -1896,47 +1846,43 @@ Usage within form definition
 
 .. code-block:: yaml
 
-    identifier: example-form
-    label: 'example'
-    type: Form
-
-    finishers:
-      -
-        identifier: EmailToReceiver
-        options:
-          subject: 'Your message'
-          recipientAddress: your.company@example.com
-          recipientName: 'Your Company name'
-          senderAddress: 'form@example.com'
-          senderName: 'form submitter'
-    ...
-
-
-Usage through code:
-
-.. code-block:: php
-
-    $formDefinition->createFinisher('EmailToReceiver', [
-        'subject' => 'Your message',
-        'recipientAddress' => 'your.company@example.com',
-        'recipientName' => 'Your Company name',
-        'senderAddress' => 'form@example.com',
-        'senderName' => 'form submitter',
-    ]);
-
-or create manually (not preferred)
-
-.. code-block:: php
-
-    $emailFinisher = $this->objectManager->get(EmailFinisher::class);
-    $emailFinisher->setOptions([
-        'subject' => 'Your message',
-        'recipientAddress' => 'your.company@example.com',
-        'recipientName' => 'Your Company name',
-        'senderAddress' => 'form@example.com',
-        'senderName' => 'form submitter',
-    ]);
-    $formDefinition->addFinisher($emailFinisher);
+   identifier: example-form
+   label: 'example'
+   type: Form
+
+   finishers:
+     -
+       identifier: EmailToReceiver
+       options:
+         subject: 'Your message'
+         recipientAddress: your.company@example.com
+         recipientName: 'Your Company name'
+         senderAddress: 'form@example.com'
+         senderName: 'form submitter'
+   ...
+
+
+Usage through code::
+
+   $formDefinition->createFinisher('EmailToReceiver', [
+       'subject' => 'Your message',
+       'recipientAddress' => 'your.company@example.com',
+       'recipientName' => 'Your Company name',
+       'senderAddress' => 'form@example.com',
+       'senderName' => 'form submitter',
+   ]);
+
+or create manually (not preferred)::
+
+   $emailFinisher = $this->objectManager->get(EmailFinisher::class);
+   $emailFinisher->setOptions([
+       'subject' => 'Your message',
+       'recipientAddress' => 'your.company@example.com',
+       'recipientName' => 'Your Company name',
+       'senderAddress' => 'form@example.com',
+       'senderName' => 'form submitter',
+   ]);
+   $formDefinition->addFinisher($emailFinisher);
 
 
 .. _apireference-finisheroptions-emailfinisher-options:
@@ -2052,6 +1998,7 @@ replyToAddress
       Email address of to be used as reply-to email (use multiple addresses with an array)
 
 .. note::
+
    For the moment, the ``form editor`` cannot deal with multiple reply-to addresses (use multiple addresses with an array)
 
 
@@ -2073,6 +2020,7 @@ carbonCopyAddress
       Email address of the copy recipient (use multiple addresses with an array)
 
 .. note::
+
    For the moment, the ``form editor`` cannot deal with multiple copy recipient addresses (use multiple addresses with an array)
 
 
@@ -2094,6 +2042,7 @@ blindCarbonCopyAddress
       Email address of the blind copy recipient (use multiple addresses with an array)
 
 .. note::
+
    For the moment, the ``form editor`` cannot deal with multiple blind copy recipient addresses (use multiple addresses with an array)
 
 
@@ -2256,46 +2205,41 @@ FlashMessage finisher
 
 A simple finisher that adds a message to the FlashMessageContainer.
 
-
 Usage within form definition
 
 .. code-block:: yaml
 
-    identifier: example-form
-    label: 'example'
-    type: Form
-
-    finishers:
-      -
-        identifier: FlashMessage
-        options:
-          messageBody: 'Thx for using TYPO3'
-          messageTitle: 'Merci'
-          severity: 0
-    ...
-
+   identifier: example-form
+   label: 'example'
+   type: Form
 
-Usage through code:
+   finishers:
+     -
+       identifier: FlashMessage
+       options:
+         messageBody: 'Thx for using TYPO3'
+         messageTitle: 'Merci'
+         severity: 0
+   ...
 
-.. code-block:: php
 
-    $formDefinition->createFinisher('FlashMessage', [
-        'messageBody' => 'Thx for using TYPO3',
-        'messageTitle' => 'Merci',
-        'severity' => \TYPO3\CMS\Core\Messaging\AbstractMessage::OK,
-    ]);
+Usage through code::
 
-or create manually (not preferred)
+   $formDefinition->createFinisher('FlashMessage', [
+       'messageBody' => 'Thx for using TYPO3',
+       'messageTitle' => 'Merci',
+       'severity' => \TYPO3\CMS\Core\Messaging\AbstractMessage::OK,
+   ]);
 
-.. code-block:: php
+or create manually (not preferred)::
 
-    $flashMessageFinisher = $this->objectManager->get(FlashMessageFinisher::class);
-    $flashMessageFinisher->setOptions([
-        'messageBody' => 'Thx for using TYPO3',
-        'messageTitle' => 'Merci',
-        'severity' => \TYPO3\CMS\Core\Messaging\AbstractMessage::OK,
-    ]);
-    $formDefinition->addFinisher($flashMessageFinisher);
+   $flashMessageFinisher = $this->objectManager->get(FlashMessageFinisher::class);
+   $flashMessageFinisher->setOptions([
+       'messageBody' => 'Thx for using TYPO3',
+       'messageTitle' => 'Merci',
+       'severity' => \TYPO3\CMS\Core\Messaging\AbstractMessage::OK,
+   ]);
+   $formDefinition->addFinisher($flashMessageFinisher);
 
 
 .. _apireference-finisheroptions-flashmessagefinisher-options:
@@ -2401,43 +2345,38 @@ Redirect finisher
 
 A simple finisher that redirects to another page.
 
-
 Usage within form definition
 
 .. code-block:: yaml
 
-    identifier: example-form
-    label: 'example'
-    type: Form
-
-    finishers:
-      -
-        identifier: Redirect
-        options:
-          pageUid: 1
-          additionalParameters: 'param1=value1&param2=value2'
-    ...
+   identifier: example-form
+   label: 'example'
+   type: Form
 
+   finishers:
+     -
+       identifier: Redirect
+       options:
+         pageUid: 1
+         additionalParameters: 'param1=value1&param2=value2'
+   ...
 
-Usage through code:
 
-.. code-block:: php
+Usage through code::
 
-    $formDefinition->createFinisher('Redirect', [
-        'pageUid' => 1,
-        'additionalParameters' => 'param1=value1&param2=value2',
-    ]);
+   $formDefinition->createFinisher('Redirect', [
+       'pageUid' => 1,
+       'additionalParameters' => 'param1=value1&param2=value2',
+   ]);
 
-or create manually (not preferred)
+or create manually (not preferred)::
 
-.. code-block:: php
-
-    $redirectFinisher = $this->objectManager->get(RedirectFinisher::class);
-    $redirectFinisher->setOptions([
-        'pageUid' => 1,
-        'additionalParameters' => 'param1=value1&param2=value2',
-    ]);
-    $formDefinition->addFinisher($redirectFinisher);
+   $redirectFinisher = $this->objectManager->get(RedirectFinisher::class);
+   $redirectFinisher->setOptions([
+       'pageUid' => 1,
+       'additionalParameters' => 'param1=value1&param2=value2',
+   ]);
+   $formDefinition->addFinisher($redirectFinisher);
 
 
 .. _apireference-finisheroptions-redirectfinisher-options:
@@ -2529,83 +2468,79 @@ Usage within form definition
 
 .. code-block:: yaml
 
-    identifier: example-form
-    label: 'example'
-    type: Form
-
-    finishers:
-      -
-        identifier: SaveToDatabase
-        options:
-          table: 'fe_users'
-          mode: update
-          whereClause:
-            uid: 1
-          databaseColumnMappings:
-            pid:
-              value: 1
-          elements:
-            textfield-identifier-1:
-              mapOnDatabaseColumn: 'first_name'
-            textfield-identifier-2:
-              mapOnDatabaseColumn: 'last_name'
-            textfield-identifier-3:
-              mapOnDatabaseColumn: 'username'
-            advancedpassword-1:
-              mapOnDatabaseColumn: 'password'
-              skipIfValueIsEmpty: true
-    ...
-
-
-Usage through code:
-
-.. code-block:: php
-
-    $formDefinition->createFinisher('SaveToDatabase', [
-        'table' => 'fe_users',
-        'mode' => 'update',
-        'whereClause' => [
-            'uid' => 1,
-        ],
-        'databaseColumnMappings' => [
-            'pid' => ['value' => 1],
-        ],
-        'elements' => [
-            'textfield-identifier-1' => ['mapOnDatabaseColumn' => 'first_name'],
-            'textfield-identifier-2' => ['mapOnDatabaseColumn' => 'last_name'],
-            'textfield-identifier-3' => ['mapOnDatabaseColumn' => 'username'],
-            'advancedpassword-1' => [
-                'mapOnDatabaseColumn' => 'password',
-                'skipIfValueIsEmpty' => true,
-            ],
-        ],
-    ]);
-
-or create manually (not preferred)
-
-.. code-block:: php
-
-    $saveToDatabaseFinisher = $this->objectManager->get(SaveToDatabaseFinisher::class);
-    $saveToDatabaseFinisher->setOptions([
-        'table' => 'fe_users',
-        'mode' => 'update',
-        'whereClause' => [
-            'uid' => 1,
-        ],
-        'databaseColumnMappings' => [
-            'pid' => ['value' => 1],
-        ],
-        'elements' => [
-            'textfield-identifier-1' => ['mapOnDatabaseColumn' => 'first_name'],
-            'textfield-identifier-2' => ['mapOnDatabaseColumn' => 'last_name'],
-            'textfield-identifier-3' => ['mapOnDatabaseColumn' => 'username'],
-            'advancedpassword-1' => [
-                'mapOnDatabaseColumn' => 'password',
-                'skipIfValueIsEmpty' => true,
-            ],
-        ],
-    ]);
-    $formDefinition->addFinisher($saveToDatabaseFinisher);
+   identifier: example-form
+   label: 'example'
+   type: Form
+
+   finishers:
+     -
+       identifier: SaveToDatabase
+       options:
+         table: 'fe_users'
+         mode: update
+         whereClause:
+           uid: 1
+         databaseColumnMappings:
+           pid:
+             value: 1
+         elements:
+           textfield-identifier-1:
+             mapOnDatabaseColumn: 'first_name'
+           textfield-identifier-2:
+             mapOnDatabaseColumn: 'last_name'
+           textfield-identifier-3:
+             mapOnDatabaseColumn: 'username'
+           advancedpassword-1:
+             mapOnDatabaseColumn: 'password'
+             skipIfValueIsEmpty: true
+   ...
+
+
+Usage through code::
+
+   $formDefinition->createFinisher('SaveToDatabase', [
+       'table' => 'fe_users',
+       'mode' => 'update',
+       'whereClause' => [
+           'uid' => 1,
+       ],
+       'databaseColumnMappings' => [
+           'pid' => ['value' => 1],
+       ],
+       'elements' => [
+           'textfield-identifier-1' => ['mapOnDatabaseColumn' => 'first_name'],
+           'textfield-identifier-2' => ['mapOnDatabaseColumn' => 'last_name'],
+           'textfield-identifier-3' => ['mapOnDatabaseColumn' => 'username'],
+           'advancedpassword-1' => [
+               'mapOnDatabaseColumn' => 'password',
+               'skipIfValueIsEmpty' => true,
+           ],
+       ],
+   ]);
+
+or create manually (not preferred)::
+
+   $saveToDatabaseFinisher = $this->objectManager->get(SaveToDatabaseFinisher::class);
+   $saveToDatabaseFinisher->setOptions([
+       'table' => 'fe_users',
+       'mode' => 'update',
+       'whereClause' => [
+           'uid' => 1,
+       ],
+       'databaseColumnMappings' => [
+           'pid' => ['value' => 1],
+       ],
+       'elements' => [
+           'textfield-identifier-1' => ['mapOnDatabaseColumn' => 'first_name'],
+           'textfield-identifier-2' => ['mapOnDatabaseColumn' => 'last_name'],
+           'textfield-identifier-3' => ['mapOnDatabaseColumn' => 'username'],
+           'advancedpassword-1' => [
+               'mapOnDatabaseColumn' => 'password',
+               'skipIfValueIsEmpty' => true,
+           ],
+       ],
+   ]);
+   $formDefinition->addFinisher($saveToDatabaseFinisher);
 
 You can write options as an array to perform multiple database operations.
 
@@ -2613,80 +2548,76 @@ Usage within form definition
 
 .. code-block:: yaml
 
-    identifier: example-form
-    label: 'example'
-    type: Form
-
-    finishers:
-      -
-        identifier: SaveToDatabase
-        options:
-          1:
-            table: 'my_table'
-            mode: insert
-            databaseColumnMappings:
-              some_column:
-                value: 'cool'
-          2:
-            table: 'my_other_table'
-            mode: update
-            whereClause:
-              pid: 1
-            databaseColumnMappings:
-              some_other_column:
-                value: '{SaveToDatabase.insertedUids.1}'
-    ...
-
-
-Usage through code:
-
-.. code-block:: php
-
-    $formDefinition->createFinisher('SaveToDatabase', [
-        1 => [
-            'table' => 'my_table',
-            'mode' => 'insert',
-            'databaseColumnMappings' => [
-                'some_column' => ['value' => 'cool'],
-            ],
-        ],
-        2 => [
-            'table' => 'my_other_table',
-            'mode' => 'update',
-            'whereClause' => [
-                'pid' => 1,
-            ],
-            'databaseColumnMappings' => [
-                'some_other_column' => ['value' => '{SaveToDatabase.insertedUids.1}'],
-            ],
-        ],
-    ]);
-
-or create manually (not preferred)
-
-.. code-block:: php
-
-    $saveToDatabaseFinisher = $this->objectManager->get(SaveToDatabaseFinisher::class);
-    $saveToDatabaseFinisher->setOptions([
-        1 => [
-            'table' => 'my_table',
-            'mode' => 'insert',
-            'databaseColumnMappings' => [
-                'some_column' => ['value' => 'cool'],
-            ],
-        ],
-        2 => [
-            'table' => 'my_other_table',
-            'mode' => 'update',
-            'whereClause' => [
-                'pid' => 1,
-            ],
-            'databaseColumnMappings' => [
-                'some_other_column' => ['value' => '{SaveToDatabase.insertedUids.1}'],
-            ],
-        ],
-    ]);
-    $formDefinition->addFinisher($saveToDatabaseFinisher);
+   identifier: example-form
+   label: 'example'
+   type: Form
+
+   finishers:
+     -
+       identifier: SaveToDatabase
+       options:
+         1:
+           table: 'my_table'
+           mode: insert
+           databaseColumnMappings:
+             some_column:
+               value: 'cool'
+         2:
+           table: 'my_other_table'
+           mode: update
+           whereClause:
+             pid: 1
+           databaseColumnMappings:
+             some_other_column:
+               value: '{SaveToDatabase.insertedUids.1}'
+   ...
+
+
+Usage through code::
+
+   $formDefinition->createFinisher('SaveToDatabase', [
+       1 => [
+           'table' => 'my_table',
+           'mode' => 'insert',
+           'databaseColumnMappings' => [
+               'some_column' => ['value' => 'cool'],
+           ],
+       ],
+       2 => [
+           'table' => 'my_other_table',
+           'mode' => 'update',
+           'whereClause' => [
+               'pid' => 1,
+           ],
+           'databaseColumnMappings' => [
+               'some_other_column' => ['value' => '{SaveToDatabase.insertedUids.1}'],
+           ],
+       ],
+   ]);
+
+or create manually (not preferred)::
+
+   $saveToDatabaseFinisher = $this->objectManager->get(SaveToDatabaseFinisher::class);
+   $saveToDatabaseFinisher->setOptions([
+       1 => [
+           'table' => 'my_table',
+           'mode' => 'insert',
+           'databaseColumnMappings' => [
+               'some_column' => ['value' => 'cool'],
+           ],
+       ],
+       2 => [
+           'table' => 'my_other_table',
+           'mode' => 'update',
+           'whereClause' => [
+               'pid' => 1,
+           ],
+           'databaseColumnMappings' => [
+               'some_other_column' => ['value' => '{SaveToDatabase.insertedUids.1}'],
+           ],
+       ],
+   ]);
+   $formDefinition->addFinisher($saveToDatabaseFinisher);
 
 
 This perform 2 database operations.
@@ -2833,7 +2764,7 @@ elements.<formElementIdentifier>.saveFileIdentifierInsteadOfUid
 
 :aspect:`Description`
       Set this to true if the database column should not be written if the value from the submitted form element with the identifier
-      ``<formElementIdentifier>`` is empty (think about password fields etc.)
+      ``<formElementIdentifier>`` is empty (think about password fields etc.).
 
       This setting only rules for form elements which creates a FAL object like ``FileUpload`` or ``ImageUpload``.
       By default, the uid of the FAL object will be written into the database column. Set this to true if you want to store the
@@ -2906,7 +2837,6 @@ databaseColumnMappings.<databaseColumnName>.skipIfValueIsEmpty
       Set this to true if the database column should not be written if the value from ``options.databaseColumnMappings.<databaseColumnName>.value`` is empty. Empty means strings without content, whitespace is valid content.
 
 
-
 .. _apireference-formeditor:
 
 Form editor
@@ -2935,10 +2865,16 @@ The form manager calls the 'beforeFormCreate' hook.
 Connect to the hook
 +++++++++++++++++++
 
-.. code-block:: php
+::
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeFormCreate'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeFormCreate'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
+
+.. note::
+
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-formeditor-hooks-beforeformcreate-use:
@@ -2946,17 +2882,17 @@ Connect to the hook
 Use the hook
 ++++++++++++
 
-.. code-block:: php
+::
 
-    /**
-     * @param string $formPersistenceIdentifier
-     * @param array $formDefinition
-     * @return array
-     */
-    public function beforeFormCreate(string $formPersistenceIdentifier, array $formDefinition): array
-    {
-        return $formDefinition;
-    }
+   /**
+    * @param string $formPersistenceIdentifier
+    * @param array $formDefinition
+    * @return array
+    */
+   public function beforeFormCreate(string $formPersistenceIdentifier, array $formDefinition): array
+   {
+       return $formDefinition;
+   }
 
 
 .. _apireference-formeditor-hooks-beforeformduplicate:
@@ -2972,10 +2908,16 @@ The form manager call the 'beforeFormDuplicate' hook.
 Connect to the hook
 +++++++++++++++++++
 
-.. code-block:: php
+::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeFormDuplicate'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeFormDuplicate'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+.. note::
+
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-formeditor-hooks-beforeformduplicate-use:
@@ -2983,17 +2925,17 @@ Connect to the hook
 Use the hook
 ++++++++++++
 
-.. code-block:: php
+::
 
-    /**
-     * @param string $formPersistenceIdentifier
-     * @param array $formDefinition
-     * @return array
-     */
-    public function beforeFormDuplicate(string $formPersistenceIdentifier, array $formDefinition): array
-    {
-        return $formDefinition;
-    }
+   /**
+    * @param string $formPersistenceIdentifier
+    * @param array $formDefinition
+    * @return array
+    */
+   public function beforeFormDuplicate(string $formPersistenceIdentifier, array $formDefinition): array
+   {
+       return $formDefinition;
+   }
 
 
 .. _apireference-formeditor-hooks-beforeformdelete:
@@ -3009,10 +2951,16 @@ The form manager call the 'beforeFormDelete' hook.
 Connect to the hook
 +++++++++++++++++++
 
-.. code-block:: php
+::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeFormDelete'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
+
+
+.. note::
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeFormDelete'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-formeditor-hooks-beforeformdelete-use:
@@ -3020,15 +2968,15 @@ Connect to the hook
 Use the hook
 ++++++++++++
 
-.. code-block:: php
+::
 
-    /**
-     * @param string $formPersistenceIdentifier
-     * @return void
-     */
-    public function beforeFormDelete(string $formPersistenceIdentifier)
-    {
-    }
+   /**
+    * @param string $formPersistenceIdentifier
+    * @return void
+    */
+   public function beforeFormDelete(string $formPersistenceIdentifier)
+   {
+   }
 
 
 .. _apireference-formeditor-hooks-beforeformsave:
@@ -3044,10 +2992,16 @@ The form editor call the 'beforeFormSave' hook.
 Connect to the hook
 +++++++++++++++++++
 
-.. code-block:: php
+::
+
+   $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeFormSave'][<useATimestampAsKeyPlease>]
+       = \VENDOR\YourNamespace\YourClass::class;
 
-    $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/form']['beforeFormSave'][<useATimestampAsKeyPlease>]
-        = \VENDOR\YourNamespace\YourClass::class;
+
+.. note::
+
+   Wondering what :ref:`useATimestampAsKeyPlease<useATimestampAsKeyPlease>`
+   means?
 
 
 .. _apireference-formeditor-hooks-beforeformsave-use:
@@ -3055,18 +3009,17 @@ Connect to the hook
 Use the hook
 ++++++++++++
 
-.. code-block:: php
-
-    /**
-     * @param string $formPersistenceIdentifier
-     * @param array $formDefinition
-     * @return array
-     */
-    public function beforeFormSave(string $formPersistenceIdentifier, array $formDefinition): array
-    {
-        return $formDefinition;
-    }
+::
 
+   /**
+    * @param string $formPersistenceIdentifier
+    * @param array $formDefinition
+    * @return array
+    */
+   public function beforeFormSave(string $formPersistenceIdentifier, array $formDefinition): array
+   {
+       return $formDefinition;
+   }
 
 
 .. _apireference-formeditor-stage:
@@ -3139,13 +3092,13 @@ possible for form elements that have ``properties.options.*`` values, e.g.
 
 .. code-block:: yaml
 
-        type: MultiCheckbox
-        identifier: multicheckbox-1
-        label: 'Multi checkbox'
-        properties:
-          options:
-            value1: label1
-            value2: label2
+       type: MultiCheckbox
+       identifier: multicheckbox-1
+       label: 'Multi checkbox'
+       properties:
+         options:
+           value1: label1
+           value2: label2
 
 
 The template will now list 'label1' and 'label2'.
@@ -3161,28 +3114,28 @@ under ``properties.allowedMimeTypes.*`` as an array.
 
 .. code-block:: yaml
 
-        type: FileUpload
-        identifier: fileupload-1
-        label: 'File upload'
-        properties:
-          saveToFileMount: '1:/user_upload/'
-          allowedMimeTypes:
-            - application/msexcel
-            - application/pdf
+       type: FileUpload
+       identifier: fileupload-1
+       label: 'File upload'
+       properties:
+         saveToFileMount: '1:/user_upload/'
+         allowedMimeTypes:
+           - application/msexcel
+           - application/pdf
 
 
 Stage/SelectTemplate
 
 .. code-block:: html
 
-    <div data-identifier="multiValueContainer" data-template-property="properties.options">
+   <div data-identifier="multiValueContainer" data-template-property="properties.options">
 
 
 Stage/FileUploadTemplate
 
 .. code-block:: html
 
-    <div data-identifier="multiValueContainer" data-template-property="properties.allowedMimeTypes">
+   <div data-identifier="multiValueContainer" data-template-property="properties.allowedMimeTypes">
 
 
 ``data-template-property`` contains the path to the property, which is to be
@@ -3192,7 +3145,6 @@ The ``Stage/SelectTemplate`` can then :ref:`be rendered <apireference-formeditor
 with the method ``getFormEditorApp().getViewModel().getStage().renderSelectTemplates()``.
 
 
-
 .. _apireference-formeditor-basicjavascriptconcepts:
 
 Basic JavaScript Concepts
@@ -3211,31 +3163,29 @@ Note that the order of the subscriber is not manipulable and that information
 flow between the subscribers does not exist. All events must be asynchronously
 designed.
 
-
 Publish an event:
 
 .. code-block:: javascript
 
-    getPublisherSubscriber().publish('eventname', [argumentToPublish1, argumentToPublish2, ...]);
+   getPublisherSubscriber().publish('eventname', [argumentToPublish1, argumentToPublish2, ...]);
 
 
 Subscribe to an event:
 
 .. code-block:: javascript
 
-    var subscriberToken = getPublisherSubscriber().subscribe('eventname', function(topic, args) {
-        // args[0] = argumentToPublish1
-        // args[1] = argumentToPublish2
-        // ...
-    });
+   var subscriberToken = getPublisherSubscriber().subscribe('eventname', function(topic, args) {
+       // args[0] = argumentToPublish1
+       // args[1] = argumentToPublish2
+       // ...
+   });
 
 
 Unsubscribe an event subscriber:
 
 .. code-block:: javascript
 
-    getPublisherSubscriber().unsubscribe(subscriberToken);
-
+   getPublisherSubscriber().unsubscribe(subscriberToken);
 
 EXT:form itself publishes and subscribes to the following events:
 
@@ -3252,15 +3202,15 @@ Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('ajax/beforeSend', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('ajax/beforeSend', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-ajax-complete:
@@ -3271,20 +3221,19 @@ ajax/complete
 Each Ajax request is called after the end of this event. EXT:form uses this
 event to remove the spinner icon on the save button.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('ajax/complete', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('ajax/complete', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-core-ajax-error:
@@ -3297,23 +3246,22 @@ render the current page of the form in the ``preview view``, fails. EXT:form
 uses this event to show an error message as a flash message and to show the
 received error text in the ``preview view``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = jqXHR
-     *              args[1] = textStatus
-     *              args[2] = errorThrown
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('core/ajax/error', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = jqXHR
+    *              args[1] = textStatus
+    *              args[2] = errorThrown
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('core/ajax/error', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-core-ajax-renderformdefinitionpage-success:
@@ -3325,22 +3273,21 @@ This event is called if the Ajax request that is used to render the current
 page of the form in the ``preview view`` was successful. EXT:form uses this
 event to display the rendered form in the ``preview view``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = html
-     *              args[1] = pageIndex
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('core/ajax/renderFormDefinitionPage/success', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = html
+    *              args[1] = pageIndex
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('core/ajax/renderFormDefinitionPage/success', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-core-ajax-saveformdefinition-success:
@@ -3353,21 +3300,20 @@ successful. EXT:form uses this event to display a success message as a flash
 message. The ``form editor`` is also informed that no unsaved content currently
 exists.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = html
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('core/ajax/saveFormDefinition/success', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = html
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('core/ajax/saveFormDefinition/success', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-core-applicationstate-add:
@@ -3381,23 +3327,22 @@ undo/ redo function can be implemented. This event is called whenever the
 current state is added to the stack. EXT:form uses this event to reset the
 enabled/ disabled state of the undo/ redo buttons.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = applicationState
-     *              args[1] = stackPointer
-     *              args[2] = stackSize
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('core/applicationState/add', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = applicationState
+    *              args[1] = stackPointer
+    *              args[2] = stackSize
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('core/applicationState/add', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-core-currentlyselectedformelementchanged:
@@ -3409,21 +3354,20 @@ The method ``getFormEditorApp().setCurrentlySelectedFormElement()`` tells the
 ``form editor`` which form element should currently be dealt with. This method
 calls this event at the end.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('core/currentlySelectedFormElementChanged', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('core/currentlySelectedFormElementChanged', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-core-formelement-somepropertychanged:
@@ -3444,24 +3388,23 @@ a form element in other components (e.g. ``Tree`` component ) when this label
 is changed. Furthermore, any validation errors from form element properties
 are indicated by this event in the ``Tree`` component.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = propertyPath
-     *              args[1] = value
-     *              args[2] = oldValue
-     *              args[3] = formElementIdentifierPath
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('core/formElement/somePropertyChanged', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = propertyPath
+    *              args[1] = value
+    *              args[2] = oldValue
+    *              args[3] = formElementIdentifierPath
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('core/formElement/somePropertyChanged', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-collectionelement-moved:
@@ -3474,24 +3417,23 @@ calls this event at the end. EXT:form uses this event to re-render the
 ``Inspector`` component as soon as a property collection element (validator/
 finisher) is moved.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = movedCollectionElementIdentifier
-     *              args[1] = previousCollectionElementIdentifier
-     *              args[2] = nextCollectionElementIdentifier
-     *              args[3] = collectionName
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/collectionElement/moved', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = movedCollectionElementIdentifier
+    *              args[1] = previousCollectionElementIdentifier
+    *              args[2] = nextCollectionElementIdentifier
+    *              args[3] = collectionName
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/collectionElement/moved', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-collectionelement-new-added:
@@ -3504,25 +3446,24 @@ calls this event at the end. EXT:form uses this event to re-render the
 ``Inspector`` component as soon as a property collection element (validator/
 finisher) is created and added.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = collectionElementIdentifier
-     *              args[1] = collectionName
-     *              args[2] = formElement
-     *              args[3] = collectionElementConfiguration
-     *              args[4] = referenceCollectionElementIdentifier
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/collectionElement/new/added', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = collectionElementIdentifier
+    *              args[1] = collectionName
+    *              args[2] = formElement
+    *              args[3] = collectionElementConfiguration
+    *              args[4] = referenceCollectionElementIdentifier
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/collectionElement/new/added', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-collectionelement-removed:
@@ -3535,23 +3476,22 @@ calls this event at the end. EXT:form uses this event to re-render the
 ``Inspector`` component as soon as a property collection element (validator/
 finisher) is removed.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = collectionElementIdentifier
-     *              args[1] = collectionName
-     *              args[2] = formElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/collectionElement/removed', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = collectionElementIdentifier
+    *              args[1] = collectionName
+    *              args[2] = formElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/collectionElement/removed', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-formelement-inserted:
@@ -3565,21 +3505,20 @@ call this event at the end. EXT:form uses this event to set the current
 to-be-processed form element (``getFormEditorApp().setCurrentlySelectedFormElement()``)
 and to re-render the ``Tree``, ``Stage`` and ``Inspector`` components.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = newFormElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/formElement/inserted', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = newFormElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/formElement/inserted', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-formelement-moved:
@@ -3590,21 +3529,20 @@ view/formElement/moved
 The method ``getFormEditorApp().getViewModel().moveFormElement()`` calls this
 event at the end.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = movedFormElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/formElement/moved', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = movedFormElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/formElement/moved', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-formelement-removed:
@@ -3617,21 +3555,20 @@ event at the end. EXT:form uses this event to set the current to-be-processed
 form element (``getFormEditorApp().setCurrentlySelectedFormElement()``) and to
 re-render the ``Tree``, ``Stage`` and ``Inspector`` components.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = parentFormElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/formElement/removed', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = parentFormElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/formElement/removed', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-header-button-close-clicked:
@@ -3643,20 +3580,19 @@ The onClick event of the "Close" button in the ``form editor's`` header section
 calls this event. EXT:form uses this event to display a warning message in case
 there are unsaved changes.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/header/button/close/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/header/button/close/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-header-button-newpage-clicked:
@@ -3668,21 +3604,20 @@ The onClick event of the "new page" button in the ``form editor's`` header
 section calls this event. EXT:form uses this event to display the "new page"
 dialog box.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = targetEvent
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/header/button/newPage/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = targetEvent
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/header/button/newPage/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-header-button-save-clicked:
@@ -3695,20 +3630,19 @@ calls this event. EXT:form uses this event either to display a dialog box with
 the element in question (if there are validation errors) or to save the ``form
 definition`` (if there are no validation errors).
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/header/button/save/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/header/button/save/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-header-formsettings-clicked:
@@ -3720,20 +3654,19 @@ The onClick event of the "settings"  button in the ``form editor's`` header
 section calls this event. EXT:form uses this event to select the root form
 element.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/header/formSettings/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/header/formSettings/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-insertelements-perform-after:
@@ -3754,21 +3687,20 @@ event :ref:`view/formElement/inserted<apireference-formeditor-basicjavascriptcon
 is called. The event ``view/formElement/inserted`` in ``getFormEditorApp().getViewModel().createAndAddFormElement()``
 was previously deactivated.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElementType
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/insertElements/perform/after', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElementType
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/insertElements/perform/after', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-insertelements-perform-bottom:
@@ -3785,21 +3717,20 @@ EXT:form uses this event to create a new form element (``getFormEditorApp().getV
 This element is always created as the last element of the currently selected
 page.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElementType
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/insertElements/perform/bottom', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElementType
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/insertElements/perform/bottom', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-insertelements-perform-inside:
@@ -3815,21 +3746,20 @@ element:
 EXT:form uses this event to create a new form element as a child element of the
 currently selected element (``getFormEditorApp().getViewModel().createAndAddFormElement()``).
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElementType
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/insertElements/perform/inside', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElementType
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/insertElements/perform/inside', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-insertpages-perform:
@@ -3846,21 +3776,20 @@ element:
 EXT:form uses this event to create a new page after the currently selected page
 (``getFormEditorApp().getViewModel().createAndAddFormElement()``).
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElementType
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/insertPages/perform', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElementType
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/insertPages/perform', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-inspector-collectionelement-existing-selected:
@@ -3881,17 +3810,17 @@ Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = collectionElementIdentifier
-     *              args[1] = collectionName
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/inspector/collectionElement/existing/selected', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = collectionElementIdentifier
+    *              args[1] = collectionName
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/inspector/collectionElement/existing/selected', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-inspector-collectionelement-new-selected:
@@ -3907,22 +3836,21 @@ addition, the ``inspector editor`` :ref:`RequiredValidatorEditor <typo3.cms.form
 calls this event when a checkbox is chosen. EXT:form uses this event to add and
 render the validator/ finisher of the ``form definition`` via ``getFormEditorApp().getViewModel().createAndAddPropertyCollectionElement()``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = collectionElementIdentifier
-     *              args[1] = collectionName
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/inspector/collectionElement/new/selected', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = collectionElementIdentifier
+    *              args[1] = collectionName
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/inspector/collectionElement/new/selected', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-inspector-collectionelement-dnd-update:
@@ -3937,24 +3865,23 @@ collection element in the ``Inspector`` component is sorted. EXT:form uses this
 event to move the validator/ finisher in the ``form definition`` via the method
 ``getFormEditorApp().getViewModel().movePropertyCollectionElement()``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = movedCollectionElementIdentifier
-     *              args[1] = previousCollectionElementIdentifier
-     *              args[2] = nextCollectionElementIdentifier
-     *              args[3] = collectionName
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/inspector/collectionElements/dnd/update', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = movedCollectionElementIdentifier
+    *              args[1] = previousCollectionElementIdentifier
+    *              args[2] = nextCollectionElementIdentifier
+    *              args[3] = collectionName
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/inspector/collectionElements/dnd/update', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-inspector-editor-insert-perform:
@@ -3984,208 +3911,207 @@ your own ``inspector editor``, you can use this event to execute in
 the corresponding JavaScript code, with the help of the property
 ``templateName``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = editorConfiguration
-     *              args[1] = editorHtml
-     *              args[2] = collectionElementIdentifier
-     *              args[3] = collectionName
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/inspector/editor/insert/perform', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = editorConfiguration
+    *              args[1] = editorHtml
+    *              args[2] = collectionElementIdentifier
+    *              args[3] = collectionName
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/inspector/editor/insert/perform', function(topic, args) {
+   });
 
 
 A simple example that registers a custom ``inspector editor`` called 'Inspector-MyCustomInspectorEditor' and adds it to text form elements:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formEditor:
-                dynamicRequireJsModules:
-                  additionalViewModelModules:
-                    - 'TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel'
-                formEditorFluidConfiguration:
-                  partialRootPaths:
-                    100: 'EXT:my_site_package/Resources/Private/Backend/Partials/FormEditor/'
-                formEditorPartials:
-                  Inspector-MyCustomInspectorEditor: 'Inspector/MyCustomInspectorEditor'
-              formElementsDefinition:
-                Text:
-                  formEditor:
-                    editors:
-                      600:
-                        templateName: 'Inspector-MyCustomInspectorEditor'
-                        ...
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formEditor:
+               dynamicRequireJsModules:
+                 additionalViewModelModules:
+                   - 'TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel'
+               formEditorFluidConfiguration:
+                 partialRootPaths:
+                   100: 'EXT:my_site_package/Resources/Private/Backend/Partials/FormEditor/'
+               formEditorPartials:
+                 Inspector-MyCustomInspectorEditor: 'Inspector/MyCustomInspectorEditor'
+             formElementsDefinition:
+               Text:
+                 formEditor:
+                   editors:
+                     600:
+                       templateName: 'Inspector-MyCustomInspectorEditor'
+                       ...
 
 
 .. code-block:: javascript
    :emphasize-lines: 107-116
 
-    /**
-     * Module: TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel
-     */
-    define(['jquery',
-            'TYPO3/CMS/Form/Backend/FormEditor/Helper'
-            ], function($, Helper) {
-            'use strict';
-
-        return (function($, Helper) {
-
-            /**
-             * @private
-             *
-             * @var object
-             */
-            var _formEditorApp = null;
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getFormEditorApp() {
-                return _formEditorApp;
-            };
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getPublisherSubscriber() {
-                return getFormEditorApp().getPublisherSubscriber();
-            };
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getUtility() {
-                return getFormEditorApp().getUtility();
-            };
-
-            /**
-             * @private
-             *
-             * @param object
-             * @return object
-             */
-            function getHelper() {
-                return Helper;
-            };
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getCurrentlySelectedFormElement() {
-                return getFormEditorApp().getCurrentlySelectedFormElement();
-            };
-
-            /**
-             * @private
-             *
-             * @param mixed test
-             * @param string message
-             * @param int messageCode
-             * @return void
-             */
-            function assert(test, message, messageCode) {
-                return getFormEditorApp().assert(test, message, messageCode);
-            };
-
-            /**
-             * @private
-             *
-             * @return void
-             * @throws 1491643380
-             */
-            function _helperSetup() {
-                assert('function' === $.type(Helper.bootstrap),
-                    'The view model helper does not implement the method "bootstrap"',
-                    1491643380
-                );
-                Helper.bootstrap(getFormEditorApp());
-            };
-
-            /**
-             * @private
-             *
-             * @return void
-             */
-            function _subscribeEvents() {
-                /**
-                 * @private
-                 *
-                 * @param string
-                 * @param array
-                 *              args[0] = editorConfiguration
-                 *              args[1] = editorHtml
-                 *              args[2] = collectionElementIdentifier
-                 *              args[3] = collectionName
-                 * @return void
-                 */
-                getPublisherSubscriber().subscribe('view/inspector/editor/insert/perform', function(topic, args) {
-                    if (args[0]['templateName'] === 'Inspector-MyCustomInspectorEditor') {
-                        renderMyCustomInspectorEditor(
-                            args[0],
-                            args[1],
-                            args[2],
-                            args[3]
-                        );
-                    }
-                });
-            };
-
-            /**
-             * @private
-             *
-             * @param object editorConfiguration
-             * @param object editorHtml
-             * @param string collectionElementIdentifier
-             * @param string collectionName
-             * @return void
-             */
-            function renderMyCustomInspectorEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
-                // do cool stuff
-            });
-
-            /**
-             * @public
-             *
-             * @param object formEditorApp
-             * @return void
-             */
-            function bootstrap(formEditorApp) {
-                _formEditorApp = formEditorApp;
-                _helperSetup();
-                _subscribeEvents();
-            };
-
-            /**
-             * Publish the public methods.
-             * Implements the "Revealing Module Pattern".
-             */
-            return {
-                bootstrap: bootstrap
-            };
-        })($, Helper);
-    });
+   /**
+    * Module: TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel
+    */
+   define(['jquery',
+           'TYPO3/CMS/Form/Backend/FormEditor/Helper'
+           ], function($, Helper) {
+           'use strict';
+
+       return (function($, Helper) {
+
+           /**
+            * @private
+            *
+            * @var object
+            */
+           var _formEditorApp = null;
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getFormEditorApp() {
+               return _formEditorApp;
+           };
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getPublisherSubscriber() {
+               return getFormEditorApp().getPublisherSubscriber();
+           };
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getUtility() {
+               return getFormEditorApp().getUtility();
+           };
+
+           /**
+            * @private
+            *
+            * @param object
+            * @return object
+            */
+           function getHelper() {
+               return Helper;
+           };
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getCurrentlySelectedFormElement() {
+               return getFormEditorApp().getCurrentlySelectedFormElement();
+           };
+
+           /**
+            * @private
+            *
+            * @param mixed test
+            * @param string message
+            * @param int messageCode
+            * @return void
+            */
+           function assert(test, message, messageCode) {
+               return getFormEditorApp().assert(test, message, messageCode);
+           };
+
+           /**
+            * @private
+            *
+            * @return void
+            * @throws 1491643380
+            */
+           function _helperSetup() {
+               assert('function' === $.type(Helper.bootstrap),
+                   'The view model helper does not implement the method "bootstrap"',
+                   1491643380
+               );
+               Helper.bootstrap(getFormEditorApp());
+           };
+
+           /**
+            * @private
+            *
+            * @return void
+            */
+           function _subscribeEvents() {
+               /**
+                * @private
+                *
+                * @param string
+                * @param array
+                *              args[0] = editorConfiguration
+                *              args[1] = editorHtml
+                *              args[2] = collectionElementIdentifier
+                *              args[3] = collectionName
+                * @return void
+                */
+               getPublisherSubscriber().subscribe('view/inspector/editor/insert/perform', function(topic, args) {
+                   if (args[0]['templateName'] === 'Inspector-MyCustomInspectorEditor') {
+                       renderMyCustomInspectorEditor(
+                           args[0],
+                           args[1],
+                           args[2],
+                           args[3]
+                       );
+                   }
+               });
+           };
+
+           /**
+            * @private
+            *
+            * @param object editorConfiguration
+            * @param object editorHtml
+            * @param string collectionElementIdentifier
+            * @param string collectionName
+            * @return void
+            */
+           function renderMyCustomInspectorEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
+               // do cool stuff
+           });
+
+           /**
+            * @public
+            *
+            * @param object formEditorApp
+            * @return void
+            */
+           function bootstrap(formEditorApp) {
+               _formEditorApp = formEditorApp;
+               _helperSetup();
+               _subscribeEvents();
+           };
+
+           /**
+            * Publish the public methods.
+            * Implements the "Revealing Module Pattern".
+            */
+           return {
+               bootstrap: bootstrap
+           };
+       })($, Helper);
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-inspector-removecollectionelement-perform:
@@ -4198,23 +4124,22 @@ calls this event, if the checkbox is deselected. EXT:form uses this event to
 remove the configured required validator ('NotEmpty') from the ``form
 definition`` through the method ``getFormEditorApp().getViewModel().removePropertyCollectionElement()``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = collectionElementIdentifier
-     *              args[1] = collectionName
-     *              args[2] = formElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/inspector/removeCollectionElement/perform', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = collectionElementIdentifier
+    *              args[1] = collectionName
+    *              args[2] = formElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/inspector/removeCollectionElement/perform', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-modal-close-perform:
@@ -4227,20 +4152,19 @@ appears, asking whether you really wish to close it. If you confirm it, this
 event is called in the ``check box`` component. EXT:form uses this event to
 close the ``form editor`` and return to the ``form manager``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/modal/close/perform', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/modal/close/perform', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-modal-removecollectionelement-perform:
@@ -4254,23 +4178,22 @@ is called in the ``check box`` component. EXT:form uses this event to remove
 the validator/ finisher from the ``form definition`` through the method
 ``getFormEditorApp().getViewModel().removePropertyCollectionElement()``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = collectionElementIdentifier
-     *              args[1] = collectionName
-     *              args[2] = formElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/modal/removeCollectionElement/perform', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = collectionElementIdentifier
+    *              args[1] = collectionName
+    *              args[2] = formElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/modal/removeCollectionElement/perform', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-modal-removeformelement-perform:
@@ -4283,21 +4206,20 @@ appears, asking you to confirm this action. If confirmed, this event is called
 in the ``check box`` component. EXT:form uses this event to remove the form
 element from the ``form definition`` via the method ``getFormEditorApp().getViewModel().removeFormElement()``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/modal/removeFormElement/perform', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/modal/removeFormElement/perform', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-modal-validationerrors-element-clicked:
@@ -4311,21 +4233,20 @@ form element can be clicked in this dialog box. This event is called by
 clicking a form element in the dialog box. EXT:form uses this event to select
 and show this form element.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElementIdentifierPath
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/modal/validationErrors/element/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElementIdentifierPath
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/modal/validationErrors/element/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-paginationnext-clicked:
@@ -4337,20 +4258,19 @@ This event is called if the 'pagination next' button in the ``Stage``
 component's header section is clicked. EXT:form uses this event to render the
 next page of the form.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/paginationNext/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/paginationNext/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-paginationprevious-clicked:
@@ -4362,20 +4282,19 @@ This event is called, if the 'pagination previous' button in the ``Stage``
 component's header section is clicked. EXT:form uses this event to render the
 previous page of the form.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/paginationPrevious/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/paginationPrevious/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-ready:
@@ -4388,7 +4307,6 @@ If all modules are loaded, the view-model method ``_loadAdditionalModules``
 calls this event. EXT:form uses this event to remove the preloader icon and
 finally initialize the ``form editor``.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
@@ -4415,20 +4333,19 @@ collection elements (validators/ finishers) is saved in an internal stack in
 order to reset the undo/ redo functionality. EXT:form uses this event to reset
 this stack to the previous state.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/redoButton/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/redoButton/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-abstract-button-newelement-clicked:
@@ -4440,22 +4357,21 @@ This event is called if the "Create new element" button at the end of the
 ``Stage`` component in the ``abstract view`` mode is clicked. EXT:form uses
 this event to display the "new element" dialog box.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = targetEvent
-     *              args[1] = configuration
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/abstract/button/newElement/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = targetEvent
+    *              args[1] = configuration
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/abstract/button/newElement/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-abstract-dnd-change:
@@ -4469,23 +4385,22 @@ the ``view/stage/abstract/dnd/change`` event in the ``Stage`` component in the
 ``abstract view`` mode if form elements are sorted. EXT:form uses this event to
 set various CSS classes during the drag-and-drop process.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = placeholderDomElement
-     *              args[1] = parentFormElementIdentifierPath
-     *              args[2] = enclosingCompositeFormElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/abstract/dnd/change', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = placeholderDomElement
+    *              args[1] = parentFormElementIdentifierPath
+    *              args[2] = enclosingCompositeFormElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/abstract/dnd/change', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-abstract-dnd-start:
@@ -4499,22 +4414,21 @@ the ``view/stage/abstract/dnd/start`` event in the ``Stage`` component in the
 ``abstract view`` mode if form elements are sorted. EXT:form uses this event to
 set various CSS classes at the start of the drag-and-drop process.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = draggedFormElementDomElement
-     *              args[1] = draggedFormPlaceholderDomElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/abstract/dnd/start', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = draggedFormElementDomElement
+    *              args[1] = draggedFormPlaceholderDomElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/abstract/dnd/start', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-abstract-dnd-stop:
@@ -4529,21 +4443,20 @@ drop functionality. The 'stop' event from 'jquery.mjs.nestedSortable' calls the
 to re-render the ``Tree``, ``Stage`` and ``Inspector`` components at the end of
 the drag-and-drop process and to select the moved form element.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = draggedFormElementIdentifierPath
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/abstract/dnd/stop', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = draggedFormElementIdentifierPath
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/abstract/dnd/stop', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-abstract-dnd-update:
@@ -4558,24 +4471,23 @@ the ``view/stage/abstract/dnd/update`` event in the ``Stage`` component in the
 to move the form element in the ``form definition`` accordingly at the end of
 the drag-and-drop process.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = movedDomElement
-     *              args[1] = movedFormElementIdentifierPath
-     *              args[2] = previousFormElementIdentifierPath
-     *              args[3] = nextFormElementIdentifierPath
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/abstract/dnd/update', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = movedDomElement
+    *              args[1] = movedFormElementIdentifierPath
+    *              args[2] = previousFormElementIdentifierPath
+    *              args[3] = nextFormElementIdentifierPath
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/abstract/dnd/update', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-abstract-elementtoolbar-button-newelement-clicked:
@@ -4587,22 +4499,21 @@ This event is called if the "Create new element" button in the form-element
 toolbar or "Inside" or "After" in the split button is clicked. EXT:form uses
 this event to display the "New element" dialog box.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = targetEvent
-     *              args[1] = configuration
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/abstract/elementToolbar/button/newElement/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = targetEvent
+    *              args[1] = configuration
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/abstract/elementToolbar/button/newElement/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-abstract-render-postprocess:
@@ -4613,20 +4524,19 @@ view/stage/abstract/render/postProcess
 This event is called after the ``abstract view`` of the ``Stage`` component has
 been rendered. EXT:form uses this event to render the undo/ redo buttons.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/abstract/render/postProcess', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/abstract/render/postProcess', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-abstract-render-preprocess:
@@ -4637,20 +4547,19 @@ view/stage/abstract/render/preProcess
 This event is called before the ``abstract view`` of the ``Stage`` component is
 rendered.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/abstract/render/preProcess', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/abstract/render/preProcess', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-abstract-render-template-perform:
@@ -4685,205 +4594,202 @@ method delivered with EXT:form. An overview over the functionality of the
 formEditorPartials for the ``<formElementTypeIdentifier>`` and its JavaScript
 code is found :ref:`here <apireference-formeditor-stage-commonabstractformelementtemplates>`.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElement
-     *              args[1] = template
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/abstract/render/template/perform', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElement
+    *              args[1] = template
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/abstract/render/template/perform', function(topic, args) {
+   });
 
 
 A simple example reusing the EXT:form inline HTML template ``Stage/SelectTemplate`` and the EXT:form JavaScript code ``renderSelectTemplates()``
 for a custom form element with ``<formElementTypeIdentifier>`` = 'GenderSelect'.
 In this example, 'GenderSelect' is basically a radio button form element with some predefined options.
 
-
 .. code-block:: yaml
    :emphasize-lines: 11
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formEditor:
-                dynamicRequireJsModules:
-                  additionalViewModelModules:
-                    - 'TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel'
-                formEditorPartials:
-                  FormElement-GenderSelect: 'Stage/SelectTemplate'
-              formElementsDefinition:
-                GenderSelect:
-                  __inheritances:
-                    10: 'TYPO3.CMS.Form.prototypes.standard.formElementsDefinition.RadioButton'
-                  renderingOptions:
-                    templateName: 'RadioButton'
-                  properties:
-                    options:
-                      f: 'Female'
-                      m: 'Male'
-                      u: 'Unicorn'
-                      a: 'Alien'
-                  formEditor:
-                    label: 'Gender Select'
-                    group: select
-                    groupSorting: 9000
-                    predefinedDefaults:
-                      properties:
-                        options:
-                          f: 'Female'
-                          m: 'Male'
-                          u: 'Unicorn'
-                          a: 'Alien'
-                    editors:
-                      300: null
-
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formEditor:
+               dynamicRequireJsModules:
+                 additionalViewModelModules:
+                   - 'TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel'
+               formEditorPartials:
+                 FormElement-GenderSelect: 'Stage/SelectTemplate'
+             formElementsDefinition:
+               GenderSelect:
+                 __inheritances:
+                   10: 'TYPO3.CMS.Form.prototypes.standard.formElementsDefinition.RadioButton'
+                 renderingOptions:
+                   templateName: 'RadioButton'
+                 properties:
+                   options:
+                     f: 'Female'
+                     m: 'Male'
+                     u: 'Unicorn'
+                     a: 'Alien'
+                 formEditor:
+                   label: 'Gender Select'
+                   group: select
+                   groupSorting: 9000
+                   predefinedDefaults:
+                     properties:
+                       options:
+                         f: 'Female'
+                         m: 'Male'
+                         u: 'Unicorn'
+                         a: 'Alien'
+                   editors:
+                     300: null
 
 .. code-block:: javascript
    :emphasize-lines: 105-109
 
-    /**
-     * Module: TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel
-     */
-    define(['jquery',
-            'TYPO3/CMS/Form/Backend/FormEditor/Helper'
-            ], function($, Helper) {
-            'use strict';
-
-        return (function($, Helper) {
-
-            /**
-             * @private
-             *
-             * @var object
-             */
-            var _formEditorApp = null;
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getFormEditorApp() {
-                return _formEditorApp;
-            };
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getPublisherSubscriber() {
-                return getFormEditorApp().getPublisherSubscriber();
-            };
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getUtility() {
-                return getFormEditorApp().getUtility();
-            };
-
-            /**
-             * @private
-             *
-             * @param object
-             * @return object
-             */
-            function getHelper() {
-                return Helper;
-            };
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getCurrentlySelectedFormElement() {
-                return getFormEditorApp().getCurrentlySelectedFormElement();
-            };
-
-            /**
-             * @private
-             *
-             * @param mixed test
-             * @param string message
-             * @param int messageCode
-             * @return void
-             */
-            function assert(test, message, messageCode) {
-                return getFormEditorApp().assert(test, message, messageCode);
-            };
-
-            /**
-             * @private
-             *
-             * @return void
-             * @throws 1491643380
-             */
-            function _helperSetup() {
-                assert('function' === $.type(Helper.bootstrap),
-                    'The view model helper does not implement the method "bootstrap"',
-                    1491643380
-                );
-                Helper.bootstrap(getFormEditorApp());
-            };
-
-            /**
-             * @private
-             *
-             * @return void
-             */
-            function _subscribeEvents() {
-                /**
-                 * @private
-                 *
-                 * @param string
-                 * @param array
-                 *              args[0] = formElement
-                 *              args[1] = template
-                 * @return void
-                 */
-                getPublisherSubscriber().subscribe('view/stage/abstract/render/template/perform', function(topic, args) {
-                    if (args[0].get('type') === 'GenderSelect') {
-                        getFormEditorApp().getViewModel().getStage().renderSelectTemplates(args[0], args[1]);
-                    }
-                });
-            };
-
-            /**
-             * @public
-             *
-             * @param object formEditorApp
-             * @return void
-             */
-            function bootstrap(formEditorApp) {
-                _formEditorApp = formEditorApp;
-                _helperSetup();
-                _subscribeEvents();
-            };
-
-            /**
-             * Publish the public methods.
-             * Implements the "Revealing Module Pattern".
-             */
-            return {
-                bootstrap: bootstrap
-            };
-        })($, Helper);
-    });
+   /**
+    * Module: TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel
+    */
+   define(['jquery',
+           'TYPO3/CMS/Form/Backend/FormEditor/Helper'
+           ], function($, Helper) {
+           'use strict';
+
+       return (function($, Helper) {
+
+           /**
+            * @private
+            *
+            * @var object
+            */
+           var _formEditorApp = null;
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getFormEditorApp() {
+               return _formEditorApp;
+           };
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getPublisherSubscriber() {
+               return getFormEditorApp().getPublisherSubscriber();
+           };
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getUtility() {
+               return getFormEditorApp().getUtility();
+           };
+
+           /**
+            * @private
+            *
+            * @param object
+            * @return object
+            */
+           function getHelper() {
+               return Helper;
+           };
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getCurrentlySelectedFormElement() {
+               return getFormEditorApp().getCurrentlySelectedFormElement();
+           };
+
+           /**
+            * @private
+            *
+            * @param mixed test
+            * @param string message
+            * @param int messageCode
+            * @return void
+            */
+           function assert(test, message, messageCode) {
+               return getFormEditorApp().assert(test, message, messageCode);
+           };
+
+           /**
+            * @private
+            *
+            * @return void
+            * @throws 1491643380
+            */
+           function _helperSetup() {
+               assert('function' === $.type(Helper.bootstrap),
+                   'The view model helper does not implement the method "bootstrap"',
+                   1491643380
+               );
+               Helper.bootstrap(getFormEditorApp());
+           };
+
+           /**
+            * @private
+            *
+            * @return void
+            */
+           function _subscribeEvents() {
+               /**
+                * @private
+                *
+                * @param string
+                * @param array
+                *              args[0] = formElement
+                *              args[1] = template
+                * @return void
+                */
+               getPublisherSubscriber().subscribe('view/stage/abstract/render/template/perform', function(topic, args) {
+                   if (args[0].get('type') === 'GenderSelect') {
+                       getFormEditorApp().getViewModel().getStage().renderSelectTemplates(args[0], args[1]);
+                   }
+               });
+           };
+
+           /**
+            * @public
+            *
+            * @param object formEditorApp
+            * @return void
+            */
+           function bootstrap(formEditorApp) {
+               _formEditorApp = formEditorApp;
+               _helperSetup();
+               _subscribeEvents();
+           };
+
+           /**
+            * Publish the public methods.
+            * Implements the "Revealing Module Pattern".
+            */
+           return {
+               bootstrap: bootstrap
+           };
+       })($, Helper);
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-element-clicked:
@@ -4896,21 +4802,20 @@ clicked. EXT:form uses this event to select this element and to display the
 form-element toolbar. In addition, the ``Tree`` and ``Inspector`` components
 are re-rendered.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElementIdentifierPath
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/element/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElementIdentifierPath
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/element/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-panel-clicked:
@@ -4921,20 +4826,19 @@ view/stage/panel/clicked
 This event is called if the header section of the ``Stage`` component is
 clicked.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/panel/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/panel/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-stage-preview-render-postprocess:
@@ -4945,20 +4849,19 @@ view/stage/preview/render/postProcess
 This event is called after the ``preview view`` of the ``Stage`` component has
 been rendered. EXT:form uses this event to render the undo/ redo buttons.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/stage/preview/render/postProcess', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/stage/preview/render/postProcess', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-structure-button-newpage-clicked:
@@ -4974,16 +4877,16 @@ Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = targetEvent
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/structure/button/newPage/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = targetEvent
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/structure/button/newPage/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-structure-renew-postprocess:
@@ -4995,20 +4898,19 @@ This event is called from the view-model after the ``Tree`` component has been
 re-rendered. EXT:form uses this event to display potential validation errors
 from form elements in the ``Tree`` component.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/structure/renew/postProcess', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/structure/renew/postProcess', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-structure-root-selected:
@@ -5020,20 +4922,19 @@ This event is called if the root form element in the ``Tree`` component is
 clicked. EXT:form uses this event to re-render the ``Stage``, ``Inspector`` and
 ``Tree`` components.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/structure/root/selected', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/structure/root/selected', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-tree-dnd-change:
@@ -5047,23 +4948,22 @@ the ``view/tree/dnd/change`` event in der ``Tree`` component if form elements
 are sorted. EXT:form uses this event to set various CSS classes during the drag
 -and-drop process.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = placeholderDomElement
-     *              args[1] = parentFormElementIdentifierPath
-     *              args[2] = enclosingCompositeFormElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/tree/dnd/change', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = placeholderDomElement
+    *              args[1] = parentFormElementIdentifierPath
+    *              args[2] = enclosingCompositeFormElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/tree/dnd/change', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-tree-dnd-stop:
@@ -5078,21 +4978,20 @@ sorted. EXT:form uses this event to re-render ``Tree``, ``Stage`` and
 ``Inspector`` components at the end of the drag-and-drop process and to select
 the moved form element.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = draggedFormElementIdentifierPath
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/tree/dnd/stop', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = draggedFormElementIdentifierPath
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/tree/dnd/stop', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-tree-dnd-update:
@@ -5106,24 +5005,23 @@ the ``view/tree/dnd/update`` event in der ``Tree`` component if form elements
 are sorted. EXT:form uses this event to move the form element in the ``form
 definition`` accordingly at the end of the drag-and-drop process.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = movedDomElement
-     *              args[1] = movedFormElementIdentifierPath
-     *              args[2] = previousFormElementIdentifierPath
-     *              args[3] = nextFormElementIdentifierPath
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/tree/dnd/update', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = movedDomElement
+    *              args[1] = movedFormElementIdentifierPath
+    *              args[2] = previousFormElementIdentifierPath
+    *              args[3] = nextFormElementIdentifierPath
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/tree/dnd/update', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-tree-node-clicked:
@@ -5135,21 +5033,20 @@ This event is called from the ``Tree`` component if a form element is clicked.
 EXT:form uses this event to re-render the ``Stage`` and ``Inspector``
 components and select the form element.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = formElementIdentifierPath
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/tree/node/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = formElementIdentifierPath
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/tree/node/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-tree-render-listitemadded:
@@ -5160,22 +5057,21 @@ view/tree/render/listItemAdded
 This event is called by the ``Tree`` component for each form element as soon as
 it is added to the tree.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     *              args[0] = listItem
-     *              args[1] = formElement
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/tree/render/listItemAdded', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    *              args[0] = listItem
+    *              args[1] = formElement
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/tree/render/listItemAdded', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-undobutton-clicked:
@@ -5189,20 +5085,19 @@ collection elements (validators/ finishers) is stored in an internal stack to
 implement the undo / redo functionality. EXT:form uses this event to set this
 stack to the next state.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/undoButton/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/undoButton/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-viewmodebutton-abstract-clicked:
@@ -5214,20 +5109,19 @@ This event is called when the abstract view button is clicked in the header
 area of the ``Stage`` component. EXT:form uses this event to render the
 ``abstract view`` in the ``Stage`` component.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/viewModeButton/abstract/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/viewModeButton/abstract/clicked', function(topic, args) {
+   });
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-events-view-viewmodebutton-preview-clicked:
@@ -5239,20 +5133,19 @@ This event is called when the preview button is clicked in the header area of
 the ``Stage`` component. EXT:form uses this event to render the ``preview
 view`` in the ``Stage`` component.
 
-
 Subscribe to the event:
 
 .. code-block:: javascript
 
-    /**
-     * @private
-     *
-     * @param string
-     * @param array
-     * @return void
-     */
-    getPublisherSubscriber().subscribe('view/viewModeButton/preview/clicked', function(topic, args) {
-    });
+   /**
+    * @private
+    *
+    * @param string
+    * @param array
+    * @return void
+    */
+   getPublisherSubscriber().subscribe('view/viewModeButton/preview/clicked', function(topic, args) {
+   });
 
 
 
@@ -5295,32 +5188,32 @@ Example of a ``FormElement model``:
 
 .. code-block:: javascript
 
-    {
-      "identifier": "name",
-      "defaultValue": "",
-      "label": "Name",
-      "type": "Text",
-      "properties": {
-        "fluidAdditionalAttributes": {
-          "placeholder": "Name"
-        }
-      },
-      "__parentRenderable": "example-form/page-1 (filtered)",
-      "__identifierPath": "example-form/page-1/name",
-      "validators": [
-        {
-          "identifier": "NotEmpty"
-        }
-      ]
-    }
+   {
+     "identifier": "name",
+     "defaultValue": "",
+     "label": "Name",
+     "type": "Text",
+     "properties": {
+       "fluidAdditionalAttributes": {
+         "placeholder": "Name"
+       }
+     },
+     "__parentRenderable": "example-form/page-1 (filtered)",
+     "__identifierPath": "example-form/page-1/name",
+     "validators": [
+       {
+         "identifier": "NotEmpty"
+       }
+     ]
+   }
 
 
 Access to ``properties.fluidAdditionalAttributes.placeholder``:
 
 .. code-block:: javascript
 
-    // value = 'Name'
-    var value = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').get('properties.fluidAdditionalAttributes.placeholder');
+   // value = 'Name'
+   var value = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').get('properties.fluidAdditionalAttributes.placeholder');
 
 
 Two exceptions are the two arrays of "finishers" / "validators" (``property
@@ -5338,42 +5231,41 @@ their positions in the array are potentially unknown, the ``getFormEditorApp().b
 method exists. This can be used to access a property of a property collection
 item via its ``identifier``.
 
-
 Example of a ``FormElement model``:
 
 .. code-block:: javascript
 
-    {
-      "identifier": "name",
-      "defaultValue": "",
-      "label": "Name",
-      "type": "Text",
-      "properties": {
-        "fluidAdditionalAttributes": {
-          "placeholder": "Name"
-        }
-      },
-      "__parentRenderable": "example-form/page-1 (filtered)",
-      "__identifierPath": "example-form/page-1/name",
-      "validators": [
-        {
-          "identifier": "StringLength"
-          "options": {
-            "minimum": "1",
-            "maximum": "2"
-          }
-        }
-      ]
-    }
+   {
+     "identifier": "name",
+     "defaultValue": "",
+     "label": "Name",
+     "type": "Text",
+     "properties": {
+       "fluidAdditionalAttributes": {
+         "placeholder": "Name"
+       }
+     },
+     "__parentRenderable": "example-form/page-1 (filtered)",
+     "__identifierPath": "example-form/page-1/name",
+     "validators": [
+       {
+         "identifier": "StringLength"
+         "options": {
+           "minimum": "1",
+           "maximum": "2"
+         }
+       }
+     ]
+   }
 
 Access to ``options.minimum`` of the validator ``StringLength``:
 
 .. code-block:: javascript
 
-    var formElement = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name');
-    var propertyPath = getFormEditorApp().buildPropertyPath('options.minimum', 'StringLength', 'validators', formElement);
-    // value = 1
-    var value = formElement.get(propertyPath);
+   var formElement = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name');
+   var propertyPath = getFormEditorApp().buildPropertyPath('options.minimum', 'StringLength', 'validators', formElement);
+   // value = 1
+   var value = formElement.get(propertyPath);
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-formelementmodel-method-get-renderables:
@@ -5401,55 +5293,55 @@ Example of a ``FormElement model``:
 
 .. code-block:: javascript
 
-    {
-      "identifier": "name",
-      "defaultValue": "",
-      "label": "Name",
-      "type": "Text",
-      "properties": {
-        "fluidAdditionalAttributes": {
-          "placeholder": "Name"
-        }
-      },
-      "__parentRenderable": "example-form/page-1 (filtered)",
-      "__identifierPath": "example-form/page-1/name",
-      "validators": [
-        {
-          "identifier": "NotEmpty"
-        }
-      ]
-    }
+   {
+     "identifier": "name",
+     "defaultValue": "",
+     "label": "Name",
+     "type": "Text",
+     "properties": {
+       "fluidAdditionalAttributes": {
+         "placeholder": "Name"
+       }
+     },
+     "__parentRenderable": "example-form/page-1 (filtered)",
+     "__identifierPath": "example-form/page-1/name",
+     "validators": [
+       {
+         "identifier": "NotEmpty"
+       }
+     ]
+   }
 
 
 Set the property ``properties.fluidAdditionalAttributes.placeholder``:
 
 .. code-block:: javascript
 
-    getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').set('properties.fluidAdditionalAttributes.placeholder', 'New Placeholder');
+   getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').set('properties.fluidAdditionalAttributes.placeholder', 'New Placeholder');
 
 
 Example of the ``FormElement model`` after the ``set()`` operation:
 
 .. code-block:: javascript
 
-    {
-      "identifier": "name",
-      "defaultValue": "",
-      "label": "Name",
-      "type": "Text",
-      "properties": {
-        "fluidAdditionalAttributes": {
-          "placeholder": "New Placeholder"
-        }
-      },
-      "__parentRenderable": "example-form/page-1 (filtered)",
-      "__identifierPath": "example-form/page-1/name",
-      "validators": [
-        {
-          "identifier": "NotEmpty"
-        }
-      ]
-    }
+   {
+     "identifier": "name",
+     "defaultValue": "",
+     "label": "Name",
+     "type": "Text",
+     "properties": {
+       "fluidAdditionalAttributes": {
+         "placeholder": "New Placeholder"
+       }
+     },
+     "__parentRenderable": "example-form/page-1 (filtered)",
+     "__identifierPath": "example-form/page-1/name",
+     "validators": [
+       {
+         "identifier": "NotEmpty"
+       }
+     ]
+   }
 
 
 Two exceptions are the two arrays of "finishers" / "validators" (``property
@@ -5467,9 +5359,9 @@ Set the property ``options.minimum`` of the validator ``StringLength``:
 
 .. code-block:: javascript
 
-    var formElement = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name');
-    var propertyPath = getFormEditorApp().buildPropertyPath('options.minimum', 'StringLength', 'validators', formElement);
-    formElement.set(propertyPath, '2');
+   var formElement = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name');
+   var propertyPath = getFormEditorApp().buildPropertyPath('options.minimum', 'StringLength', 'validators', formElement);
+   formElement.set(propertyPath, '2');
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-formelementmodel-method-set-renderables:
@@ -5498,54 +5390,54 @@ Example of a ``FormElement model``:
 
 .. code-block:: javascript
 
-    {
-      "identifier": "name",
-      "defaultValue": "",
-      "label": "Name",
-      "type": "Text",
-      "properties": {
-        "fluidAdditionalAttributes": {
-          "placeholder": "Name"
-        }
-      },
-      "__parentRenderable": "example-form/page-1 (filtered)",
-      "__identifierPath": "example-form/page-1/name",
-      "validators": [
-        {
-          "identifier": "NotEmpty"
-        }
-      ]
-    }
+   {
+     "identifier": "name",
+     "defaultValue": "",
+     "label": "Name",
+     "type": "Text",
+     "properties": {
+       "fluidAdditionalAttributes": {
+         "placeholder": "Name"
+       }
+     },
+     "__parentRenderable": "example-form/page-1 (filtered)",
+     "__identifierPath": "example-form/page-1/name",
+     "validators": [
+       {
+         "identifier": "NotEmpty"
+       }
+     ]
+   }
 
 
 Delete the property ``properties.fluidAdditionalAttributes.placeholder``:
 
 .. code-block:: javascript
 
-    // value = 'Name'
-    var value = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').unset('properties.fluidAdditionalAttributes.placeholder');
+   // value = 'Name'
+   var value = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').unset('properties.fluidAdditionalAttributes.placeholder');
 
 
 Example of the ``FormElement model`` after the ``unset()`` operation:
 
 .. code-block:: javascript
 
-    {
-      "identifier": "name",
-      "defaultValue": "",
-      "label": "Name",
-      "type": "Text",
-      "properties": {
-        "fluidAdditionalAttributes": {}
-      },
-      "__parentRenderable": "example-form/page-1 (filtered)",
-      "__identifierPath": "example-form/page-1/name",
-      "validators": [
-        {
-          "identifier": "NotEmpty"
-        }
-      ]
-    }
+   {
+     "identifier": "name",
+     "defaultValue": "",
+     "label": "Name",
+     "type": "Text",
+     "properties": {
+       "fluidAdditionalAttributes": {}
+     },
+     "__parentRenderable": "example-form/page-1 (filtered)",
+     "__identifierPath": "example-form/page-1/name",
+     "validators": [
+       {
+         "identifier": "NotEmpty"
+       }
+     ]
+   }
 
 
 Two exceptions are the two arrays of "finishers" / "validators" (``property
@@ -5563,9 +5455,9 @@ Delete the property ``options.minimum`` of the validator ``StringLength``:
 
 .. code-block:: javascript
 
-    var formElement = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name');
-    var propertyPath = getFormEditorApp().buildPropertyPath('options.minimum', 'StringLength', 'validators', formElement);
-    formElement.unset(propertyPath);
+   var formElement = getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name');
+   var propertyPath = getFormEditorApp().buildPropertyPath('options.minimum', 'StringLength', 'validators', formElement);
+   formElement.unset(propertyPath);
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-formelementmodel-method-unset-renderables:
@@ -5592,9 +5484,9 @@ Example:
 
 .. code-block:: javascript
 
-    getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').on('properties.fluidAdditionalAttributes.placeholder', 'my/custom/event');
-    getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').set('properties.fluidAdditionalAttributes.placeholder', 'New Placeholder');
-    // now, the event 'my/custom/event' will be published
+   getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').on('properties.fluidAdditionalAttributes.placeholder', 'my/custom/event');
+   getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').set('properties.fluidAdditionalAttributes.placeholder', 'New Placeholder');
+   // now, the event 'my/custom/event' will be published
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-formelementmodel-method-off:
@@ -5609,7 +5501,7 @@ Example:
 
 .. code-block:: javascript
 
-    getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').off('properties.fluidAdditionalAttributes.placeholder', 'my/custom/event');
+   getFormEditorApp().getFormElementByIdentifierPath('example-form/page-1/name').off('properties.fluidAdditionalAttributes.placeholder', 'my/custom/event');
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-formelementmodel-method-getobjectdata:
@@ -5636,7 +5528,7 @@ supplied by ``getObjectData()`` in string form.
 
 .. code-block:: javascript
 
-    console.log(formElement.toString());
+   console.log(formElement.toString());
 
 
 .. _apireference-formeditor-basicjavascriptconcepts-formelementmodel-method-clone:
@@ -5650,4 +5542,4 @@ original ``FormElement model``.
 
 .. code-block:: javascript
 
-    var dolly = formElement.clone();
+   var dolly = formElement.clone();
index 9ac1de1..3c1a684 100644 (file)
@@ -3,8 +3,6 @@ getParentRenderable()
 
 Return the parent form element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getParentRenderable();
+   public function getParentRenderable();
index 398a605..08afdac 100644 (file)
@@ -3,8 +3,6 @@ getTemplateName()
 
 Get the template name of the form element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getTemplateName(): string;
+   public function getTemplateName(): string;
index 95abe87..d26b266 100644 (file)
@@ -4,8 +4,6 @@ setParentRenderable()
 Set the new parent renderable. You should not call this directly.
 It is automatically called by addRenderable.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function setParentRenderable(CompositeRenderableInterface $renderable);
+   public function setParentRenderable(CompositeRenderableInterface $renderable);
index 58da909..d00899c 100644 (file)
@@ -3,8 +3,6 @@ getIdentifier()
 
 Returns the identifier of the form element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getIdentifier(): string;
+   public function getIdentifier(): string;
index 7d2bf74..519ee78 100644 (file)
@@ -3,8 +3,6 @@ getLabel()
 
 Get the label of the form element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getLabel(): string;
+   public function getLabel(): string;
index 9c0a969..e7206ef 100644 (file)
@@ -3,8 +3,6 @@ getRendererClassName()
 
 Get the renderer class name.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getRendererClassName(): string;
+   public function getRendererClassName(): string;
index 0f1e748..385594c 100644 (file)
@@ -3,8 +3,6 @@ getRenderingOptions()
 
 Get all rendering options of the form element.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getRenderingOptions(): array;
+   public function getRenderingOptions(): array;
index 6e540af..0f0941c 100644 (file)
@@ -4,8 +4,6 @@ getType()
 Abstract "type" of the form element.
 For example, the type is used during the rendering process to determine the template file.
 
-Signature:
+Signature::
 
-.. code-block:: php
-
-    public function getType(): string;
+   public function getType(): string;
index e3d2ca3..422d039 100644 (file)
@@ -58,6 +58,7 @@ regarding the integration of your YAML configuration for the backend
 module.
 
 .. hint::
+
    We recommend using a `site package <https://de.slideshare.net/benjaminkott/typo3-the-anatomy-of-sitepackages>`_.
    This will make your life easier if you want to customise EXT:form
    heavily in order to suit the customer's needs.
@@ -73,27 +74,27 @@ frontend.
 
 .. code-block:: typoscript
 
-    plugin.tx_form {
-        settings {
-            yamlConfigurations {
-                10 = EXT:form/Configuration/Yaml/BaseSetup.yaml
-                20 = EXT:form/Configuration/Yaml/FormEngineSetup.yaml
-            }
-        }
-    }
+   plugin.tx_form {
+       settings {
+           yamlConfigurations {
+               10 = EXT:form/Configuration/Yaml/BaseSetup.yaml
+               20 = EXT:form/Configuration/Yaml/FormEngineSetup.yaml
+           }
+       }
+   }
 
 Since the keys 10 and 20 are already taken, we recommend registering your
 own configuration beginning with the key ``100``.
 
 .. code-block:: typoscript
 
-    plugin.tx_form {
-        settings {
-            yamlConfigurations {
-                100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
-            }
-        }
-    }
+   plugin.tx_form {
+       settings {
+           yamlConfigurations {
+               100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
+           }
+       }
+   }
 
 .. _concepts-configuration-yamlregistration-backend:
 
@@ -105,30 +106,31 @@ the backend.
 
 .. code-block:: typoscript
 
-    module.tx_form {
-        settings {
-            yamlConfigurations {
-                10 = EXT:form/Configuration/Yaml/BaseSetup.yaml
-                20 = EXT:form/Configuration/Yaml/FormEditorSetup.yaml
-                30 = EXT:form/Configuration/Yaml/FormEngineSetup.yaml
-            }
-        }
-    }
+   module.tx_form {
+       settings {
+           yamlConfigurations {
+               10 = EXT:form/Configuration/Yaml/BaseSetup.yaml
+               20 = EXT:form/Configuration/Yaml/FormEditorSetup.yaml
+               30 = EXT:form/Configuration/Yaml/FormEngineSetup.yaml
+           }
+       }
+   }
 
 Since the keys 10, 20, and 30 are already taken, we recommend registering
 your own configuration beginning with the key ``100``.
 
 .. code-block:: typoscript
 
-    module.tx_form {
-        settings {
-            yamlConfigurations {
-                100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
-            }
-        }
-    }
+   module.tx_form {
+       settings {
+           yamlConfigurations {
+               100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
+           }
+       }
+   }
 
 .. important::
+
    Consider the following methods to register TypoScript for the backend.
 
 The backend module of EXT:form is based on Extbase. Such backend modules
@@ -165,13 +167,13 @@ YAML registration for the backend via ext_typoscript_setup.txt
 
 .. code-block:: typoscript
 
-    module.tx_form {
-        settings {
-            yamlConfigurations {
-                100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
-            }
-        }
-    }
+   module.tx_form {
+       settings {
+           yamlConfigurations {
+               100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
+           }
+       }
+   }
 
 
 .. _concepts-configuration-yamlregistration-backend-addtyposcriptsetup:
@@ -180,28 +182,26 @@ YAML registration for the backend via addTypoScriptSetup()
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
 Add the following PHP code to your :file:`ext_localconf.php` of your site
-package:
-
-.. code-block:: php
-
-    <?php
-    defined('TYPO3_MODE') or die();
-
-    call_user_func(function () {
-        if (TYPO3_MODE === 'BE') {
-            \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScriptSetup(
-                trim('
-                    module.tx_form {
-                        settings {
-                            yamlConfigurations {
-                                100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
-                            }
-                        }
-                    }
-                ')
-            );
-        }
-    });
+package::
+
+   <?php
+   defined('TYPO3_MODE') or die();
+
+   call_user_func(function () {
+       if (TYPO3_MODE === 'BE') {
+           \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScriptSetup(
+               trim('
+                   module.tx_form {
+                       settings {
+                           yamlConfigurations {
+                               100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
+                           }
+                       }
+                   }
+               ')
+           );
+       }
+   });
 
 
 .. _concepts-configuration-configurationaspects:
@@ -254,19 +254,21 @@ TypoScript:
 
 .. code-block:: typoscript
 
-    plugin.tx_form {
-        settings {
-            yamlSettingsOverrides {
-                ...
-            }
-        }
-    }
+   plugin.tx_form {
+       settings {
+           yamlSettingsOverrides {
+               ...
+           }
+       }
+   }
 
 .. note::
+
    Your TypoScript overrides are not interpreted by the ``form editor``,
    i.e. those settings are ignored.
 
 .. note::
+
    The described process is quite handy for you. As soon as you are working
    with your :ref:`own configuration files <concepts-configuration-yamlregistration>`,
    you only have to define the differences compared to the previously
@@ -277,34 +279,34 @@ register an additional configuration file via
 
 .. code-block:: typoscript
 
-    plugin.tx_form {
-        settings {
-            yamlConfigurations {
-                # register your own additional configuration
-                # choose a number higher than 30 (below is reserved)
-                100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
-            }
-        }
-    }
+   plugin.tx_form {
+       settings {
+           yamlConfigurations {
+               # register your own additional configuration
+               # choose a number higher than 30 (below is reserved)
+               100 = EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml
+           }
+       }
+   }
 
 ... you only have to define the following YAML setup in ``EXT:my_site_package/Configuration/Yaml/CustomFormSetup.yaml``:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                Form:
-                  renderingOptions:
-                    templateRootPaths:
-                      20: 'EXT:my_site_package/Resources/Private/Frontend/Templates/'
-                    partialRootPaths:
-                      20: 'EXT:my_site_package/Resources/Private/Frontend/Partials/'
-                    layoutRootPaths:
-                      20: 'EXT:my_site_package/Resources/Private/Frontend/Layouts/'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               Form:
+                 renderingOptions:
+                   templateRootPaths:
+                     20: 'EXT:my_site_package/Resources/Private/Frontend/Templates/'
+                   partialRootPaths:
+                     20: 'EXT:my_site_package/Resources/Private/Frontend/Partials/'
+                   layoutRootPaths:
+                     20: 'EXT:my_site_package/Resources/Private/Frontend/Layouts/'
 
 The values of your own configuration file will overrule the corresponding
 values of the basic configuration file (:file:`EXT:form/Configuration/Yaml/BaseSetup.yaml`).
@@ -325,50 +327,50 @@ operator.
 
 .. code-block:: yaml
 
-    Form:
-      part01:
-        key01: value
-        key02:
-          key03: value
-      part02:
-        __inheritances:
-          10: Form.part01
+   Form:
+     part01:
+       key01: value
+       key02:
+         key03: value
+     part02:
+       __inheritances:
+         10: Form.part01
 
 The configuration above results in:
 
 .. code-block:: yaml
 
-    Form:
-      part01:
-        key01: value
-        key02:
-          key03: value
-      part02:
-        key01: value
-        key02:
-          key03: value
+   Form:
+     part01:
+       key01: value
+       key02:
+         key03: value
+     part02:
+       key01: value
+       key02:
+         key03: value
 
 As you can see, ``part02`` inherited all of ``part01``'s properties.
 
 .. code-block:: yaml
 
-    Form:
-      part01:
-        key: value
-      part02:
-        __inheritances:
-          10: Form.part01
-        key: 'value override'
+   Form:
+     part01:
+       key: value
+     part02:
+       __inheritances:
+         10: Form.part01
+       key: 'value override'
 
 The configuration above results in:
 
 .. code-block:: yaml
 
-    Form:
-      part01:
-        key: value
-      part02:
-        key: 'value override'
+   Form:
+     part01:
+       key: value
+     part02:
+       key: 'value override'
 
 EXT:form heavily uses the ``__inheritances`` operator, in particular, for
 the definition of form elements. The following example shows you how to use
@@ -377,23 +379,23 @@ element but also has its own properties.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                GenderSelect:
-                  __inheritances:
-                    10: 'TYPO3.CMS.Form.prototypes.standard.formElementsDefinition.RadioButton'
-                  renderingOptions:
-                    templateName: 'RadioButton'
-                  properties:
-                    options:
-                      f: 'Female'
-                      m: 'Male'
-                      u: 'Unicorn'
-                      a: 'Alien'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               GenderSelect:
+                 __inheritances:
+                   10: 'TYPO3.CMS.Form.prototypes.standard.formElementsDefinition.RadioButton'
+                 renderingOptions:
+                   templateName: 'RadioButton'
+                 properties:
+                   options:
+                     f: 'Female'
+                     m: 'Male'
+                     u: 'Unicorn'
+                     a: 'Alien'
 
 The YAML configuration defines a new form element called ``GenderSelect``.
 This element inherits its definition from the ``RadioButton`` element but
@@ -401,17 +403,16 @@ additionally ships four predefined options. Without any problems, the new
 element can be used and overridden within the ``form definition``.
 
 .. hint::
+
    Currently, there is no built-in solution within the TYPO3 core to
    preview the resulting/ final EXT:form YAML configuration. If you want
    to check the configuration, there is a fishy way which you should never
    implement on a production system.
 
    Open the file ``typo3/sysext/form/Classes/Mvc/Configuration/ConfigurationManager.php::getConfigurationFromYamlFile()``
-   and add the following code before the ``return`` statement.
-
-   .. code-block:: php
+   and add the following code before the ``return`` statement::
 
-        \TYPO3\CMS\Extbase\Utility\DebuggerUtility::var_dump($yamlSettings, 'form configuration', 9999);
+      \TYPO3\CMS\Extbase\Utility\DebuggerUtility::var_dump($yamlSettings, 'form configuration', 9999);
 
    Now open the ``Forms`` module in the backend or navigate to a page in
    the frontend which contains a form. The DebuggerUtility will print the
@@ -474,4 +475,4 @@ prototypes. Imagine that there are two defined prototypes: "noob" and
 
  - :a: **Finisher overrides within the ``form plugin``**
    :b: It is not possible to override the finisher configuration.
-   :c: No changes. Default behaviour.
\ No newline at end of file
+   :c: No changes. Default behaviour.
index d9c689e..eaf12ae 100644 (file)
@@ -77,4 +77,4 @@ SaveToDatabase finisher
 -----------------------
 
 The 'SaveToDatabase finisher' saves the data of a submitted form into a
-database table.
\ No newline at end of file
+database table.
index 6e44f0b..5ca2237 100644 (file)
@@ -35,76 +35,76 @@ Example form definition
 
 .. code-block:: yaml
 
-    identifier: ext-form-simple-contact-form-example
-    label: 'Simple Contact Form'
-    prototype: standard
-    type: Form
-
-    finishers:
-      -
-        identifier: EmailToReceiver
-        options:
-          subject: 'Your message'
-          recipientAddress: 'your.company@example.com'
-          recipientName: 'Your company name'
-          senderAddress: '{email}'
-          senderName: '{name}'
-
-    renderables:
-      -
-        identifier: page-1
-        label: 'Contact Form'
-        type: Page
-
-        renderables:
-          -
-            identifier: name
-            label: 'Name'
-            type: Text
-            properties:
-              fluidAdditionalAttributes:
-                placeholder: 'Name'
-            defaultValue: ''
-            validators:
-              -
-                identifier: NotEmpty
-          -
-            identifier: subject
-            label: 'Subject'
-            type: Text
-            properties:
-              fluidAdditionalAttributes:
-                placeholder: 'Subject'
-            defaultValue: ''
-            validators:
-              -
-                identifier: NotEmpty
-          -
-            identifier: email
-            label: 'Email'
-            type: Text
-            properties:
-              fluidAdditionalAttributes:
-                placeholder: 'Email address'
-            defaultValue: ''
-            validators:
-              -
-                identifier: NotEmpty
-              -
-                identifier: EmailAddress
-          -
-            identifier: message
-            label: 'Message'
-            type: Textarea
-            properties:
-              fluidAdditionalAttributes:
-                placeholder: ''
-            defaultValue: ''
-            validators:
-              -
-                identifier: NotEmpty
-
-      -
-        identifier: summarypage
-        label: 'Summary page'
-        type: SummaryPage
\ No newline at end of file
+   identifier: ext-form-simple-contact-form-example
+   label: 'Simple Contact Form'
+   prototype: standard
+   type: Form
+
+   finishers:
+     -
+       identifier: EmailToReceiver
+       options:
+         subject: 'Your message'
+         recipientAddress: 'your.company@example.com'
+         recipientName: 'Your company name'
+         senderAddress: '{email}'
+         senderName: '{name}'
+
+   renderables:
+     -
+       identifier: page-1
+       label: 'Contact Form'
+       type: Page
+
+       renderables:
+         -
+           identifier: name
+           label: 'Name'
+           type: Text
+           properties:
+             fluidAdditionalAttributes:
+               placeholder: 'Name'
+           defaultValue: ''
+           validators:
+             -
+               identifier: NotEmpty
+         -
+           identifier: subject
+           label: 'Subject'
+           type: Text
+           properties:
+             fluidAdditionalAttributes:
+               placeholder: 'Subject'
+           defaultValue: ''
+           validators:
+             -
+               identifier: NotEmpty
+         -
+           identifier: email
+           label: 'Email'
+           type: Text
+           properties:
+             fluidAdditionalAttributes:
+               placeholder: 'Email address'
+           defaultValue: ''
+           validators:
+             -
+               identifier: NotEmpty
+             -
+               identifier: EmailAddress
+         -
+           identifier: message
+           label: 'Message'
+           type: Textarea
+           properties:
+             fluidAdditionalAttributes:
+               placeholder: ''
+           defaultValue: ''
+           validators:
+             -
+               identifier: NotEmpty
+
+     -
+       identifier: summarypage
+       label: 'Summary page'
+       type: SummaryPage
index a7c07ae..d263fad 100644 (file)
@@ -50,12 +50,12 @@ the following configuration path:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formEditor:
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formEditor:
 
 Furthermore, you are able to configure the ``form editor`` regarding its
 different aspects. The configuration can be found below the following
@@ -63,20 +63,20 @@ configuration paths:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                <formElementTypeIdentifier>:
-                  formEditor:
-              finishersDefinition:
-                <finisherIdentifier>
-                  formEditor:
-              validatorsDefinition:
-                <validatorIdentifier>
-                  formEditor:
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               <formElementTypeIdentifier>:
+                 formEditor:
+             finishersDefinition:
+               <finisherIdentifier>
+                 formEditor:
+             validatorsDefinition:
+               <validatorIdentifier>
+                 formEditor:
 
 
 .. _concepts-formeditor-stage:
@@ -167,15 +167,15 @@ The following YAML configuration registers an additional JavaScript module.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formEditor:
-                dynamicRequireJsModules:
-                  additionalViewModelModules:
-                    - 'TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formEditor:
+               dynamicRequireJsModules:
+                 additionalViewModelModules:
+                   - 'TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel'
 
 According to the example shown above, the JavaScript files have to be stored
 within the folder ``my_site_package/Resources/Public/JavaScript/Backend/FormEditor/ViewModel.js``.
@@ -193,135 +193,135 @@ for setting up your own module.
 
 .. code-block:: javascript
 
-    /**
-     * Module: TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel
-     */
-    define(['jquery',
-            'TYPO3/CMS/Form/Backend/FormEditor/Helper'
-            ], function($, Helper) {
-            'use strict';
-
-        return (function($, Helper) {
-
-            /**
-             * @private
-             *
-             * @var object
-             */
-            var _formEditorApp = null;
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getFormEditorApp() {
-                return _formEditorApp;
-            };
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getPublisherSubscriber() {
-                return getFormEditorApp().getPublisherSubscriber();
-            };
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getUtility() {
-                return getFormEditorApp().getUtility();
-            };
-
-            /**
-             * @private
-             *
-             * @param object
-             * @return object
-             */
-            function getHelper() {
-                return Helper;
-            };
-
-            /**
-             * @private
-             *
-             * @return object
-             */
-            function getCurrentlySelectedFormElement() {
-                return getFormEditorApp().getCurrentlySelectedFormElement();
-            };
-
-            /**
-             * @private
-             *
-             * @param mixed test
-             * @param string message
-             * @param int messageCode
-             * @return void
-             */
-            function assert(test, message, messageCode) {
-                return getFormEditorApp().assert(test, message, messageCode);
-            };
-
-            /**
-             * @private
-             *
-             * @return void
-             * @throws 1491643380
-             */
-            function _helperSetup() {
-                assert('function' === $.type(Helper.bootstrap),
-                    'The view model helper does not implement the method "bootstrap"',
-                    1491643380
-                );
-                Helper.bootstrap(getFormEditorApp());
-            };
-
-            /**
-             * @private
-             *
-             * @return void
-             */
-            function _subscribeEvents() {
-                getPublisherSubscriber().subscribe('some/eventName/you/want/to/handle', function(topic, args) {
-                    myCustomCode();
-                });
-            };
-
-            /**
-             * @private
-             *
-             * @return void
-             */
-            function myCustomCode() {
-            };
-
-            /**
-             * @public
-             *
-             * @param object formEditorApp
-             * @return void
-             */
-            function bootstrap(formEditorApp) {
-                _formEditorApp = formEditorApp;
-                _helperSetup();
-                _subscribeEvents();
-            };
-
-            /**
-             * Publish the public methods.
-             * Implements the "Revealing Module Pattern".
-             */
-            return {
-                bootstrap: bootstrap
-            };
-        })($, Helper);
-    });
+   /**
+    * Module: TYPO3/CMS/MySitePackage/Backend/FormEditor/ViewModel
+    */
+   define(['jquery',
+           'TYPO3/CMS/Form/Backend/FormEditor/Helper'
+           ], function($, Helper) {
+           'use strict';
+
+       return (function($, Helper) {
+
+           /**
+            * @private
+            *
+            * @var object
+            */
+           var _formEditorApp = null;
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getFormEditorApp() {
+               return _formEditorApp;
+           };
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getPublisherSubscriber() {
+               return getFormEditorApp().getPublisherSubscriber();
+           };
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getUtility() {
+               return getFormEditorApp().getUtility();
+           };
+
+           /**
+            * @private
+            *
+            * @param object
+            * @return object
+            */
+           function getHelper() {
+               return Helper;
+           };
+
+           /**
+            * @private
+            *
+            * @return object
+            */
+           function getCurrentlySelectedFormElement() {
+               return getFormEditorApp().getCurrentlySelectedFormElement();
+           };
+
+           /**
+            * @private
+            *
+            * @param mixed test
+            * @param string message
+            * @param int messageCode
+            * @return void
+            */
+           function assert(test, message, messageCode) {
+               return getFormEditorApp().assert(test, message, messageCode);
+           };
+
+           /**
+            * @private
+            *
+            * @return void
+            * @throws 1491643380
+            */
+           function _helperSetup() {
+               assert('function' === $.type(Helper.bootstrap),
+                   'The view model helper does not implement the method "bootstrap"',
+                   1491643380
+               );
+               Helper.bootstrap(getFormEditorApp());
+           };
+
+           /**
+            * @private
+            *
+            * @return void
+            */
+           function _subscribeEvents() {
+               getPublisherSubscriber().subscribe('some/eventName/you/want/to/handle', function(topic, args) {
+                   myCustomCode();
+               });
+           };
+
+           /**
+            * @private
+            *
+            * @return void
+            */
+           function myCustomCode() {
+           };
+
+           /**
+            * @public
+            *
+            * @param object formEditorApp
+            * @return void
+            */
+           function bootstrap(formEditorApp) {
+               _formEditorApp = formEditorApp;
+               _helperSetup();
+               _subscribeEvents();
+           };
+
+           /**
+            * Publish the public methods.
+            * Implements the "Revealing Module Pattern".
+            */
+           return {
+               bootstrap: bootstrap
+           };
+       })($, Helper);
+   });
 
 
 .. _concepts-formeditor-basicjavascriptconcepts-events:
@@ -352,103 +352,103 @@ you a ``form definition`` and the debug output of the corresponding
 
 .. code-block:: yaml
 
-    identifier: javascript-form-element-model
-    label: 'JavaScript FormElement model'
-    type: Form
-    finishers:
-      -
-        identifier: EmailToReceiver
-        options:
-          subject: 'Your message: {subject}'
-          recipientAddress: your.company@example.com
-          recipientName: 'Your Company name'
-          senderAddress: '{email}'
-          senderName: '{name}'
-          replyToAddress: ''
-          carbonCopyAddress: ''
-          blindCarbonCopyAddress: ''
-          format: html
-          attachUploads: 'true'
-          translation:
-            language: ''
-    renderables:
-      -
-        identifier: page-1
-        label: 'Contact Form'
-        type: Page
-        renderables:
-          -
-            identifier: name
-            label: Name
-            type: Text
-            properties:
-              fluidAdditionalAttributes:
-                placeholder: Name
-            defaultValue: ''
-            validators:
-              -
-                identifier: NotEmpty
+   identifier: javascript-form-element-model
+   label: 'JavaScript FormElement model'
+   type: Form
+   finishers:
+     -
+       identifier: EmailToReceiver
+       options:
+         subject: 'Your message: {subject}'
+         recipientAddress: your.company@example.com
+         recipientName: 'Your Company name'
+         senderAddress: '{email}'
+         senderName: '{name}'
+         replyToAddress: ''
+         carbonCopyAddress: ''
+         blindCarbonCopyAddress: ''
+         format: html
+         attachUploads: 'true'
+         translation:
+           language: ''
+   renderables:
+     -
+       identifier: page-1
+       label: 'Contact Form'
+       type: Page
+       renderables:
+         -
+           identifier: name
+           label: Name
+           type: Text
+           properties:
+             fluidAdditionalAttributes:
+               placeholder: Name
+           defaultValue: ''
+           validators:
+             -
+               identifier: NotEmpty
 
 
 .. code-block:: javascript
 
-    {
-      "identifier": "javascript-form-element-model",
-      "label": "JavaScript FormElement model",
-      "type": "Form",
-      "prototypeName": "standard",
-      "__parentRenderable": null,
-      "__identifierPath": "example-form",
-      "finishers": [
-        {
-          "identifier": "EmailToReceiver",
-          "options": {
-            "subject": "Your message: {subject}",
-            "recipientAddress": "your.company@example.com",
-            "recipientName": "Your Company name",
-            "senderAddress": "{email}",
-            "senderName": "{name}",
-            "replyToAddress": "",
-            "carbonCopyAddress": "",
-            "blindCarbonCopyAddress": "",
-            "format": "html",
-            "attachUploads": true,
-            "translation": {
-              "language": ""
-            }
-          }
-        }
-      ],
-      "renderables": [
-        {
-          "identifier": "page-1",
-          "label": "Contact Form",
-          "type": "Page",
-          "__parentRenderable": "example-form (filtered)",
-          "__identifierPath": "example-form/page-1",
-          "renderables": [
-            {
-              "identifier": "name",
-              "defaultValue": "",
-              "label": "Name",
-              "type": "Text",
-              "properties": {
-                "fluidAdditionalAttributes": {
-                  "placeholder": "Name"
-                }
-              },
-              "__parentRenderable": "example-form/page-1 (filtered)",
-              "__identifierPath": "example-form/page-1/name",
-              "validators": [
-                {
-                  "identifier": "NotEmpty"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
+   {
+     "identifier": "javascript-form-element-model",
+     "label": "JavaScript FormElement model",
+     "type": "Form",
+     "prototypeName": "standard",
+     "__parentRenderable": null,
+     "__identifierPath": "example-form",
+     "finishers": [
+       {
+         "identifier": "EmailToReceiver",
+         "options": {
+           "subject": "Your message: {subject}",
+           "recipientAddress": "your.company@example.com",
+           "recipientName": "Your Company name",
+           "senderAddress": "{email}",
+           "senderName": "{name}",
+           "replyToAddress": "",
+           "carbonCopyAddress": "",
+           "blindCarbonCopyAddress": "",
+           "format": "html",
+           "attachUploads": true,
+           "translation": {
+             "language": ""
+           }
+         }
+       }
+     ],
+     "renderables": [
+       {
+         "identifier": "page-1",
+         "label": "Contact Form",
+         "type": "Page",
+         "__parentRenderable": "example-form (filtered)",
+         "__identifierPath": "example-form/page-1",
+         "renderables": [
+           {
+             "identifier": "name",
+             "defaultValue": "",
+             "label": "Name",
+             "type": "Text",
+             "properties": {
+               "fluidAdditionalAttributes": {
+                 "placeholder": "Name"
+               }
+             },
+             "__parentRenderable": "example-form/page-1 (filtered)",
+             "__identifierPath": "example-form/page-1/name",
+             "validators": [
+               {
+                 "identifier": "NotEmpty"
+               }
+             ]
+           }
+         ]
+       }
+     ]
+   }
 
 For each form element which has child elements, you will find a property
 called ``renderables``. Those ``renderables`` are arrays whose elements
@@ -486,36 +486,36 @@ translated:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formEditor:
-              formElementsDefinition:
-                <formElementTypeIdentifier>:
-                  formEditor:
-              finishersDefinition:
-                <finisherIdentifier>
-                  formEditor:
-              validatorsDefinition:
-                <validatorIdentifier>
-                  formEditor:
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formEditor:
+             formElementsDefinition:
+               <formElementTypeIdentifier>:
+                 formEditor:
+             finishersDefinition:
+               <finisherIdentifier>
+                 formEditor:
+             validatorsDefinition:
+               <validatorIdentifier>
+                 formEditor:
 
 The translation files of the ``form editor`` are loaded as follows:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formEditor:
-                translationFile:
-                  # translation files for the form editor
-                  10: 'EXT:form/Resources/Private/Language/Database.xlf'
-                  20: 'EXT:my_site_package/Resources/Private/Language/Database.xlf'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formEditor:
+               translationFile:
+                 # translation files for the form editor
+                 10: 'EXT:form/Resources/Private/Language/Database.xlf'
+                 20: 'EXT:my_site_package/Resources/Private/Language/Database.xlf'
 
 The process searches for each option value within all of the defined
 translation files. If a translation is found, the translated option value
@@ -525,9 +525,9 @@ Imagine, the following is defined for an option value:
 
 .. code-block:: yaml
 
-    ...
-    label: 'formEditor.elements.Form.editor.finishers.label'
-    ...
+   ...
+   label: 'formEditor.elements.Form.editor.finishers.label'
+   ...
 
 First of all, the process searches for the translation key ``formEditor.elements.Form.editor.finishers.label``
 within the file ``20: 'EXT:my_site_package/Resources/Private/Language/Database.xlf'``
@@ -538,4 +538,4 @@ Due to compatibility issues, the setting ``translationFile`` is not defined
 as an array in the default configuration. To load your own translation files,
 you should define an array containing 'EXT:form/Resources/Private/Language/Database.xlf'
 as first entry (key ``10``) followed by your own file (key ``20``) as
-displayed in the example above.
\ No newline at end of file
+displayed in the example above.
index 427d813..b939160 100644 (file)
@@ -37,6 +37,7 @@ When adding/ editing a file upload element, the backend user can select the
 desired upload storage.
 
 .. note::
+
    In principle, files in filemounts are publicly accessible. If the
    uploaded files could contain sensitive data, you should suppress any
    HTTP access to the filemount. This may, for example, be achieved by
@@ -53,40 +54,40 @@ for form definitions.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          persistenceManager:
-            allowedFileMounts:
-              # default filemount, no need to redeclare it again
-              # just to show you the structure
-              # 10: 1:/user_upload/
-              # additional filemounts
-              100: 1:/custom/forms/
-              110: 2:/cloudstorage/forms/
+   TYPO3:
+     CMS:
+       Form:
+         persistenceManager:
+           allowedFileMounts:
+             # default filemount, no need to redeclare it again
+             # just to show you the structure
+             # 10: 1:/user_upload/
+             # additional filemounts
+             100: 1:/custom/forms/
+             110: 2:/cloudstorage/forms/
 
 The following code block shows you how to allow an extension path as an
 additional filemount for form definitions.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          persistenceManager:
-            allowedExtensionPaths:
-              10: EXT:my_site_package/Resources/Private/Forms/
+   TYPO3:
+     CMS:
+       Form:
+         persistenceManager:
+           allowedExtensionPaths:
+             10: EXT:my_site_package/Resources/Private/Forms/
 
 Add the following config if you want to allow backend users to **edit**
 forms stored within your own extension.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          persistenceManager:
-            allowSaveToExtensionPaths: true
+   TYPO3:
+     CMS:
+       Form:
+         persistenceManager:
+           allowSaveToExtensionPaths: true
 
 
 Add the following config if you want to allow backend users to **delete**
@@ -94,42 +95,42 @@ forms stored within your own extension.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          persistenceManager:
-            allowDeleteFromExtensionPaths: true
+   TYPO3:
+     CMS:
+       Form:
+         persistenceManager:
+           allowDeleteFromExtensionPaths: true
 
 The following code blocks show you the default setup for filemounts that
 are used for file (and image) uploads.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                FileUpload:
-                  formEditor:
-                    predefinedDefaults:
-                      properties:
-                        saveToFileMount: '1:/user_upload/'
-                    editors:
-                      400:
-                        selectOptions:
-                          10:
-                            value: '1:/user_upload/'
-                            label: '1:/user_upload/'
-                  properties:
-                    saveToFileMount: '1:/user_upload/'
-                ImageUpload
-                  properties:
-                    saveToFileMount: '1:/user_upload/'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               FileUpload:
+                 formEditor:
+                   predefinedDefaults:
+                     properties:
+                       saveToFileMount: '1:/user_upload/'
                    editors:
-                      400:
-                        selectOptions:
-                          10:
-                            value: '1:/user_upload/'
-                            label: '1:/user_upload/'
\ No newline at end of file
+                     400:
+                       selectOptions:
+                         10:
+                           value: '1:/user_upload/'
+                           label: '1:/user_upload/'
+                 properties:
+                   saveToFileMount: '1:/user_upload/'
+               ImageUpload
+                 properties:
+                   saveToFileMount: '1:/user_upload/'
+                  editors:
+                     400:
+                       selectOptions:
+                         10:
+                           value: '1:/user_upload/'
+                           label: '1:/user_upload/'
index 04033a6..5edd409 100644 (file)
@@ -72,14 +72,14 @@ template``. You need at least the root form element ('Form') and a 'Page'.
 
 .. code-block:: yaml
 
-    type: 'Form'
-    identifier: 'blankForm'
-    label: '[Blank Form]'
-    renderables:
-      -
-        type: 'Page'
-        identifier: 'page-1'
-        label: 'Page'
+   type: 'Form'
+   identifier: 'blankForm'
+   label: '[Blank Form]'
+   renderables:
+     -
+       type: 'Page'
+       identifier: 'page-1'
+       label: 'Page'
 
 As mentioned previously, the form wizard within the ``form manager`` offers
 a list of all existing, :ref:`pre-configured<typo3.cms.form.formmanager.selectableprototypesconfiguration.*.newformtemplates>`
@@ -103,23 +103,23 @@ translated:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          formManager:
+   TYPO3:
+     CMS:
+       Form:
+         formManager:
 
 The translation files of the ``form manager`` are loaded as follows:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          formManager:
-            translationFile:
-              # translation files for the form manager
-              10: 'EXT:form/Resources/Private/Language/Database.xlf'
-              20: 'EXT:my_site_package/Resources/Private/Language/Database.xlf'
+   TYPO3:
+     CMS:
+       Form:
+         formManager:
+           translationFile:
+             # translation files for the form manager
+             10: 'EXT:form/Resources/Private/Language/Database.xlf'
+             20: 'EXT:my_site_package/Resources/Private/Language/Database.xlf'
 
 The process searches for each option value within all of the defined
 translation files. If a translation is found, the translated option value
@@ -129,9 +129,9 @@ Imagine, the following is defined for an option value:
 
 .. code-block:: yaml
 
-    ...
-    label: 'formManager.selectablePrototypesConfiguration.standard.label'
-    ...
+   ...
+   label: 'formManager.selectablePrototypesConfiguration.standard.label'
+   ...
 
 First of all, the process searches for the translation key ``formManager.selectablePrototypesConfiguration.standard.label``
 within the file ``20: 'EXT:my_site_package/Resources/Private/Language/Database.xlf'``
@@ -142,4 +142,4 @@ Due to compatibility issues, the setting ``translationFile`` is not defined
 as an array in the default configuration. To load your own translation files,
 you should define an array containing 'EXT:form/Resources/Private/Language/Database.xlf'
 as first entry (key ``10``) followed by your own file (key ``20``) as
-displayed in the example above.
\ No newline at end of file
+displayed in the example above.
index 050d2f0..783c576 100644 (file)
@@ -38,29 +38,29 @@ translated:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              finishersDefinition:
-                <finisherIdentifier>
-                  formEngine:
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             finishersDefinition:
+               <finisherIdentifier>
+                 formEngine:
 
 The translation files of the ``form plugin`` are loaded as follows:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formEngine:
-                translationFile:
-                  # translation files for the form plugin (finisher overrides)
-                  10: 'EXT:form/Resources/Private/Language/Database.xlf'
-                  20: 'EXT:my_site_package/Resources/Private/Language/Database.xlf'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formEngine:
+               translationFile:
+                 # translation files for the form plugin (finisher overrides)
+                 10: 'EXT:form/Resources/Private/Language/Database.xlf'
+                 20: 'EXT:my_site_package/Resources/Private/Language/Database.xlf'
 
 The process searches for each option value within all of the defined
 translation files. If a translation is found, the translated option value
@@ -70,9 +70,9 @@ Imagine, the following is defined for an option value:
 
 .. code-block:: yaml
 
-    ...
-    label: 'tt_content.finishersDefinition.EmailToReceiver.label'
-    ...
+   ...
+   label: 'tt_content.finishersDefinition.EmailToReceiver.label'
+   ...
 
 First of all, the process searches for the translation key
 ``tt_content.finishersDefinition.EmailToReceiver.label`` within the file
@@ -84,4 +84,4 @@ Due to compatibility issues, the setting ``translationFile`` is not defined
 as an array in the default configuration. To load your own translation files,
 you should define an array containing 'EXT:form/Resources/Private/Language/Database.xlf'
 as first entry (key ``10``) followed by your own file (key ``20``) as
-displayed in the example above.
\ No newline at end of file
+displayed in the example above.
index 027b458..7e0e2c7 100644 (file)
@@ -3,6 +3,7 @@
 
 .. _concepts-frontendrendering:
 
+==================
 Frontend rendering
 ==================
 
@@ -10,7 +11,7 @@ Frontend rendering
 .. _concepts-frontendrendering-basiccodecomponents:
 
 Basic code components
----------------------
+=====================
 
 
 .. figure:: ../../Images/basic_code_components.png
@@ -22,7 +23,7 @@ Basic code components
 .. _concepts-frontendrendering-basiccodecomponents-formdefinition:
 
 TYPO3\\CMS\\Form\\Domain\\Model\\FormDefinition
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+-----------------------------------------------
 
 The class ``TYPO3\\CMS\\Form\\Domain\\Model\\FormDefinition`` encapsulates
 a complete ``form definition``, with all of its
@@ -38,7 +39,7 @@ The FormDefinition domain model is not modified when the form is executed.
 .. _concepts-frontendrendering-basiccodecomponents-formdefinition-anatomy:
 
 The anatomy of a form
-+++++++++++++++++++++
+"""""""""""""""""""""
 
 A ``FormDefinition`` domain model consists of multiple ``Page`` objects.
 When a form is displayed, only one ``Page`` is visible at any given time.
@@ -59,24 +60,22 @@ Example
 
 Basically, you can manually create a ``FormDefinition`` domain model just
 by calling the API methods on it, or you can use a ``FormFactory`` to build
-the form from a different representation format such as YAML.
-
-.. code-block:: php
+the form from a different representation format such as YAML::
 
-    $formDefinition = $this->objectManager->get(FormDefinition::class, 'myForm');
+   $formDefinition = $this->objectManager->get(FormDefinition::class, 'myForm');
 
-    $page1 = $this->objectManager->get(Page::class, 'page1');
-    $formDefinition->addPage($page);
+   $page1 = $this->objectManager->get(Page::class, 'page1');
+   $formDefinition->addPage($page);
 
-    // second argument is the <formElementTypeIdentifier> of the form element
-    $element1 = $this->objectManager->get(GenericFormElement::class, 'title', 'Text');
-    $page1->addElement($element1);
+   // second argument is the <formElementTypeIdentifier> of the form element
+   $element1 = $this->objectManager->get(GenericFormElement::class, 'title', 'Text');
+   $page1->addElement($element1);
 
 
 .. _concepts-frontendrendering-basiccodecomponents-formdefinition-createformusingabstracttypes:
 
 Creating a form using abstract form element types
-+++++++++++++++++++++++++++++++++++++++++++++++++
+"""""""""""""""""""""""""""""""""""""""""""""""""
 
 While you can use the ``TYPO3\CMS\Form\Domain\Model\FormDefinition::addPage()``
 or ``TYPO3\CMS\Form\Domain\Model\FormElements\Page::addElement()`` methods
@@ -88,65 +87,59 @@ or ``Page``. EXT:form will automatically resolve the implementation class
 name and set default values.
 
 The :ref:`simple example <concepts-frontendrendering-basiccodecomponents-formdefinition-anatomy-example>`
-shown above should be rewritten as follows:
-
-.. code-block:: php
+shown above should be rewritten as follows::
 
-    // we will come back to this later on
-    $prototypeConfiguration = [];
+   // we will come back to this later on
+   $prototypeConfiguration = [];
 
-    $formDefinition = $this->objectManager->get(FormDefinition::class, 'myForm', $prototypeConfiguration);
-    $page1 = $formDefinition->createPage('page1');
-    $element1 = $page1->addElement('title', 'Text');
+   $formDefinition = $this->objectManager->get(FormDefinition::class, 'myForm', $prototypeConfiguration);
+   $page1 = $formDefinition->createPage('page1');
+   $element1 = $page1->addElement('title', 'Text');
 
 You might wonder how the system knows that the element ``Text`` is
 implemented by using a ``GenericFormElement``. This is configured in the
 ``$prototypeConfiguration``. To make the example from above actually work,
-we need to add some meaningful values to ``$prototypeConfiguration``:
-
-.. code-block:: php
-
-    $prototypeConfiguration = [
-        'formElementsDefinition' => [
-            'Page' => [
-                'implementationClassName' => 'TYPO3\CMS\Form\Domain\Model\FormElements\Page'
-            ],
-            'Text' => [
-                'implementationClassName' => 'TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement'
-            ],
-        ],
-    ];
+we need to add some meaningful values to ``$prototypeConfiguration``::
+
+   $prototypeConfiguration = [
+       'formElementsDefinition' => [
+           'Page' => [
+               'implementationClassName' => 'TYPO3\CMS\Form\Domain\Model\FormElements\Page'
+           ],
+           'Text' => [
+               'implementationClassName' => 'TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement'
+           ],
+       ],
+   ];
 
 For each abstract ``<formElementTypeIdentifier>`` we have to add some
 configuration. In the snippet above, we only define the ``implementation
 class name``. Apart form that, it is always possible to set default values
 for all configuration options of such elements, as the following example
-shows:
-
-.. code-block:: php
-
-    $prototypeConfiguration = [
-        'formElementsDefinition' => [
-            'Page' => [
-                'implementationClassName' => 'TYPO3\CMS\Form\Domain\Model\FormElements\Page',
-                'label' => 'This is the label of the page if nothing else is specified'
-            ],
-            'Text' => [
-                'implementationClassName' => 'TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement',
-                'label' = >'Default Label',
-                'defaultValue' => 'Default form element value',
-                'properties' => [
-                    'placeholder' => 'Text that is shown if element is empty'
-                ],
-            ],
-        ],
-    ];
+shows::
+
+   $prototypeConfiguration = [
+       'formElementsDefinition' => [
+           'Page' => [
+               'implementationClassName' => 'TYPO3\CMS\Form\Domain\Model\FormElements\Page',
+               'label' => 'This is the label of the page if nothing else is specified'
+           ],
+           'Text' => [
+               'implementationClassName' => 'TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement',
+               'label' = >'Default Label',
+               'defaultValue' => 'Default form element value',
+               'properties' => [
+                   'placeholder' => 'Text that is shown if element is empty'
+               ],
+           ],
+       ],
+   ];
 
 
 .. _concepts-frontendrendering-basiccodecomponents-formdefinition-preconfiguredconfiguration:
 
 Using pre-configured $prototypeConfiguration
-++++++++++++++++++++++++++++++++++++++++++++
+""""""""""""""""""""""""""""""""""""""""""""
 
 Often, it does not make sense to manually create the $prototypeConfiguration
 array. Bigger parts of this array are pre-configured in the extensions's
@@ -157,26 +150,24 @@ contains helper methods which return the ready-to-use ``$prototypeConfiguration`
 .. _concepts-frontendrendering-basiccodecomponents-formdefinition-rednering:
 
 Rendering a FormDefinition
-++++++++++++++++++++++++++
+""""""""""""""""""""""""""
 
 To trigger the rendering of a ``FormDefinition`` domain model, the current
 ``TYPO3\CMS\Extbase\Mvc\Web\Request`` needs to be bound to the
 ``FormDefinition``. This binding results in a ``TYPO3\CMS\Form\Domain\Runtime\FormRuntime``
 object which contains the ``Runtime State`` of the form. Among other things,
-this object includes the currently inserted values.
-
-.. code-block:: php
+this object includes the currently inserted values::
 
-    // $currentRequest and $currentResponse need to be available
-    // inside a controller, you would use $this->request and $this->response;
-    $form = $formDefinition->bind($currentRequest, $currentResponse);
-    // now, you can use the $form object to get information about the currently entered values, etc.
+   // $currentRequest and $currentResponse need to be available
+   // inside a controller, you would use $this->request and $this->response;
+   $form = $formDefinition->bind($currentRequest, $currentResponse);
+   // now, you can use the $form object to get information about the currently entered values, etc.
 
 
 .. _concepts-frontendrendering-basiccodecomponents-formruntime:
 
 TYPO3\\CMS\\Form\\Domain\\Runtime\\FormRuntime
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+----------------------------------------------
 
 This class implements the runtime logic of a form, i.e. the class
 
@@ -190,20 +181,18 @@ You generally receive an instance of this class by calling ``TYPO3\CMS\Form\Doma
 .. _concepts-frontendrendering-basiccodecomponents-formruntime-render:
 
 Rendering a form
-++++++++++++++++
+""""""""""""""""
 
-Rendering a form is easy. Just call ``render()`` on the ``FormRuntime``.
+Rendering a form is easy. Just call ``render()`` on the ``FormRuntime``::
 
-.. code-block:: php
-
-    $form = $formDefinition->bind($request, $response);
-    $renderedForm = $form->render();
+   $form = $formDefinition->bind($request, $response);
+   $renderedForm = $form->render();
 
 
 .. _concepts-frontendrendering-basiccodecomponents-formruntime-accessingformvalues:
 
 Accessing form values
-+++++++++++++++++++++
+"""""""""""""""""""""
 
 In order to get the values the user has entered into the form, you can
 access the ``FormRuntime`` object like an array. If a form element with the
@@ -214,7 +203,7 @@ retrieve its current value. You can set values the same way.
 .. _concepts-frontendrendering-basiccodecomponents-formruntime-renderinginternals:
 
 Rendering internals
-+++++++++++++++++++
+"""""""""""""""""""
 
 The ``FormRuntime`` inquires the ``FormDefinition`` domain model regarding
 the configured renderer (``TYPO3\CMS\Form\Domain\Model\FormDefinition::getRendererClassName()``)
@@ -224,20 +213,20 @@ This allows you to declaratively define how a form should be rendered.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                Form:
-                  rendererClassName: 'TYPO3\CMS\Form\Domain\Renderer\FluidFormRenderer'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               Form:
+                 rendererClassName: 'TYPO3\CMS\Form\Domain\Renderer\FluidFormRenderer'
 
 
 .. _concepts-frontendrendering-basiccodecomponents-fluidformrenderer:
 
 TYPO3\\CMS\\Form\\Domain\\Renderer\\FluidFormRenderer
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+-----------------------------------------------------
 
 This class is a  ``TYPO3\CMS\Form\Domain\Renderer\RendererInterface``
 implementation which used to render a ``FormDefinition`` domain model. It
@@ -249,7 +238,7 @@ Learn more about the :ref:`FluidFormRenderer Options<apireference-frontendrender
 .. _concepts-frontendrendering-codecomponents-customformelementimplementations:
 
 Custom form element implementations
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+-----------------------------------
 
 EXT:form ships a decent amount of hooks which are available at crucial
 points of the life cycle of a ``FormElement``. Most of the time, own
@@ -261,14 +250,14 @@ defined by:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                CustomFormElementIdentifier:
-                  implementationClassName: 'TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               CustomFormElementIdentifier:
+                 implementationClassName: 'TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement'
 
 With the provided hooks, this ``FormElement`` can now be manipulated.
 
@@ -282,7 +271,7 @@ It is a good idea to derive your implementation from ``TYPO3\CMS\Form\Domain\Mod
 .. _concepts-frontendrendering-codecomponents-customfinisherimplementations:
 
 Custom finisher implementations
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+-------------------------------
 
 Finishers are defined as part of a ``prototype`` within a
 ``finishersDefinition``. The property ``implementationClassName`` is to be
@@ -290,14 +279,14 @@ utilized to load the finisher implementation.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              finishersDefinition:
-                CustomFinisher:
-                  implementationClassName: 'VENDOR\MySitePackage\Domain\Finishers\CustomFinisher'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             finishersDefinition:
+               CustomFinisher:
+                 implementationClassName: 'VENDOR\MySitePackage\Domain\Finishers\CustomFinisher'
 
 If the finisher requires options, you can define those within the
 ``options`` property. The options will be used as default values and can
@@ -307,34 +296,34 @@ Define the default value:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              finishersDefinition:
-                CustomFinisher:
-                  implementationClassName: 'VENDOR\MySitePackage\Domain\Finishers\CustomFinisher'
-                  options:
-                    yourCustomOption: 'Ralf'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             finishersDefinition:
+               CustomFinisher:
+                 implementationClassName: 'VENDOR\MySitePackage\Domain\Finishers\CustomFinisher'
+                 options:
+                   yourCustomOption: 'Ralf'
 
 Override the option using the ``form definition``:
 
 .. code-block:: yaml
 
-    identifier: sample-form
-    label: 'Simple Contact Form'
-    prototype: standard
-    type: Form
+   identifier: sample-form
+   label: 'Simple Contact Form'
+   prototype: standard
+   type: Form
 
-    finishers:
-      -
-        identifier: CustomFinisher
-        options:
-          yourCustomOption: 'Björn'
+   finishers:
+     -
+       identifier: CustomFinisher
+       options:
+         yourCustomOption: 'Björn'
 
-    renderables:
-      ...
+   renderables:
+     ...
 
 Each finisher has to be programmed to the interface ``TYPO3\CMS\Form\Domain\Finishers\FinisherInterface``
 and should extend the class ``TYPO3\CMS\Form\Domain\Finishers\AbstractFinisher``.
@@ -345,37 +334,35 @@ In doing so, the logic of the finisher should start with the method
 .. _concepts-frontendrendering-codecomponents-customfinisherimplementations-accessingoptions:
 
 Accessing finisher options
-++++++++++++++++++++++++++
+""""""""""""""""""""""""""
 
 If your finisher extends ``TYPO3\CMS\Form\Domain\Finishers\AbstractFinisher``,
 you can access your finisher options with the help of the ``parseOption()``
-method.
-
-.. code-block:: php
+method::
 
-    $yourCustomOption = $this->parseOption('yourCustomOption');
+   $yourCustomOption = $this->parseOption('yourCustomOption');
 
 ``parseOption()`` is looking for 'yourCustomOption' in your
 ``form definition``. If it cannot be found, the method checks
 
-- 1. the ``prototype`` configuration for a default value,
-- 2. the finisher class itself by searching for a default value within the
-     ``$defaultOptions`` property.
+1. the ``prototype`` configuration for a default value,
 
-.. code-block:: php
+2. the finisher class itself by searching for a default value within the
+   ``$defaultOptions`` property::
 
-    <?php
-    declare(strict_types = 1);
-    namespace VENDOR\MySitePackage\Domain\Finishers;
+   <?php
+   declare(strict_types = 1);
+   namespace VENDOR\MySitePackage\Domain\Finishers;
 
-    class CustomFinisher extends \TYPO3\CMS\Form\Domain\Finishers\AbstractFinisher
-    {
+   class CustomFinisher extends \TYPO3\CMS\Form\Domain\Finishers\AbstractFinisher
+   {
 
-        protected $defaultOptions = [
-            'yourCustomOption' => 'Olli',
-        ];
+       protected $defaultOptions = [
+           'yourCustomOption' => 'Olli',
+       ];
 
-        ...
+       // ...
+   }
 
 If the option cannot be found by processing this fallback chain, ``null`` is
 returned.
@@ -402,29 +389,29 @@ get the whole idea.
 
 .. code-block:: yaml
 
-    identifier: simple-contact-form
-    label: 'Simple Contact Form'
-    prototype: standard
-    type: Form
+   identifier: simple-contact-form
+   label: 'Simple Contact Form'
+   prototype: standard
+   type: Form
 
-    finishers:
-      -
-        identifier: Custom
-        options:
-          yourCustomOption: '{subject}'
+   finishers:
+     -
+       identifier: Custom
+       options:
+         yourCustomOption: '{subject}'
 
-    renderables:
-      -
-        identifier: subject
-        label: 'Subject'
-        type: Text
+   renderables:
+     -
+       identifier: subject
+       label: 'Subject'
+       type: Text
 
 
-.. code-block:: php
+::
 
-    // $yourCustomOption contains the value of the form element with the
-    // identifier 'subject'
-    $yourCustomOption = $this->parseOption('yourCustomOption');
+   // $yourCustomOption contains the value of the form element with the
+   // identifier 'subject'
+   $yourCustomOption = $this->parseOption('yourCustomOption');
 
 In addition, you can use ``{__currentTimestamp}`` as a special option value.
 It will return the current UNIX timestamp.
@@ -433,36 +420,28 @@ It will return the current UNIX timestamp.
 .. _concepts-frontendrendering-codecomponents-customfinisherimplementations-finishercontext:
 
 Finisher Context
-++++++++++++++++
+""""""""""""""""
 
 The class ``TYPO3\CMS\Form\Domain\Finishers\FinisherContext`` takes care of
 transferring a finisher context to each finisher. Given the finisher is
 derived from ``TYPO3\CMS\Form\Domain\Finishers\AbstractFinisher`` the
-finisher context will be available via
-
-.. code-block:: php
+finisher context will be available via::
 
-    $this->finisherContext
+   $this->finisherContext
 
-The method ``cancel`` prevents the execution of successive finishers:
+The method ``cancel`` prevents the execution of successive finishers::
 
-.. code-block:: php
-
-    $this->finisherContext->cancel();
+   $this->finisherContext->cancel();
 
 The method ``getFormValues`` returns all of the submitted form values.
 
-``getFormValues``.
-
-.. code-block:: php
+``getFormValues``::
 
-    $this->finisherContext->getFormValues();
+   $this->finisherContext->getFormValues();
 
-The method ``getFormRuntime`` returns the ``FormRuntime``.
+The method ``getFormRuntime`` returns the ``FormRuntime``::
 
-.. code-block:: php
-
-    $this->finisherContext->getFormRuntime();
+   $this->finisherContext->getFormRuntime();
 
 
 .. _concepts-frontendrendering-codecomponents-customfinisherimplementations-finishercontext-sharedatabetweenfinishers:
@@ -472,31 +451,25 @@ Share data between finishers
 
 The method ``getFinisherVariableProvider`` returns an object (``TYPO3\CMS\Form\Domain\Finishers\FinisherVariableProvider``)
 which allows you to store data and transfer it to other finishers. The data
-can be easily accessed programmatically or within your configuration.
-
-.. code-block:: php
+can be easily accessed programmatically or within your configuration::
 
-    $this->finisherContext->getFinisherVariableProvider();
+   $this->finisherContext->getFinisherVariableProvider();
 
 The data is stored within the ``FinisherVariableProvider`` and is addressed
 by a user-defined 'finisher identifier' and a custom option value path. The
 name of the 'finisher identifier' should consist of the name of the finisher
 without the potential 'Finisher' appendix. If your finisher is derived from
 the class ``TYPO3\CMS\Form\Domain\Finishers\AbstractFinisher``, the name of
-this construct is stored in the following variable:
-
-.. code-block:: php
+this construct is stored in the following variable::
 
-    $this->shortFinisherIdentifier
+   $this->shortFinisherIdentifier
 
 For example, if the name of your finisher class is 'CustomFinisher', the
 mentioned variable will contain the value 'Custom'.
 
 There are a bunch of methods to access and manage the finisher data:
 
-- Add data:
-
-  .. code-block:: php
+- Add data::
 
       $this->finisherContext->getFinisherVariableProvider()->add(
           $this->shortFinisherIdentifier,
@@ -504,9 +477,7 @@ There are a bunch of methods to access and manage the finisher data:
           $value
       );
 
-- Get data:
-
-  .. code-block:: php
+- Get data::
 
       $this->finisherContext->getFinisherVariableProvider()->get(
           $this->shortFinisherIdentifier,
@@ -514,18 +485,14 @@ There are a bunch of methods to access and manage the finisher data:
           'default value'
       );
 
-- Check the existence of data:
-
-  .. code-block:: php
+- Check the existence of data::
 
       $this->finisherContext->getFinisherVariableProvider()->exists(
           $this->shortFinisherIdentifier,
           'unique.value.identifier'
       );
 
-- Delete data:
-
-  .. code-block:: php
+- Delete data::
 
       $this->finisherContext->getFinisherVariableProvider()->remove(
           $this->shortFinisherIdentifier,
@@ -536,42 +503,40 @@ In this way, each finisher can access data programmatically. Moreover, it is
 possible to retrieve the data via configuration, provided that a finisher
 stores the values within the ``FinisherVariableProvider``.
 
-Assuming that a finisher called 'Custom' sets data as follows:
-
-.. code-block:: php
+Assuming that a finisher called 'Custom' sets data as follows::
 
-    $this->finisherContext->getFinisherVariableProvider()->add(
-        $this->shortFinisherIdentifier,
-        'unique.value.identifier',
-        'Wouter'
-    );
+   $this->finisherContext->getFinisherVariableProvider()->add(
+       $this->shortFinisherIdentifier,
+       'unique.value.identifier',
+       'Wouter'
+   );
 
 ... you are now able to access the value 'Wouter' via ``{Custom.unique.value.identifier}``
 in any other finisher.
 
 .. code-block:: yaml
 
-    identifier: sample-form
-    label: 'Simple Contact Form'
-    prototype: standard
-    type: Form
+   identifier: sample-form
+   label: 'Simple Contact Form'
+   prototype: standard
+   type: Form
 
-    finishers:
-      -
-        identifier: Custom
-        options:
-          yourCustomOption: 'Frans'
+   finishers:
+     -
+       identifier: Custom
+       options:
+         yourCustomOption: 'Frans'
 
-      -
-        identifier: SomeOtherStuff
-        options:
-          someOtherCustomOption: '{Custom.unique.value.identifier}'
+     -
+       identifier: SomeOtherStuff
+       options:
+         someOtherCustomOption: '{Custom.unique.value.identifier}'
 
 
 .. _concepts-frontendrendering-codecomponents-customvalidatorimplementations:
 
 Custom validator implementations
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+--------------------------------
 
 Validators belong to a certain ``prototype`` and are defined within the
 ``validatorsDefinition``. The property ``implementationClassName`` is used
@@ -579,14 +544,14 @@ for the validator implementation.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              validatorsDefinition:
-                Custom:
-                  implementationClassName: 'VENDOR\MySitePackage\Domain\Validation\CustomValidator'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             validatorsDefinition:
+               Custom:
+                 implementationClassName: 'VENDOR\MySitePackage\Domain\Validation\CustomValidator'
 
 You can provide options for your validator using the property ``options``.
 Those will be used as default values which can be overridden within a
@@ -596,36 +561,36 @@ Define the default value of the option ``yourCustomOption``:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              validatorsDefinition:
-                Custom:
-                  implementationClassName: 'VENDOR\MySitePackage\Domain\Validation\CustomValidator'
-                  options:
-                    yourCustomOption: 'Jurian'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             validatorsDefinition:
+               Custom:
+                 implementationClassName: 'VENDOR\MySitePackage\Domain\Validation\CustomValidator'
+                 options:
+                   yourCustomOption: 'Jurian'
 
 Override the default value within your ``form definition``:
 
 .. code-block:: yaml
 
-    identifier: sample-form
-    label: 'Simple Contact Form'
-    prototype: standard
-    type: Form
-
-    renderables:
-      -
-        identifier: subject
-        label: 'Name'
-        type: Text
-        validators:
-          -
-            identifier: Custom
-            options:
-              yourCustomOption: 'Mathias'
+   identifier: sample-form
+   label: 'Simple Contact Form'
+   prototype: standard
+   type: Form
+
+   renderables:
+     -
+       identifier: subject
+       label: 'Name'
+       type: Text
+       validators:
+         -
+           identifier: Custom
+           options:
+             yourCustomOption: 'Mathias'
 
 EXT:form implements Extbase validators. That said, your own validators should
 extend ``TYPO3\CMS\Extbase\Validation\Validator\AbstractValidator``.
@@ -634,7 +599,7 @@ extend ``TYPO3\CMS\Extbase\Validation\Validator\AbstractValidator``.
 .. _concepts-frontendrendering-renderviewHelper:
 
 "render" viewHelper
--------------------
+===================
 
 The ``RenderViewHelper`` is the actual starting point for form rendering and
 not the typical Extbase Controller as you may know it.
@@ -645,44 +610,44 @@ For more technical insights read more about the viewHelper's :ref:`arguments<api
 .. _concepts-frontendrendering-fluidtemplate:
 
 Render through FLUIDTEMPLATE (without controller)
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+-------------------------------------------------
 
 .. code-block:: typoscript
 
-    tt_content.custom_content_element = COA_INT
-    tt_content.custom_content_element {
-        10 = < lib.stdheader
-        20 = FLUIDTEMPLATE
-        20 {
-            file = EXT:my_site_package/Resources/Private/Templates/CustomContentElement.html
-            settings {
-                persistenceIdentifier = EXT:my_site_package/Resources/Private/Forms/MyForm.yaml
-            }
-            extbase.pluginName = Form
-            extbase.controllerExtensionName = Formframework
-            extbase.controllerName = FormFrontend
-            extbase.controllerActionName = perform
-        }
-    }
+   tt_content.custom_content_element = COA_INT
+   tt_content.custom_content_element {
+       10 = < lib.stdheader
+       20 = FLUIDTEMPLATE
+       20 {
+           file = EXT:my_site_package/Resources/Private/Templates/CustomContentElement.html
+           settings {
+               persistenceIdentifier = EXT:my_site_package/Resources/Private/Forms/MyForm.yaml
+           }
+           extbase.pluginName = Form
+           extbase.controllerExtensionName = Formframework
+           extbase.controllerName = FormFrontend
+           extbase.controllerActionName = perform
+       }
+   }
 
 ``my_site_package/Resources/Private/Templates/CustomContentElement.html``:
 
 .. code-block:: html
 
-    <formvh:render persistenceIdentifier="{settings.persistenceIdentifier}" />
+   <formvh:render persistenceIdentifier="{settings.persistenceIdentifier}" />
 
 
 .. _concepts-frontendrendering-extbase:
 
 Render within your own Extbase extension
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+----------------------------------------
 
 It is straight forward. Use the ``RenderViewHelper`` like this and you are
 done:
 
 .. code-block:: html
 
-    <formvh:render persistenceIdentifier="EXT:my_site_package/Resources/Private/Forms/MyForm.yaml"/>
+   <formvh:render persistenceIdentifier="EXT:my_site_package/Resources/Private/Forms/MyForm.yaml"/>
 
 Point the property ``controllerAction`` to the desired action name and
 provide values for the other parameters displayed below (you might need
@@ -690,24 +655,24 @@ those).
 
 .. code-block:: yaml
 
-    type: Form
-    identifier: 'example-form'
-    label: 'TYPO3 is cool'
-    prototypeName: standard
-    renderingOptions:
-      controllerAction: perform
-      addQueryString: false
-      argumentsToBeExcludedFromQueryString: []
-      additionalParams: []
+   type: Form
+   identifier: 'example-form'
+   label: 'TYPO3 is cool'
+   prototypeName: standard
+   renderingOptions:
+     controllerAction: perform
+     addQueryString: false
+     argumentsToBeExcludedFromQueryString: []
+     additionalParams: []
 
-    renderables:
-      ...
+   renderables:
+     ...
 
 
 .. _concepts-frontendrendering-programmatically:
 
 Build forms programmatically
-----------------------------
+============================
 
 To learn more about this topic, head to the chapter ':ref:`Build forms programmatically<apireference-frontendrendering-programmatically>`'
 which is part of the API reference section.
@@ -716,12 +681,12 @@ which is part of the API reference section.
 .. _concepts-frontendrendering-runtimemanipulation:
 
 Runtime manipulation
---------------------
+====================
 
 .. _concepts-frontendrendering-runtimemanipulation-hooks:
 
 Hooks
-^^^^^
+-----
 
 EXT:form implements a decent amount of hooks that allow the manipulation of
 your forms during runtime. In this way, it is possible to, for example,
@@ -738,7 +703,7 @@ for more details.
 .. _concepts-frontendrendering-runtimemanipulation-typoscriptoverrides:
 
 TypoScript overrides
-^^^^^^^^^^^^^^^^^^^^
+--------------------
 
 Each and every ``form definition`` can be overridden via TypoScript if the
 ``FormFrontendController`` of EXT:form is used to render the form. Normally,
@@ -754,30 +719,30 @@ form elements using the above-mentioned concept of :ref:`hooks<concepts-frontend
 
 .. code-block:: typoscript
 
-    plugin.tx_form {
-        settings {
-            formDefinitionOverrides {
-                <formDefinitionIdentifier> {
-                    renderables {
-                        0 {
-                            renderables {
-                                0 {
-                                    label = TEXT
-                                    label.value = Overridden label
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
+   plugin.tx_form {
+       settings {
+           formDefinitionOverrides {
+               <formDefinitionIdentifier> {
+                   renderables {
+                       0 {
+                           renderables {
+                               0 {
+                                   label = TEXT
+                                   label.value = Overridden label
+                               }
+                           }
+                       }
+                   }
+               }
+           }
+       }
+   }
 
 
 .. _concepts-frontendrendering-templates:
 
 Templates
----------
+=========
 
 The Fluid templates of the form framework are based on Twitter Bootstrap.
 
@@ -785,7 +750,7 @@ The Fluid templates of the form framework are based on Twitter Bootstrap.
 .. _concepts-frontendrendering-templates-customtemplates:
 
 Custom templates
-^^^^^^^^^^^^^^^^
+----------------
 
 If you want to use custom Fluid templates for the frontend output of the
 form elements, you cannot register an additional template path using
@@ -794,20 +759,20 @@ via YAML. The settings are part of the ``prototypes`` configuration.
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                Form:
-                  renderingOptions:
-                    templateRootPaths:
-                      100: 'EXT:my_site_package/Resources/Private/Frontend/Templates/'
-                    partialRootPaths:
-                      100: 'EXT:my_site_package/Resources/Private/Frontend/Partials/'
-                    layoutRootPaths:
-                      100: 'EXT:my_site_package/Resources/Private/Frontend/Layouts/'
+   TYPO3:
+     CMS:
+       Form:
+         prototypes:
+           standard:
+             formElementsDefinition:
+               Form:
+                 renderingOptions:
+                   templateRootPaths:
+                     100: 'EXT:my_site_package/Resources/Private/Frontend/Templates/'
+                   partialRootPaths:
+                     100: 'EXT:my_site_package/Resources/Private/Frontend/Partials/'
+                   layoutRootPaths:
+                     100: 'EXT:my_site_package/Resources/Private/Frontend/Layouts/'
 
 For each ``form definition`` - which references the prototype ``standard`` -
 the form framework will additionally look for Fluid templates within the
@@ -824,12 +789,12 @@ logic, the template name must be ``Form.html``.
 .. _concepts-frontendrendering-translation:
 
 Translation
------------
+===========
 
 .. _concepts-frontendrendering-translation-formdefinition:
 
 Translate form definition
-^^^^^^^^^^^^^^^^^^^^^^^^^
+-------------------------
 
 The translation of ``form definitions`` works differently to the translation
 of the backend aspects. Currently, there is no graphical user interface
@@ -858,19 +823,19 @@ Additional translation files can be defined as follows:
 
 .. code-block:: yaml
 
-    TYPO3:
-      CMS:
-        Form:
-          prototypes:
-            standard:
-              formElementsDefinition:
-                Form:
-                  renderingOptions:
-                    translation:
-                      translationFile:
-                        # translation files for the frontend
-                        10: 'EXT:form/Resources/Private/Language/locallang.xlf'
-                        20: 'EXT:my_site_package/Resources/Private/Language/locallang.xlf'