Change the layout for a specific view¶

Available views
Properties and defaults
Example showing all .layout properties and defaults

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:

tt_content.mailform.20 {
  layout {
    textline (
      <div class="form-group">
        <div class="col-sm-3 control-label">
          <label />
        </div>
        <div class="col-sm-5">
          <input class="form-control" />
        </div>
      </div>
    )
  }
}

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.

tt_content.mailform.20 {
  # customize form view
  form {
    layout {
      textline (
        <div class="form-group">
          <div class="col-sm-3 control-label">
            <label />
          </div>
          <div class="col-sm-5">
            <input class="form-control" />
          </div>
        </div>
      )
    }
  }

  # customize confirmation view
  confirmation {
    layout {
      textline (
        <div class="form-group">
          <div class="col-sm-3">
            <strong><label /></strong>
          </div>
          <div class="col-sm-5">
            <inputvalue />
          </div>
        </div>
      )
    }
  }

  # customize postProcessor/ mail
  postProcessor {
    layout {
      textline (
        <td colspan="2">
          <div class="textline"><inputvalue /></div>
        </td>
      )
    }
  }
}

Properties and defaults ¶

If the integrator does not define any .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.

form
confirmation
html
containerWrap
elementWrap
label
mandatory
error
legend
button
checkbox
checkboxgroup
fieldset
fileupload
hidden
optgroup
option
password
radio
radiogroup
reset
select
submit
textarea
textblock
textline

form ¶

Property:

form

Data type:

string

Available in views:

form

Description:

Layout of the FORM object/ outer wrap.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout form view:

<form>
  <containerWrap />
</form>

confirmation ¶

Property:

confirmation

Data type:

string

Available in views:

confirmation

Description:

Layout of the outer wrap.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout confirmation view:

<containerWrap />

html ¶

Property:

html

Data type:

string

Available in views:

postProcessor

Description:

Layout of the outer wrap.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout postProcessor view:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <table cellspacing="0">
      <containerWrap />
    </table>
  </body>
</html>

containerWrap ¶

Property:

containerWrap

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Inner wrap for container objects.

The <elements /> tag will be substituted with all the child elements, including their element wraps.

Default:

Default layout form view:

<ol>
  <elements />
</ol>

Default layout confirmation view:

<ol>
  <elements />
</ol>

Default layout postProcessor view:

<tbody>
  <elements />
</tbody>

elementWrap ¶

Property:

elementWrap

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Outer wrap for regular objects.

The <element /> tag will be substituted with the child element.

Default:

Default layout form view:

<li>
  <element />
</li>

Default layout confirmation view:

<li>
  <element />
</li>

Default layout postProcessor view:

<tr>
  <element />
</tr>

label ¶

Property:

label

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the labels.

The <labelvalue /> tag will be substituted with the label text.

If available, the <mandatory /> tag will be substituted with the validation rule message, styled by its own layout.

If available, the <error /> tag will be substituted with the error message from the validation rule when the submitted value is not valid.

Default:

Default layout form view:

<label>
  <labelvalue />
  <mandatory />
  <error />
</label>

Default layout confirmation view:

<label>
  <labelvalue />
</label>

Default layout postProcessor view:

<em>
  <labelvalue />
</em>

mandatory ¶

Property:

mandatory

Data type:

string

Available in views:

form

Description:

Layout for the validation rule message to describe the rule.

The <mandatoryvalue /> tag will be substituted with the validation rule message.

Default:

Default layout form view:

<em>
  <mandatoryvalue />
</em>

error ¶

Property:

error

Data type:

string

Available in views:

form

Description:

Layout for the validation rule error message when the submitted data does not validate.

The <errorvalue /> tag will be substituted with the validation rule error message.

Default:

Default layout form view:

<strong>
  <errorvalue />
</strong>

legend ¶

Property:

legend

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the legend.

The <legendvalue /> tag will be substituted with the legend text.

If available, the <mandatory /> tag will be substituted with the validation rule message, styled by its own layout.

If available, the <error /> tag will be substituted with the error message from the validation rule when the submitted value is not valid.

Default:

Default layout form view:

<legend>
  <legendvalue />
  <mandatory />
  <error />
</legend>

Default layout confirmation view:

<legend>
  <legendvalue />
</legend>

Default layout postProcessor view:

<thead>
  <tr>
    <th colspan="2" align="left">
      <legendvalue />
    </th>
  </tr>
</thead>

button ¶

Property:

button

Data type:

string

Available in views:

form

Description:

Layout for the BUTTON object.

Default:

Default layout form view:

<label />
<input />

checkbox ¶

Property:

checkbox

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the CHECKBOX object.

Default:

Default layout form view:

<label />
<input />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <inputvalue />
</td>

checkboxgroup ¶

Property:

checkboxgroup

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the CHECKBOXGROUP object.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout form view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout confirmation view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout postProcessor view:

<td colspan="2">
  <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
    <legend />
    <containerWrap />
  </table>
</td>

fieldset ¶

Property:

fieldset

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the FIELDSET object.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout form view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout confirmation view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout postProcessor view:

<td colspan="2">
  <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
    <legend />
    <containerWrap />
  </table>
</td>

fileupload ¶

Property:

fileupload

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the FILEUPLOAD object.

Default:

Default layout form view:

<label />
<input />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <inputvalue />
</td>

hidden ¶

Property:

hidden

Data type:

string

Available in views:

form
postProcessor

Description:

Layout for the HIDDEN object.

Default:

Default layout form view:

<input />

Default layout postProcessor view:

<td style="width: 200px;">
  <em>
    <label />
  </em>
</td>
<td>
  <inputvalue />
</td>

optgroup ¶

Property:

optgroup

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the OPTGROUP object.

The <elements /> tag will be substituted with all the child elements, which actually can only be OPTION objects.

Default:

Default layout form view:

<optgroup>
  <elements />
</optgroup>

Default layout confirmation view:

<elements />

Default layout postProcessor view:

<elements />

option ¶

Property:

option

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the OPTION object.

Default:

Default layout form view:

<option />

Default layout confirmation view:

<inputvalue />

Default layout postProcessor view:

<div>
  <inputvalue />
</div>

password ¶

Property:

password

Data type:

string

Available in views:

form

Description:

Layout for the PASSWORD object.

Default:

Default layout form view:

<label />
<input />

radio ¶

Property:

radio

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the RADIO object.

Default:

Default layout form view:

<label />
<input />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <inputvalue />
</td>

radiogroup ¶

Property:

radiogroup

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the RADIOGROUP object.

The <containerwrap /> tag will be substituted by the outer container wrap and includes all child elements.

Default:

Default layout form view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout confirmation view:

<fieldset>
  <legend />
  <containerWrap />
</fieldset>

Default layout postProcessor view:

<td colspan="2">
  <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
    <legend />
    <containerWrap />
  </table>
</td>

reset ¶

Property:

reset

Data type:

string

Available in views:

form

Description:

Layout for the RESET object.

Default:

Default layout form view:

<label />
<input />

select ¶

Property:

select

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the SELECT object.

The <elements /> tag will be substituted with all the child elements, which only can be OPTGROUP or OPTION objects.

Default:

Default layout form view:

<label />
<select>
   <elements />
</select>

Default layout confirmation view:

<label />
<ol>
   <elements />
</ol>

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <elements />
</td>

submit ¶

Property:

submit

Data type:

string

Available in views:

form

Description:

Layout for the SUBMIT object.

Default:

Default layout form view:

<label />
<input />

textarea ¶

Property:

textarea

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the TEXTAREA object.

Default:

Default layout form view:

<label />
<textarea />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;" valign="top">
    <label />
</td>
<td>
    <inputvalue />
</td>

textblock ¶

Property:

textblock

Data type:

string

Available in views:

form

Description:

Layout for the TEXTBLOCK object.

Default:

Default layout form view:

<textblock />

textline ¶

Property:

textline

Data type:

string

Available in views:

form
confirmation
postProcessor

Description:

Layout for the TEXTLINE object.

Default:

Default layout form view:

<label />
<input />

Default layout confirmation view:

<label />
<inputvalue />

Default layout postProcessor view:

<td style="width: 200px;">
  <label />
</td>
<td>
  <inputvalue />
</td>

Example showing all .layout properties and defaults ¶

The code snippets below shows all available settings across all views including their default layout.

tt_content.mailform.20 {
  # ###
  # form view
  # ####

  form {
    layout {
      form (
        <form>
          <containerWrap />
        </form>
      )

      containerWrap (
        <ol>
          <elements />
        </ol>
      )

      elementWrap (
        <li>
          <element />
        </li>
      )

      label (
        <label>
          <labelvalue />
          <mandatory />
          <error />
        </label>
      )

      mandatory (
        <em>
          <mandatoryvalue />
        </em>
      )

      error (
        <strong>
          <errorvalue />
        </strong>
      )

      legend (
        <legend>
          <legendvalue />
          <mandatory />
          <error />
        </legend>
      )

      button (
        <label />
        <input />
      )

      checkbox (
        <label />
        <input />
      )

      checkboxgroup (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )
      fieldset (
          <fieldset>
              <legend />
              <containerWrap />
          </fieldset>
      )

      fileupload (
        <label />
        <input />
      )

      hidden (
        <input />
      )

      optgroup (
        <optgroup>
          <elements />
        </optgroup>
      )

      option (
        <option />
      )

      password (
        <label />
        <input />
      )

      radio (
        <label />
        <input />
      )

      radiogroup (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )

      reset (
        <label />
        <input />
      )

      select (
        <label />
        <select>
          <elements />
        </select>
      )

      submit (
        <label />
        <input />
      )

      textarea (
        <label />
        <textarea />
      )

      textblock (
        <textblock />
      )

      textline (
        <label />
        <input />
      )
    }
  }

  # ###
  # confirmation view
  # ###

  confirmation {
    layout {
      confirmation (
        <containerWrap />
      )

      containerWrap (
        <ol>
          <elements />
        </ol>
      )

      elementWrap (
        <li>
          <element />
        </li>
      )

      label (
        <label>
          <labelvalue />
        </label>
      )

      legend (
        <legend>
          <legendvalue />
        </legend>
      )

      checkbox (
        <label />
        <inputvalue />
      )

      checkboxgroup (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )

      fieldset (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )

      fileupload (
        <label />
        <inputvalue />
      )

      optgroup (
        <elements />
      )

      option (
        <inputvalue />
      )

      radio (
        <label />
        <inputvalue />
      )

      radiogroup (
        <fieldset>
          <legend />
          <containerWrap />
        </fieldset>
      )

      select (
        <label />
        <ol>
          <elements />
        </ol>
      )

      textarea (
        <label />
        <inputvalue />
      )

      textline (
        <label />
        <inputvalue />
      )
    }
  }

  # ###
  # postProcesso view
  # ###

  postProcessor {
    layout {
      html (
        <html>
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          </head>
          <body>
            <table cellspacing="0">
              <containerWrap />
            </table>
          </body>
        </html>
      )

      containerWrap (
        <tbody>
          <elements />
        </tbody>
      )

      elementWrap (
        <tr>
          <element />
        </tr>
      )

      label (
        <em>
          <labelvalue />
        </em>
      )

      legend (
        <thead>
          <tr>
            <th colspan="2" align="left">
              <legendvalue />
            </th>
          </tr>
        </thead>
      )

      checkbox (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )

      checkboxgroup (
        <td colspan="2">
          <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
            <legend />
            <containerWrap />
          </table>
        </td>
      )

      fieldset (
        <td colspan="2">
          <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
            <legend />
            <containerWrap />
          </table>
        </td>
      )

      fileupload (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )

      hidden (
        <td style="width: 200px;">
          <em>
            <label />
          </em>
        </td>
        <td>
          <inputvalue />
        </td>
      )

      optgroup (
        <elements />
      )

      option (
        <div>
          <inputvalue />
        </div>
      )

      radio (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )

      radiogroup (
        <td colspan="2">
          <table cellspacing="0" style="padding-left: 20px; margin-bottom: 20px;">
            <legend />
            <containerWrap />
          </table>
        </td>
      )

      select (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <elements />
        </td>
      )

      textarea (
        <td style="width: 200px;" valign="top">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )

      textline (
        <td style="width: 200px;">
          <label />
        </td>
        <td>
          <inputvalue />
        </td>
      )
    }
  }
}