Dynamische Layouts in Sitecore

In diesem Beitrag geht es um die Umsetzung von dynamischen Layouts in Sitecore. Dabei stellen sich unmittelbar zwei Fragen:

Was sind dynamische Layouts?

Was dynamische Layouts sind erklärt sich am besten durch die Abgrenzung zu statischen Layouts:

Gegeben sei eine übliche Homepage, die in verschiedene Darstellungsbereiche untergliedert ist. Bezogen auf ein klassisches Textdokument existieren quasi eine Kopfzeile, ein Inhaltsbereich und eine Fußzeile. Kopf- und Fußzeile enthalten Informationen, die auf jeder Seite des gesamten Dokuments ausgegeben werden sollen. Bei einer Website also Inhalte, die immer sichtbar sein sollen. Üblicherweise handelt es sich dabei um Dinge wie den Namen des Unternehmens, das Logo im Kopfbereich, Verweise auf das Impressum oder ein Kontaktformular im Fußbereich. Die so beschriebene globale Dokumentstruktur repräsentiert die statischen Teile des Layouts.

Der Inhaltsbereich soll verschiedene Inhaltstypen, also z. B. Text, Bilder oder Tabellen enthalten können. Hierfür ist eine weitere räumliche Untergliederung des Darstellungsbereichs je Seite erforderlich. Ein Textdokument ist in dieser Hinsicht flexibel: Will man auf Seite 3 ein Bild einfügen, so ist das problemlos möglich. Im Unterschied zu den Inhalten im Kopf- und Fußbereich wird dieses Bild aber nicht auf allen Seiten des Dokuments auftauchen. Das ist dann der dynamische Teil des Layouts. Grundsätzlich also der Bereich, dessen Aufteilung nicht schon zur Entwurfszeit feststeht, sondern sich erst bei der konkreten Ausgestaltung mit Inhalten ergibt. Wie wichtig diese Differenzierung ist, wird auf drastische Weise klar, wenn man sich vorstellt, man erstellte das gesamte Dokument auf Papier und wäre gezwungen, auf jede Seite das Unternehmenslogo zu malen. Damit sollte prinzipiell klar sein, wie wichtig und nützlich die Unterteilung in statische und dynamische Darstellungsbereiche ist.

Und warum gibt es dynamische Layouts nicht in Sitecore?

Um die zweite Frage nach der Abwesenheit von Möglichkeiten zur dynamischen Seitengestaltung in Sitecore zu beantworten, muss man zunächst ganz grundsätzlich betrachten, wie Inhalte in Sitecore zur Darstellung kommen. Dabei ist es zunächst wichtig, zwischen der räumlichen Aufteilung einer Seite zu unterscheiden, also dem Layout einerseits und den eigentlichen Inhalten andererseits. Grundsätzlich definiert man also zunächst ein Raster von Layout-Bereichen, in das dann im zweiten Schritt die eigentlichen Inhalte platziert werden. Hierfür werden im Layout entsprechende Platzhalter definiert, die dann im Sitecore CMS mit Inhaltstypen belegt werden können. Entscheidend für die Beantwortung der eigentlichen Frage ist die Tatsache, dass jeder dieser Platzhalter eine eigene Kennung hat und diese innerhalb der jeweiligen Seite eindeutig sein muss.

Warum diese Tatsache der Kern des Problems ist, soll anhand eines konkreten Beispiels verdeutlicht werden.

Die ACME Website

Machen wir uns also an die Umsetzung der Website für das beliebte fiktive Unternehmen ACME (A Company Manufacturing Everything). Das Szenario sieht vor, dass verschiedene Personen mit unterschiedlichen Rollen die Website erstellen. Da wären zunächst Software-Entwickler, die das von den Designern entworfene Konzept umsetzen und somit die Basis schaffen, in die die Redakteure der jeweiligen Unternehmensbereiche ihre Inhalte einpflegen. Das grundlegende Layout -Raster folgt dabei dem eingangs erwähnten Kopf-, Inhalts- und Fuß-Bereich Schema, lediglich ergänzt um einen Navigationsbereich.

Das globale Layout

Das in Sitecore definierte globale Layout, das unsere Website verwendet, verweist auf eine entsprechende .aspx-Datei, in der die Platzhalter für die globalen Elemente definiert werden:

Diese Platzhalter werden dann im Sitecore CMS mit den jeweiligen Inhalten belegt. Dabei dient das Key-Attribut als eindeutiger Schlüssel.

Eine Anforderung hierbei ist natürlich, dass die Zuordnung zu diesen Inhaltsbereichen nur einmal global und nicht für jede Seite erneut durchgeführt werden muss. Durch die Zuordnung auf der Ebene der Standardwerte der globalen Seitenvorlage lässt sich dies erreichen:

Anmerken möchte ich hier, dass diese Lösung an ihre Grenzen stößt, wenn die Vererbungshierarchie der Sitecore Templates zwei Ebenen übersteigt. Wie dieses Problem zu überwinden ist, soll Thema eines weiteren Beitrags sein.

Nun können die weiteren Seiten der ACME Website angelegt werden, die alle das globale Layout verwenden und somit auch alle über die globalen Elemente, also Logo, Navigation, etc. verfügen.

Inhaltsbereich

Für den Inhaltsbereich werden verschiedene Sublayouts definiert, die jeweils eine bestimmte Kombination aus Texten und Grafiken erlauben, um die Stärken und Ziele von ACME zu präsentieren. Letztendlich sind aber auch diese Sublayouts statisch und die Anzahl der Varianten korreliert 1:1 mit der Anzahl der entsprechenden Definitionen in Sitecore, respektive der zugrunde liegenden .ascx-Dateien. Diese Sublayouts verwenden keine Platzhalter, sondern zeigen die Inhalte der jeweiligen Sitecore Items direkt an, in dem sie die entsprechenden Felder des Items auswerten. Hierfür existieren in Sitecore zahlreiche Tags, die diese Aufgabe vereinfachen.

Den Redakteuren der verschiedenen Unternehmensbereiche soll es aber möglich sein, den Inhaltsbereich flexibel und individuell gestalten zu können, doch die existierenden Sublayouts bieten dafür zu wenig Spielraum. Also beginnt man, einige der Sublayouts mit zusätzlichen Platzhaltern auszustatten, auf denen dann weitere Sublayouts platziert werden können. So soll es möglich sein, durch Verschachtelung der Sublayouts die Flexibilität zu erhöhen. Dies scheint auch zunächst zu funktionieren. Bis ein Redakteur auf die Idee kommt, das gleiche Sublayout innerhalb einer Seite zweimal zu verwenden. Das Symptom, das auftritt, ist schlicht das, dass nicht alle Inhalte wie erwartet angezeigt werden.

Nach umfangreicher Analyse stellt man fest, dass aufgrund der Tatsache, dass die Schlüssel der einzelnen Platzhalter innerhalb einer Seite eindeutig sein müssen, die Zuweisungen der Inhalte sich im Fall von doppelten Schlüsseln einfach überschreiben. Mit Hilfe von Restriktionen bei den Möglichkeiten der Zuweisungen zu Platzhaltern (Insert Options) ließe sich das Problem zwar umgehen, die gewünschte Flexibilität wäre aber trotzdem nicht erreicht.

Erkennbar wird an diesem Punkt, dass sich das Problem nur durch einen tiefen Eingriff in das Sitecore Layout System beheben lässt.

Dynamische Layouts in Sitecore

Um die gewünschte Flexibilität bei der Seitengestaltung zu erzielen, werden verschiedene Sublayouts definiert, die jeweils bestimmte Layout-Raster zur Verfügung stellen. Diese sollen beliebig kombiniert und in einander verschachtelt werden können.

Damit das Ganze dann auch funktioniert, muss man nur noch das Problem mit den doppelten Schlüsseln lösen. Und da es um dynamische Layouts geht, liegt die Lösung darin, eben auch die Schlüssel der Platzhalter zu dynamisieren.

Der erste Schritt ist die Definition eines neuen Platzhalter Controls, welches die bestehenden Platzhalter ersetzt, wenn dynamische Zuweisungen erforderlich sind.

Die Implementierung generiert anhand der ID des übergeordneten Renderings einen eindeutigen Schlüssel für den Platzhalter mit dem dann das Key-Attribut überschrieben wird.

Des Weiteren muss man sich in die Sitecore Rendering Pipeline einklinken, um dafür zu sorgen, dass z. B. die Placeholder Settings korrekt übernommen werden. Dafür muss der generierte Schlüssel wieder in seiner ursprünglichen Form verwendet werden.

Im Page Editor kann man nun die Seite dynamisch um die benötigten Komponenten ergänzen und so das Layout an die Erfordernisse anpassen, ohne dass neue Sublayouts erstellt werden müssen.

Der Dialog zum Hinzufügen neuer Renderings ermöglicht die Auswahl der zuvor erstellten Layout Komponenten. In diesem Fall wird einfach das zweispaltige Sublayout noch einmal hinzugefügt:

Und man erhält eine weitere zweispaltige Zeile in der Seite:

Auf diesem Wege lässt sich das Layout nun beliebig anpassen.

Es existieren einige Blogposts zu diesem Thema im Internet in denen verschiedene Entwickler sich diesem sehr grundlegenden Problem in Sitecore angenommen haben. Nicht verschwiegen werden soll daher, dass die Inspirationen zur Lösung des Problems auch von folgenden Quellen stammen:

•   John Newcombe - Dynamic Placeholders

•   Dave Leigh - Dynamic Placeholder Keys in Sitecore

•   Matthew Kenny - Dynamic Placeholders and IExpandable