In dieser Anleitung zeigen wir Ihnen, wie man angenehm anzuschauende Listen mit Hilfe verschachtelter Widget-Listen rendern kann. Am meisten profitieren Sie von dieser Anleitung, wenn Sie sich bereits mit Scrivitos Modellklassen für Inhalte und wie diese mit React zusammenspielen befasst haben.
Widget-Listen flexibel darstellen
Widget-Listen flexibel darstellen
Beim Scrivito Web Builder besteht jede Seite normalerweise aus Widgets, die sich in einer zu der jeweiligen Seite gehörenden Widget-Liste befinden. Zu dieser Widget-Liste können einfache Widgets für Inhalte (etwa Text- oder Bild-Widgets), aber auch Struktur-Widgets (Spalten, Kästen usw.) hinzugefügt werden.
Widget-Listen können auf Seiten verfügbar gemacht werden, indem die jeweilige Scrivito-Modellklasse mit einem Attribut vom Typ widgetlist ausgestattet wird.
Nur der widgetlist-Typ ermöglicht es, Inhalte zu strukturieren. So muss beispielsweise jede Spalte eines Spalten-Widgets ein eigenes widgetlist-Attribut haben, um Text, Bilder und andere, gegebenenfalls sogar strukturierte Inhalte darin ablegen zu können.
Wozu eine eigene Logik einführen?
Für Widgets oder Seiten verfügbar gemachte Attribute eines jeden Typs können mit Scrivito.ContentTag gerendert werden. Bei widgetlist-Attributen rendert Scrivito.ContentTag die einzelnen Widgets nacheinander in der Reihenfolge, die sie in der Widget-Liste haben. Dies ist der häufigste Anwendungsfall.
Was jedoch, wenn Sie eine sortierte oder unsortierte Liste anzeigen wollten, bei der jedes Element ein Struktur-Widget mit einem oder mehreren Widgets sein soll? In diesem Fall müsste jedes Widget in der Liste separat gerendert werden, sodass Sie es mit den jeweils gewünschten Styles versehen können.
Wie dies umgesetzt werden kann, zeigen wir im Folgenden.
Die Widgets anlegen
Wir benötigen zwei Widget-Typen, ein ListWidget, das Redakteure zu Seiten hinzufügen können, sowie ein ListItemWidget, mit dem sich mehrere Widgets als ein Listenelement kombinieren lassen.
Das ListWidget
In einer Scrivito-basierten App wie der Portal App sind alle Widget-Klassen im Verzeichnis „src/Widgets“ definiert. Darin legen legen wir zunächst ein „ListWidget“-Verzeichnis sowie eine Datei namens „ListWidgetClass.js“ an.
Das ListWidget, das wir definieren werden, ist insofern ein ganz gewöhnlicher Widget-Typ, als Redakteure ihn im Widget-Auswahldialog wählen können, wenn sie ein Widget zu einer Seite oder zu einem Struktur-Widget hinzufügen möchten.
Unser ListWidget zeigt seinen Inhalt (eine beliebige Anzahl ListItemWidgets – wir werden diesen Typ später definieren) als eine unsortierte Liste an, was Sie jedoch Ihren Anforderungen entsprechend ändern können. Legen Sie den Code im Verzeichnis „src/Widgets/ListWidget“ unter den im Folgenden angegebenen Dateinamen ab.
Beachten Sie gleich hier zu Beginn, dass das widgetlist-Attribut namens items einen only-Parameter hat. Dieser beschränkt den Inhalt der Widget-Liste auf ListItemWidget-Instanzen. Mit anderen Worten: Die einzigen Widgets, die zu einem beliebigen ListWidget hinzugefügt werden können, sind ListItemWidgets.
Wie zu sehen ist, erhält die ListWidget-Klasse neben der Widget-Liste items ein weiteres Attribut: cssClass. Damit können Redakteure den Namen der zu verwendenden CSS-Klasse angeben. Die Komponente des Widgets rendert den Inhalt der Instanzen (also items) mithilfe der Komponente Scrivito.ContentTag, der der angegebene CSS-Klassenname (oder „list-group“ als Voreinstellung) übergeben wird:
Als zu verwendendes tag haben wir ul angegeben (Voreinstellung: div), sodass wir die Listenelemente später mit li rendern können. Jetzt brauchen wir nur noch den Namen der CSS-Klasse in den Widget-Eigenschaften bearbeitbar zu machen:
Das ListItemWidget
Wir wenden uns nun den Listenelementen zu, den items, die zu unserem ListWidget hinzugefügt werden können: ListItemWidgets. Diese Elemente haben ebenfalls zwei Attribute, eine Widget-Liste namens content und wieder cssClass. Beachten Sie, dass wir den Parameter onlyInside in der Modellklasse angeben, um sicherzustellen, dass ein ListItemWidget nur zu einem ListWidget hinzugefügt werden kann.
Über die folgende Komponente des Widgets wird jede ListItemWidget-Instanz von Scrivito.WidgetTag als ein <li>-Element gerendert, einschließlich der im cssClass-Attribut angegebenen Style-Klassen. Innerhalb des <li>-Elements wird die Widget-Liste content mittels Scrivito.ContentTag gerendert:
Abschließend machen wir wie beim ListWidget den CSS-Klassennamen der Listenelemente bearbeitbar:
Das war’s! Wir haben jetzt alles, was wir benötigen.
Probieren Sie es aus!
Wenn alles wie vorgesehen eingerichtet wurde, können Sie jetzt das ListWidget auf Seiten platzieren.
Anfänglich ist ein ListWidget leer. Fügen Sie einfach Elemente hinzu und Widgets zu den Elementen. Schieben Sie alles so zurecht, wie Sie es möchten!
Über die Eigenschaften einer Liste können Sie ihr CSS-Klassen zuordnen. Dasselbe gilt für die einzelnen Elemente.
Alles hat Potenzial!
Nachdem Sie nun die Darstellung von widgetlist-Attributen anpassbar gemacht haben, könnten Sie das Ergebnis noch weiter ausbauen. Beispielsweise wäre es für Redakteure bestimmt praktischer, wenn sie die Listenstile nicht als Klassennamen angeben müssten, sondern per Auswahl aus einer vorgegebenen Liste (basierend auf einem enum- oder multienum-Attribut) einstellen könnten.