.. include:: ../../../Includes.txt
.. _change-layout-specific-view:
=====================================
Change the layout for a specific view
=====================================
.. contents::
:local:
:depth: 1
.. _change-layout-specific-view-available-views:
Available views
===============
There are 3 views available:
form:
This view displays the form with its form fields which can be filled by
the user and submitted.
confirmation:
If activated, this view shows a confirmation page which has to be
confirmed by the user.
postProcessor:
The mail postProcessor has its own view for rendering the mail which is
sent to the receiver.
It is not recommended to change the layout of a FORM object for all views.
For example when customizing the TEXTLINE object the integrator will get
strange results based on the following example:
.. code-block:: typoscript
tt_content.mailform.20 {
layout {
textline (
)
}
}
The setup shown above changes the appearance of all TEXTLINE objects for all
views. That is, the user will get a confirmation page and a mail with
broken/ senseless input fields instead of the user data.
In order to only change the TEXTLINE object specific to all of the 3 views,
the following code could be applied.
.. code-block:: typoscript
tt_content.mailform.20 {
# customize form view
form {
layout {
textline (
)
}
}
}
.. _change-layout-specific-view-properties:
Properties and defaults
=======================
If the integrator does not define any :ts:`.layout` setting the default
layout defined in the PHP classes will be used.
The following list shows all available elements within all the different
views including their corresponding default layouts.
.. contents::
:local:
:depth: 1
.. _reference-layout-form:
form
^^^^
:aspect:`Property:`
form
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
:aspect:`Description:`
Layout of the FORM object/ outer wrap.
The tag will be substituted by the outer container
wrap and includes all child elements.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
.. _reference-layout-confirmation:
confirmation
^^^^^^^^^^^^
:aspect:`Property:`
confirmation
:aspect:`Data type:`
string
:aspect:`Available in views:`
- confirmation
:aspect:`Description:`
Layout of the outer wrap.
The tag will be substituted by the outer container
wrap and includes all child elements.
:aspect:`Default:`
Default layout **confirmation view**:
.. code-block:: html
.. _reference-layout-html:
html
^^^^
:aspect:`Property:`
html
:aspect:`Data type:`
string
:aspect:`Available in views:`
- postProcessor
:aspect:`Description:`
Layout of the outer wrap.
The tag will be substituted by the outer container
wrap and includes all child elements.
:aspect:`Default:`
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-containerwrap:
containerWrap
^^^^^^^^^^^^^
:aspect:`Property:`
containerWrap
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Inner wrap for container objects.
The tag will be substituted with all the child elements,
including their element wraps.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-elementwrap:
elementWrap
^^^^^^^^^^^
:aspect:`Property:`
elementWrap
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Outer wrap for regular objects.
The tag will be substituted with the child element.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-label:
label
^^^^^
:aspect:`Property:`
label
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the labels.
The tag will be substituted with the label text.
If available, the tag will be substituted with the
validation rule message, styled by its own layout.
If available, the tag will be substituted with the error
message from the validation rule when the submitted value is not valid.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-mandatory:
mandatory
^^^^^^^^^
:aspect:`Property:`
mandatory
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
:aspect:`Description:`
Layout for the validation rule message to describe the rule.
The tag will be substituted with the validation rule
message.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
.. _reference-layout-error:
error
^^^^^
:aspect:`Property:`
error
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
:aspect:`Description:`
Layout for the validation rule error message when the submitted data
does not validate.
The tag will be substituted with the validation rule
error message.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
.. _reference-layout-legend:
legend
^^^^^^
:aspect:`Property:`
legend
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the legend.
The tag will be substituted with the legend text.
If available, the tag will be substituted with the
validation rule message, styled by its own layout.
If available, the tag will be substituted with the error
message from the validation rule when the submitted value is not valid.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-button:
button
^^^^^^
:aspect:`Property:`
button
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
:aspect:`Description:`
Layout for the BUTTON object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
.. _reference-layout-checkbox:
checkbox
^^^^^^^^
:aspect:`Property:`
checkbox
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the CHECKBOX object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-checkboxgroup:
checkboxgroup
^^^^^^^^^^^^^
:aspect:`Property:`
checkboxgroup
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the CHECKBOXGROUP object.
The tag will be substituted by the outer container
wrap and includes all child elements.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-fieldset:
fieldset
^^^^^^^^
:aspect:`Property:`
fieldset
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the FIELDSET object.
The tag will be substituted by the outer container
wrap and includes all child elements.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-fileupload:
fileupload
^^^^^^^^^^
:aspect:`Property:`
fileupload
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the FILEUPLOAD object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-hidden:
hidden
^^^^^^
:aspect:`Property:`
hidden
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- postProcessor
:aspect:`Description:`
Layout for the HIDDEN object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-imagebutton:
imagebutton
^^^^^^^^^^^
:aspect:`Property:`
imagebutton
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
:aspect:`Description:`
Layout for the IMAGEBUTTON object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
.. _reference-layout-optgroup:
optgroup
^^^^^^^^
:aspect:`Property:`
optgroup
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the OPTGROUP object.
The tag will be substituted with all the child elements,
which actually can only be OPTION objects.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-option:
option
^^^^^^
:aspect:`Property:`
option
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the OPTION object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-password:
password
^^^^^^^^
:aspect:`Property:`
password
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
:aspect:`Description:`
Layout for the PASSWORD object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
.. _reference-layout-radio:
radio
^^^^^
:aspect:`Property:`
radio
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the RADIO object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-radiogroup:
radiogroup
^^^^^^^^^^
:aspect:`Property:`
radiogroup
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the RADIOGROUP object.
The tag will be substituted by the outer container
wrap and includes all child elements.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-reset:
reset
^^^^^
:aspect:`Property:`
reset
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
:aspect:`Description:`
Layout for the RESET object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
.. _reference-layout-select:
select
^^^^^^
:aspect:`Property:`
select
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the SELECT object.
The tag will be substituted with all the child elements,
which only can be OPTGROUP or OPTION objects.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-submit:
submit
^^^^^^
:aspect:`Property:`
submit
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
:aspect:`Description:`
Layout for the SUBMIT object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
.. _reference-layout-textarea:
textarea
^^^^^^^^
:aspect:`Property:`
textarea
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the TEXTAREA object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _reference-layout-textblock:
textblock
^^^^^^^^^
:aspect:`Property:`
textblock
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
:aspect:`Description:`
Layout for the TEXTBLOCK object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
.. _reference-layout-textline:
textline
^^^^^^^^
:aspect:`Property:`
textline
:aspect:`Data type:`
string
:aspect:`Available in views:`
- form
- confirmation
- postProcessor
:aspect:`Description:`
Layout for the TEXTLINE object.
:aspect:`Default:`
Default layout **form view**:
.. code-block:: html
Default layout **confirmation view**:
.. code-block:: html
Default layout **postProcessor view**:
.. code-block:: html
.. _change-layout-specific-view-example:
Example showing all .layout properties and defaults
===================================================
The code snippets below shows all available settings across all views
including their default layout.
.. code-block:: typoscript
tt_content.mailform.20 {
# ###
# form view
# ####
form {
layout {
form (
)
containerWrap (
)
elementWrap (