Neue Scrivito Widgets

Meine ersten Stateful React Components

---

In diesem Beitrag möchte ich neue Scrivito Widgets vorstellen, die ich entwickelt habe. Dazu gehören auch meine ersten Stateful React Components. Stateful Components fügen einem Widget Interaktivität hinzu. In diesem Fall wird über Tabs der Inhalt des Widgets ausgetauscht. Wie immer beim Scrivito CMSsind die Inhalte der Widgets kinderleicht zu pflegen. Technisch betrachtet sind die Widgets natürlich nichts Besonderes. Aber immerhin ist kein jQuery notwendig, sondern einfach nur React und das Scrivito SDK.

Scrivito Widgets Das Herzstück von Scrivito sind Widgets. Das sind spezielle ReactJS Komponenten, deren Inhalte und Eigenschaften sehr einfach im Browser editiert werden können. Aber nicht über ein vom Frontend getrenntes, nichtssagendes Textfeld oder einen sog. Wysiwyg-Editor, sondern direkt innerhalb der Komponente. Sie klicken auf ein Element und geben Text ein. Dabei sehen Sie immer genau, wie das Ergebnis aussieht. Kein Umständliches Wechseln mehr zwischen Front- und Backend. Und das Speichern geschieht immer automatisch im Hintergrund. Stateless Widgets Die meisten Widgets sind statischer Natur. Sie zeigen gespeicherte Inhalte in einem bestimmten Layout und Design an. Eigenschaften, wie Farben oder Textausrichtung lassen sich über das CMS ändern, aber bleiben statisch. Diese Widgets reagieren nicht auf Benutzerinteraktionen oder andere Einflüsse von außen, wie z.B. die Tageszeit. Stateful Widgets Wird ein Widget benötigt, das auf Benutzerinteraktionen oder äußere Umstände, wie z.B. die Uhrzeit, reagiert, müssen sog. Stateful ReactJS Komponenten programmiert werden. Diese lassen sich aber auch, wie die einfachen, statischen Widgets von Redakteuren pflegen. Es kommt halt Dynamik ins Spiel. In dieser Komponente sind es die Tabs, die den Zustand der Komponente ändern. Es wird anderer Inhalt angezeigt. Das Ereignis, das den Wechsel des Zustands auslöst, muss aber kein Klick auf ein Element sein. Der Inhalt oder eine Eigenschaft, wie eine Hintergrundfarbe, könnte auch zu einer konfigurierbaren Uhrzeit, geändert werden.

Bisher entwickelte Widgets

• Share This

• Eyecatcher - Störer

• Bootstrap 4 Cards - mit Card Deck und Card Group Option

• Link Liste mit einem App Layout

• Bootstrap 4 Media Object

• Artikel Header - Headline plus Subtitle

• Timeline

• Tabbed Content

• Tabbed Blocks

• Swipeable Content

• Up Counter

• Time ago

• Countdown

• JW-Player

• Teaser-Referenzen

• Ranking

• Twitter Timeline

• Hubspot Widgets

• Newsapi Widgets

• Europeana Widgets

• Eventbrite Widgets

• Unsplash Widget