Backend Layout für TYPO3 Template und Setup

Im nächsten Schritt wird das Backend Layout in die Webseite eingebunden. Dazu geht man auf die Startseite in der ersten Ebene und auf die Seiteneigenschaften. Im Reiter Erscheinungsbild hat man nun die Möglichkeit, das Backend Layout für diese Seite einzubinden:

Wenn Sie nach dem Speichern auf den Button Seiten-TSconfig anzeigen klicken, können Sie den vom Assistenten generierten Code sehen:

mod.web_layout.BackendLayouts {
  exampleKey {
    title = Example
    icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
    config {
      backend_layout {
        colCount = 2
        rowCount = 3
        rows {
          1 {
            columns {
              1 {
                name = Inhalt mit Titel H1
                colspan = 2
                colPos = 10
              }
            }
          }
          2 {
            columns {
              1 {
                name = Inhalt mit Titel H2 oder H3
                colspan = 2
                colPos = 11
              }
            }
          }
          3 {
            columns {
              1 {
                name = Spalte unten links
                colPos = 12
              }
              2 {
                name = Spalte unten rechts
                colPos = 13
              }
            }
          }
        }
      }
    }
  }
}

Diesen Code können Sie seit der Version v9.5 in TYPO3 nicht mehr in diesem Fenster bearbeiten. Nutzen Sie, wenn Sie genau wissen, was Sie da tun, die Möglichkeit zur Arbeit in der Datenbank, und machen Sie zuvor ein Backup dieser Konfiguration!

Doch es geht noch ein Spur freundlicher für die Nerven. Neben der Möglichkeit, das Backend Layout in der Datenbank zu speichern, bietet TYPO3 auch die Option an, dies in einer TypoScript Datei zu hinterlegen. Dies bringt mehrere Vorteile mit sich:

• Der Quellcode lässt sich per GIT oder über andere Tools versionieren
• Beim Rollout einer Provider Extension liefert man den Code für das Layout gleich mit

Dazu sollte man folgende Schritte befolgen, die wir hier schildern.

Erstellen Sie eine Page TS Config

Im ersten Schritt erstellen Sie in Ihrer Provider Extension eine eigene Datei für das TypoScript Ihrer Seite, falls Sie dies bei einer neueren Version von TYPO3 wie der Version 12 nicht schon getan haben. Die Datei wird dann automatisch ausgelesen und verarbeitet. Dazu sollte sie der Konvention für Speicherort und Namen folgen:

/ext/provider/Configuration/page.tsconfig

Backend Layout in Page TypoScript Config 

Im nächsten Schritt können Sie den Code für das Backend Layout wie im Beispiel oben in die Page TypoScript Configuration Datei übertragen. Die Syntax muss dann geringfügig angepasst werden.

mod.web_layout.BackendLayouts {
   2 {
       title = Text Inhalt
       icon = EXT:ihreextension/Resources/Public/Images/BackendLayouts/Text-Inhalt.gif
       config {
           backend_layout {
               colCount = 1
               rowCount = 2
               rows {
                   1 {
                       columns {
                           1 {
                               name = Überschrift und Text H1
                               colPos = 1
                           }
                       }
                   }
                   2 {
                       columns {
                           1 {
                               name = Überschrift und Text H2
                               colPos = 2
                           }
                       }
                   }
               }
           }
       }
   }
}

Sie haben nun die Gelegenheit, dieses Backend Layout anzubinden. Wichtig dabei: Anstatt des “exampleKey” aus dem obigen Beispiel geben Sie die ID für die ColPos ein, mit der dieses Layout über das Setup angebunden wird. Sollten Sie ihr bisheriges Backend Layout übertragen, ist es die bestehende UID.

Backend Layout neu anbinden

Im vorletzten Schritt müssen Sie das neu definierte Backend Layout nun noch an Ihr System anbinden. Dies können Sie machen, indem Sie in das Backend Ihrer Seite gehen und dort die Auswahl entsprechend ändern. Wenn Sie Zugriff auf die Datenbank Ihrer TYPO3 Webseite haben, können Sie jedoch auch die Tabelle pages aufrufen und dort die beiden Felder für das Backend Layout diese Seite und folgende Seiten sortieren lassen. Dann sehen Sie alle Vorkommen. Ändern Sie nun die ID für den Bezug, im obigen Beispiel war die ursprüngliche ID die 2:

2 -> pagets__2

Im letzten Schritt ist es nun notwendig, ins Setup zu gehen. Ändern Sie nun im PAGE Object bei der Verknüpfung von Backend Layout und Templates die Variablen entsprechend ab:

Aus

2 = TEXT
2.value = EXT:myext/Resources/Private/Templates/Zwei.html

wird 

pagets__2 = TEXT
pagets__2.value = EXT:myext/Resources/Private/Templates/Zwei.html