Scrivitos Möglichkeiten zur Bearbeitung von Inhalten erleichtern Redakteuren tagtäglich die Arbeit. Widgets, Drag-and-Drop, Elemente kopieren und einfügen, gemeinsames Arbeiten, der Content Browser, Arbeitskopien, der Veröffentlichungsverlauf und viele weitere Annehmlichkeiten wurden entwickelt, um Inhalte komfortabel und effizient erstellen und ändern zu können.

Bei der Erstellung oder Erweiterung einer Scrivito-basierten Web-Anwendung im Rahmen von Projekten liegt es in der Hand der Entwickler, die positive Benutzererfahrung von Redakteuren aufrecht zu erhalten. Dies lässt sich erreichen, indem sämtliche Möglichkeiten, die die Bearbeitungsschnittstelle bietet, ausgeschöpft werden.

Diese Anleitung verschafft Ihnen einen Überblick der Aspekte, die berücksichtigt werden sollten, wenn Redakteuren neue Layout- oder Styling-Optionen oder auch zusätzliche Funktionalität in Form von Widgets oder Seitentypen zur Verfügung gestellt werden. Bei der Umsetzung solcher Erweiterungen spielt die Konfiguration der Benutzerschnittstelle der Widgets und Seitentypen eine zentrale Rolle.

Während ein Redakteur an den Inhalten einer Seite arbeitet, ist immer auch die Benutzer-Interface-Konfiguration der einzelnen Seitenbestandteile involviert. Fügt man beispielsweise ein Widget zu einer Seite hinzu, oder eine Seite zur Website, wird ein Dialog geöffnet, mit dem man den Typ des Widgets oder der Seite auswählen kann. Wie die Elemente in diesem Dialog präsentiert werden, ist konfigurierbar.

In einer Konfiguration für die Arbeit mit der Benutzeroberfläche kann für Inhalte auch angegeben werden, ob sie über die Eigenschaften eines Widgets oder einer Seite bearbeitet werden sollen. Darüber hinaus können Widget- und Seitenattribute vorbelegt werden und, falls es viele davon gibt, lassen sie sich mit Hilfe von Reitern gruppieren. Um Widget- oder Seitenattribute komfortabler bearbeiten zu können, lassen sich sogar eigene Bedienelemente implementieren. In der API-Dokumentation zu provideEditingConfig 🇺🇸 finden Sie Details hierzu.

Damit Redakteure ein Widget im Auswahldialog von anderen gut unterscheiden und damit leicht finden können, empfehlen wir, es mit einem eindeutigen Miniaturbild sowie einem sprechenden Titel zu versehen. Andernfalls lässt sich die Position des gesuchten Widgets nur aufwendig ermitteln, insbesondere, wenn die Größe des Browserfensters geändert wird und sämtliche Widgets sich dadurch verschieben. Dasselbe gilt für die Elemente im Auswahldialog für Seitentypen.

In der Scrivito Example App werden als Miniaturbilder SVGs verwendet, weil sie sehr gut skalieren und nur wenig Speicherplatz verbrauchen. Es gibt etliche Tools, mit denen SVG-Bilder erstellt werden können, beispielsweise Inkscape. Wie so häufig ist es am einfachsten, von einem bestehenden Bild eine Kopie zu machen und diese dann so zu ändern, dass sie den Zweck des neuen Widgets so gut wie möglich wiedergibt.

Als Alternative zu SVGs können auch JPGs und PNGs verwendet werden. Um das Erscheinungsbild des Auswahldialogs und der Elemente darin homogen und konsistent zu halten, sollten die Bilder allerdings dieselben Abmessungen haben und einem einfachen, immer gleichen Farbschema folgen.

Ergänzend zu einem Miniaturbild und einem Titel kann einem Widget- oder Seitentyp eine Beschreibung gegeben werden, falls der Zweck des Elements aus seinem Titel und Miniaturbild nicht klar genug hervorgeht.

Mit den folgenden Schlüsselwörtern können Sie in einer Konfiguration für die Benutzerschnittstelle den Titel, das Miniaturbild sowie die Beschreibung angeben, die im Auswahldialog angezeigt werden:

Redakteure wissen es zu schätzen, wenn sie Inhalte direkt auf den Webseiten bearbeiten können. Wo immer dies möglich ist, sollten Attributwerte also nicht einfach auf den Seiten ausgegeben werden oder in den Eigenschaften des Widgets oder der Seite geändert werden können, sondern direkt auf den Seiten bearbeitbar sein. Dies kann mit Scrivito.ContentTag erreicht werden, einer React-Hilfskomponente 🇺🇸, die zu genau diesem Zweck vorgesehen wurde.

Scrivito.ContentTag rendert die Werte von Attributen aller Typen und ermöglicht es Redakteuren, den Inhalt von Attributen der Typen widgetlist, string, html, datetime und date 🇺🇸direkt auf der jeweiligen Seite zu bearbeiten. Verwenden Sie diese Komponente, wo immer es möglich ist!

Nicht jede Styling- oder Konfigurationsoption, nicht jede kleine Erweiterung der Funktionalität erfordert ein eigenes Widget. Es mag beispielsweise so aussehen, als würden mehrere Formular-Widgets benötigt, eines, um sich anzumelden, ein weiteres zur Registrierung für eine Veranstaltung, und noch eines, um einen Newsletter zu abonnieren. Diese Formulare unterscheiden sich zwar minimal hinsichtlich der Daten, die sie vom Besucher anfordern sowie der Aktionen, die jeweils angestoßen werden. Dennoch können sie in einem Widget zusammengefasst werden, in dessen Eigenschaften der Redakteur dann mit einem Schalter den Zweck des Formulars auswählen kann, damit es wie gewünscht aussieht und funktioniert. Manchmal können Widgets sogar auf ihren Kontext zurückreifen, um beispielsweise das zu verwendende CSS zu ermitteln: „Bin ich auf einer Landing-Page?“

Wenn man die allgemeine Anforderung im Hinterkopf behält, dass Widgets weder überladen noch schwer zu benutzen sein sollen, kann man Redakteuren leicht Funktionalität, ein Format, einen Stil usw. mit Hilfe eines enum-Attributs anbieten, bei dem sich die Optionen gegenseitig ausschließen. Mit einen multienum-Attribut dagegen kann man mehrere miteinander kombinierbare Optionen auswählbar machen.

Es gibt Widgets, die Widgets enthalten, wobei letztere von Redakteuren nur in den Eigenschaften des übergeordneten Widgets bearbeitet werden können. In diesem Fall können Sie jedem der untergeordneten Widgets einen individuellen (instanzspezifischen) Titel geben. Anhand solcher Titel lassen sich die einzelnen Widgets dann erkennen und sortieren oder löschen:

In der Example App veranschaulicht das ThumbnailGalleryWidget mit seinen ThumbnailGalleryImageWidgets, wie dies mit Hilfe des titleForContent-Callbacks in der Konfiguration dieses Image-Widgets erreicht werden kann:

Redakteure profitieren von Scrivitos herausragender Bedienbarkeit am meisten, wenn Entwickler ausgiebig Gebrauch von den Mitteln machen, mit denen die Benutzerschnittstelle angepasst und erweitert werden kann.

Die Konfiguration für die Bearbeitung von CMS-Objekten und Widgets unterstützt Sie dabei, Seiten- und Widget-Typen in den Auswahldialogen ansprechend zu gestalten und leicht und schnell auffindbar zu machen. Je mehr Seiten- und Widget-Eigenschaften direkt auf den Seiten bearbeitet werden können, desto besser.

Nicht zuletzt ist jeder Redakteur dankbar für eindeutige und selbsterklärende Optionen in den Eigenschaftendialogen!