Webbasierte Software für für E-Sport und Business

TYPO3 Backend Layouts über Page TSConfig in Dateien auslagern

Veröffentlicht von Dennis Lizarzaburu am 25.07.2016

Dennis Lizarzaburu

Das Auslagern von Backend Layouts in Dateien bietet einige Vorteile gegenüber Backend Layouts in Datensätzen. Um diese Vorteile zu nutzen mussten bisher Extensions genutzt werden. Seit TYPO3 7.4 können Backend Layouts über das Page TSConfig definiert und somit in Dateien ausgelagert werden.

Einrichtung eines Backend Layouts

Zunächst lagern wir das gesamte Page TSConfig in eine Datei aus, welches über die Seiteneigenschaften definiert werden kann. Dazu legen wir auf der Root Seite unserer TYPO3 Installation unter "Page TSConfig" im Reiter "Ressourcen" einen Verweis zu unserer TypoScript Datei ab.

<INCLUDE_TYPOSCRIPT:source="FILE(EXT)extension_name/Configuration/PageTSConfig/default.ts">

Der Ort der der TypoScript Datei ist beliebig wählbar. Wir nutzen für das gesamte Page TSConfig ein Verzeichnis auf der selben Ebene wie das TypoScript.

In dieser Datei werden wir unsere BackendLayouts definieren. Diese können natürlich auch wieder in einzelne Dateien ausgelagert werden, wenn man noch ein bisschen mehr Struktur erzeugen möchten. Zunächst bleiben wir aber bei einer Datei.

Auch wenn wir die Backend Layouts nicht mehr über TYPO3 Datensätze nutzen wollen, empfiehlt es sich den Wizard für die Erstellung zu nutzen. In unserem Beispiel verwenden wir ein einfaches zweispaltiges Layout. Nach dem Erstellen mit Hilfe des Wizards können wir uns die Configuration aus dem Datensatz kopieren und in unserer PageTS einfügen. 

backend_layout {
    colCount = 2
    rowCount = 1
    rows {
        1 {
            columns {
                1 {
                    name = Links
                    colPos = 0
                }
                2 {
                    name = Rechts
                    colPos = 0
                }
            }
        }
    }
}
Das mit dem TYPO3 Backend Layout Wizard erstellte Backend Layout

Damit TYPO3 weiß, dass es sich hierbei um ein Backend Layout handelt, müssen wir dies noch deklarieren. Wir wrappen es daher in folgende Konfiguration. An dieser Stelle können wir dem Backend Layout auch einen Namen und ein Icon geben, um es im in TYPO3 klar darzustellen.

Es können beliebig viele Layouts definiert werden. Dazu muss einfache der komplette Block ab der ID kopiert werden und die ID entsprechend angepasst werden. Es ist nicht notwendig mit der "1" zu beginnen und aufwärts zu zählen.

mod {
    web_layout {
        BackendLayouts {
            1 {
                title = Zweispalter
                config {

                }
                icon = EXT:extension_name/Resources/Public/Icons/be_2_columns.png
            }
            
            2 {
                title = Dreispalter
                config {

                }
                icon = EXT:extension_name/Resources/Public/Icons/be_3_columns.png
            }
        }
    }
}
TypoScript Wrapper für Backend Layouts

Unter config wird dann unsere Backend Layout Definition für den Zweispalter eingefügt. So sieht das fertig TypoScript für die Definition von Backend Layouts aus.

mod {
    web_layout {
        BackendLayouts {
            1 {
                title = Zweispalter
                config {
                    backend_layout {
                        colCount = 2
                        rowCount = 1
                        rows {
                            1 {
                                columns {
                                    1 {
                                        name = Links
                                        colPos = 0
                                    }
                                    2 {
                                        name = Rechts
                                        colPos = 0
                                    }
                                }
                            }
                        }
                    }
                }
                icon = EXT:extension_name/Resources/Public/Icons/be_2_columns.png
            }
        }
    }
}
Komplette Definition eines Backend Layouts über das Page TSConfig

Nutzung der Backend Layouts

In der Regel gibt es analog zu jedem Backend Layout auch ein Frontend Template. Dieses soll nun automatisch verwendet werden, sobald das Backend Layout auf einer Seite ausgewählt wurde. Dazu nutzen wir folgendes TypoScript für die Auswahl des Fluid-Templates im Frontend.

page.10 = FLUIDTEMPLATE
page.10 {
    partialRootPath = EXT:extension_name/Resources/Private/Partials/
    layoutRootPath = EXT:extension_name/Resources/Private/Layouts/

    file.stdWrap.cObject = CASE
    file.stdWrap.cObject {

        # Die Backend Layout ID definiert das Frontend Template
        # An dieser Stelle sliden wir gerne, da Backend Layouts häufig auf Unterseiten vererbt werden.
        # Diese Abfrage kann je nach Bedürfnissen angepasst werden.
        key.data = levelfield:-1, backend_layout, slide
        key.override.field = backend_layout

        # Standard Layout
        # Wird verwendet wenn keine spezielles Backend Layout definiert wurde.
        default = TEXT
        default {
            value = EXT:extension_name/Resources/Private/Templates/Default.html
        }

        # Definition für unseren Zweispalter
        # Wenn wir Backend Layouts über die Datenbank definieren, dann wird an dieser Stelle die ID des Datensatz stehen.
        # Da wir diese aber ins Page TSConfig auslagern, müssen wir der ID "pagets__" voranstellen.
        pagets__1 = TEXT
        pagets__1 {
            value = EXT:extension_name/Resources/Private/Templates/2Colums.html
        }

        # Definition für den Dreispalter
        pagets__2 = TEXT
        pagets__2 {
            value = EXT:extension_name/Resources/Private/Templates/3Colums.html
        }
    }
}

© 2021, Braune Digital GmbH, Niemannsweg 69, 24105 Kiel, +49 (0) 431 55 68 63 59