Powermail 8 für Bootstrap 5 in TYPO3 10 konfigurieren

Grundsätzlich wollte ich die Möglichkeit haben, die einzelnen Felder in einem 12-Spalten Layout mit Bootstrap 5 auf voller Breite (12 Spalten), auf 4 und 3 Spalten ab der Medium Device Größe (md) anzeigen zu können.

Zusätzlich wird ein neues Feld für einen Zeilenumbruch (blank line) eingefügt, um Umbrüche erzwingen zu können.

Im Page TSConfig:

TCEFORM {
  # Powermail
  tx_powermail_domain_model_form {
    css {
      removeItems = layout1, layout2, layout3
      addItems {
        col-12 = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_12col
        col-md-4 = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_4col
        col-md-3 = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_3col
      }
    }
  }

  tx_powermail_domain_model_page < .tx_powermail_domain_model_form
  tx_powermail_domain_model_field < .tx_powermail_domain_model_form
}

# Powermail new fields
tx_powermail.flexForm.type.addFieldOptions.blankline = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_blankline

Benötigte Übersetzungen:

<trans-unit id="powermail_blankline">
	<source>Blank line</source>
</trans-unit>
<trans-unit id="powermail_12col">
	<source>12 cols (full width)</source>
</trans-unit>
<trans-unit id="powermail_4col">
	<source>4 cols</source>
</trans-unit>
<trans-unit id="powermail_3col">
	<source>3 cols</source>
</trans-unit>

Konstanten:

plugin.tx_powermail {
  settings {
    styles {
      bootstrap {
        numberOfColumns = 2
        rowClasses = row
        formClasses = form-horizontal
        fieldAndLabelWrappingClasses = mb-4
        fieldWrappingClasses = col-12
        labelClasses = control-label col-12 mb-2
        fieldClasses =
        offsetClasses = col-sm-offset-2
        radioClasses = form-check
        checkClasses = form-check
        submitClasses = btn btn-primary
        createClasses = powermail_create
        important = 1
      }

      framework {
        formClasses = container
      }
    }
  }
}

Ergänze ein neues Template für das "Blank line" Feld im konfigurierten Partial-Pfad für Powermail: /dein-partial-pfad/Powermail/Form/Field/Blankline.html mit folgendem Inhalt:

<div class="col-12"></div>

Mit dieser Konfiguration könnt ihr anschließend in jedem Feld einstellen, über welche Breite es sich erstrecken soll und falls benötigt auch einen Umbruch mithilfe des zusätzlichen Feldes (Blank line) einfügen.